Ajax - 1h
AJAX is a browser technology that uses only JavaScript in the browser page. It is a
very efficient way of updating information. It is a way of making applications
smaller, faster and easier to use. It is based on open standards:
 JavaScript (ECMAScript)
 XML
 HTML
 CSS
 Ordinary web servers
AJAX uses two tricks: HTML request to server [XMLHttpRequest()] and the
Document Object Model (DOM). We may be looking at DOM in greater depth in
another lecture.
How AJAX works
1.
2.
3.
4.
5.
The user triggers an HTML event, such as onClick or onMouseOver.
JavaScript sends an HTTP request to the server.
The 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.
A demonstration of AJAX
The next program gets a text file and displays the contents in an alert box. Note that
although the “X” in AJAX means XML, the data file can be text, PHP, XML or
anything reasonable.
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.htm:
var 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);
}
}
}
Cross-Browser Version (4allpop.htm)
We start out by finding out which browser we’ve arrived in...
function GetXmlHttpObject() {
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ctiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp }
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.
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)
}
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
function stateChanged()
{
if (xmlHttp.readyState==4)
alert(xmlHttp.responseText);
}
}
{
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.
How to put imported text into a document
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”
<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”
<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!
Display an element of an XML database
(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)
The instructions for file handling are slightly different, because we need to tell the
system to treat the file as XML.
if (xmlHttp.readyState==4)
{
var xmldoc = xmlHttp.responseXML;
}
We then lock onto a node that I happen to have called ‘napier’ :
var root_node =
xmldoc.getElementsByTagName(‘napier').item(0);
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.