1. Ajax - 1h

2. 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.

3. AJAX Is based on open standards: JavaScript (ECMAScript) XML HTML CSS Ordinary web servers

4. 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)

5. 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.

6. 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.

7. 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); } }

8. 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...

9. 4allpop.htm function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }

10. 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.

11. 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) }

12. 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

13. 4allpop.htm function stateChanged() { if (xmlHttp.readyState==4) { alert(xmlHttp.responseText); } }

14. 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.

15. 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

16. 5within.htm On clicking this button, it calls a function called “rewriter” to put the word “banana” into a place called “here”

17. 5within.htm function rewriter(where,what){ document.getElementById(where).innerHTML = what; } We use the DOM instruction: “ getElementById ” to put “what” into “where”

18. 5within.htm I wish someone would give me a piece of unspecified fruit to have with my lunch. We could use the ID of any element, such as or, but is so useful!

19. 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)

20. 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;

21. 7xml.htm We then lock onto the node that I happen to have called ‘napier’ : var root_node = xmldoc.getElementsByTagName(‘napier').item(0);

22. 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;

23. 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.

24. 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.