The roundtrip that is involved with this process can make the server appear sluggish. It can also be tedious for the server to have to try to remember all the form data that was entered by the user. In fact you have probably noticed that many web sites simply forget the data that you entered and make you re-enter it, something I find incredibly annoying.
With Ajax Javascript is able to send a request to the server without submitting the entire form. The user is able to continue working with the form while the server processes the result. When the server is done it sends the result back to Javascript and Javascript can appropriately update the form, without having to re-load the entire page. Because the requests are asynchronous, Javascript can have multiple requests outstanding at any given time.
// this code courtesy of Adam Thompson var ajaxreq = null; if( window.XMLHttpRequest ) { ajaxreq = new XMLHttpRequest(); } else if( window.ActiveXObject ) { ajaxreq = new ActiveXObject( "Msxml2.XMLHTTP" ); if( ajaxreq == null ) { ajaxreq = new ActiveXObject( "Microsoft.XMLHTTP" ); } } if (ajaxreq == null) alert("Your browser does not support AJAX!");
ajaxreq.open("GET", "search.php?query=John");A client or server-side file can be alternatively specified The XML file will be read and transformed to a DOM object:
ajaxreq.open("GET", "quotes.xml"); // client-side request // server-side request ajaxreq.open("GET", "http://web.eecs.utk.edu/~bvz/quotes.xml");
ajaxreq.open("GET", "search.php?query=John"); ajaxreq.send(null); ajaxreq.open("GET", "foo.xml"); // opening xml file so no params needed ajaxreq.send(null); ajaxreq.open("POST", "search.php"); // using POST so must pass param string ajaxreq.send("query=John");
value | meaning |
---|---|
0 | new request |
1 | open has finished--the request has been initialized |
2 | send has finished--the request has been sent |
3 | the server is working on the request |
4 | the request is complete |
function responseHandler() { if (ajaxreq.readyState != 4) return; if (ajaxreq.status == 200) ajaxreq.callback(); else alert("Ajax error code " + ajaxreq.status + ": " + ajaxreq.statusText); } ... ajaxreq.onreadystatechange = responseHandler; ajaxreq.callback = yourCallbackFct;
The process of launching an Ajax request and then processing the response can be tedious, so I have prepared an Ajax library that you can use. The library contains two functions:
Frequently an ajax response will need to change the content of html elements. Javascript provides a way to do this by representing each html page as a tree encapsulated in an HTML DOM object. The only real difference is that the HTML DOM provides a few additional convenience methods not offered by the XML DOM that are made possible by domain-specific knowledge about HTML. For example, HTML supports ID and NAME tags, and so the HTML DOM provides convenience methods named getElementByID and getElementsByName.
Thus to modify an html element, one should first retrieve the appropriate element using an HTML DOM query command. To retrieve the element, you should use getElementById if the html element is identified with an id attribute and getElementsByName if the html element is identified with a name attribute. You can then modify the element's value by modifying its innerHTML property. Although the innerHTML property is a non-standard addition added by Internet Explorer in the late 90s, it is now supported by all browsers. Thus one might write:
document.getElementById('ibm').innerHTML = 98.46; // element uses id document.getElementByName('ibm').innerHTML = 98.46; // element uses nameA more standard DOM-oriented way to perform the element change would be to traverse the DOM tree. The html content is in the first node of a text element and can be accessed via the nodeValue property:
document.getElementById(ibm').firstChild.nodeValue = 98.46Note that if the document were an XML document rather than an html document, you would have to use the second approach, because the innerHTML property would not be defined for nodes in an XML document. Also note that unlike the XML DOM, you can directly modify the nodeValue rather than having to replace the element.
These notes will deal with retrieving information stored in an XML document. You can even more easily retrieve information from an SQL database and then output it in XML format using the techniques described in this section. There are several issues you need to be aware of in order to make your server-side script work in the way you anticipate:
$xmlDoc->formatOutput = true; $handle = fopen("quotes.xml", "w"); fputs($handle, $xmlDoc->saveXML()); fclose($handle);
header('Content-Type: text/xml; charset=utf-8');The important information in this header is the "text/xml" content-type, which tells the browser to treat this document as an XML document.
If you fail to have your PHP script write out this header information, then the ajax request object on the client-side will have its responseText field set, but its responseXML field will be set to null.
echo $xmlDoc->saveXML();instead of this code:
// missing echo command means that the text string returned by saveXML // will not be inserted into the XML document returned to the client $xmlDoc->saveXML();
In class we will do a more complicated example that involves being able to vote for your favorite color and see the counts for each color be updated in real-time. To do this we will actually have to write both client-side and server-side scripts.