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.