Ajax - 1h

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 suckfunction 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 xmlHttpfunction 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 • <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”

17. 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”

18. 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!

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.