Upload
kathryn-singleton
View
213
Download
0
Embed Size (px)
Citation preview
Ajax - 1h
AJAX
IS:
• A browser technology
• A technology that uses only JavaScript in the browser page
• A very efficient way of updating information
• A way of making applications smaller, faster, easier to use.
AJAX
Is based on open standards:
• JavaScript (ECMAScript)
• XML
• HTML
• CSS
• Ordinary web servers
AJAX
Uses two tricks:
• HTML request to server: XMLHttpRequest()
• The Document Object Model (DOM) (We’ll be looking at DOM in greater depth in another lecture)
AJAX
• User triggers an HTML event, such as onClick or onMouseOver
• JavaScript sends HTTP request to server
• Server supplies a file, as normal.(That file may be XML, HTML or text.)
• The JavaScript in the current browser page selects part of the file for display
• A JavaScript statement displays it.
AJAX
• The next program gets a text file and displays the contents in an alert box.
• To keep it simple, I’ve written a program that will only work in IExplorer.
• Microsoft doesn’t conform to standards, so JavaScript usually needs to do browser detection and have two sets of code.
3iesuck.htmvar suck
function popupfile() {suck=new ActiveXObject("Microsoft.XMLHTTP") suck.open("GET","text.txt",true) suck.onreadystatechange=stateChanged suck.send(null) }
function stateChanged() { if (suck.readyState==4) { alert(suck.responseText); } }
4allpop.htm
• Now we’re going to look at the cross-browser version
• This is going to have to spread over seven slides
• I share your pain, but this is because Microsoft uses a refusal to standardise as a marketing strategy.
• We start out by finding out which browser we’ve arrived in...
4allpop.htm
• function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")} return objXMLHttp }
4allpop.htm
• Now the main body of the request, which is similar to the all-IE version.
• We set up a set of threads, which will “happen” when “send” fires them off
• We use the appropriate function for this particular browser (xmlHttp), which we discovered in the last slide.
4allpop.htm
• var xmlHttp
function popupfile() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) {
alert ("Browser does not support HTTP Request") return } xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET","text.txt",true) xmlHttp.send(null) }
4allpop.htm
• Finally we wait for the text file to come in from the server.
• When it’s in, we pop up the contents in an alert box
4allpop.htm
• function stateChanged() { if (xmlHttp.readyState==4) {
alert(xmlHttp.responseText); }
}
4allpop.htm
You may become better than me, but for me:
• It is very difficult to remember all this code
• I make sure I’ve got a working prototype somewhere and cut and paste from that.
• Then I hack accordingly.
5within.htm
• Eventually, we’re going to have to learn how to put imported text into our document
• We can’t keep on using alert boxes (even though they are fantastic for debugging).
• The next page shows how this is done
5within.htm
• <input type='button' onclick='rewriter("here","banana")' value='banana'/>
• On clicking this button, it calls a function called “rewriter” to put the word “banana” into a place called “here”
5within.htm
<script type='text/javascript'>function rewriter(where,what){ document.getElementById(where).innerHTML = what;
}</script>
• We use the DOM instruction:“getElementById” to put “what” into “where”
5within.htm
<p>
I wish someone would give me a piece of <span id="here">unspecified fruit</span>
to have with my lunch.
</p>
• We could use the ID of any element, such as <p> or <div>, but <span> is so useful!
7xml.htm
• Lastly, we get and display the root element of an XML file.
• Getting the file is dead easy:
xmlHttp.open("GET","test.xml",true)
7xml.htm
• The instruction for file handling is slightly different, because we need to tell the system to treat the file as XML.
if (xmlHttp.readyState==4) {
var xmldoc = xmlHttp.responseXML;
7xml.htm
• We then lock onto the node that I happen to have called ‘napier’ :
var root_node = xmldoc.getElementsByTagName(‘napier').item(0);
7xml.htm
• Then, with another DOM instruction, we find its first child and feed that data into our web page:
document.getElementById('here').innerHTML = root_node.firstChild.data;
What have we learned?
• We now know a little JavaScript.• We can use alert boxes for debugging.• We always knew how to read a file from
the server; now we can do it without changing web page.
• We can change some of the text of our page, on the fly.
• We can pull data out of an XML file and display it.
Tutorial Work
• Find the directory of example programs on the server.
• Read them and make sense of what you read.
• Run them and prove to yourself that they actually go.
• Learn through play: Hack them around and make them do something else.