AJAX Example Using XMLHttpRequest and a Callback

Aim
To introduce AJAX in a quick and painless way. We will use a static xml page to simulate a result from the server. Or you can use SAX Servlet example which is tailor made for this ajax example (AJAX = Asynchronous Javascript And XML).

Assumptions
You alread have a webserver installed. If you want to use the SAX Servlet as the backend for this tutorial then you need to have it compiled and deployed.

A big part of WEB 2 is of course AJAX which is asynchronous javascript and xml. We will breakdown an AJAX request down. A complete list of the code is available at the end of this page.

When you load the page the first thing that happens is the creation of an XMLHttpRequest object to handle the xml functions.
1.  <html>
2.  <head>
3.  <script langua="javascript">
4.  function new_XHR() {
5.      var xhr;
6.      try{
7.          xhr = new ActiveXObject("Msxml2.XMLHTTP");
8.      }catch(e){
9.      try{
10.          xhr = new ActiveXObject("Microsoft.XMLHTTP");
11.          }catch(E){
12.              xhr = false;
13.          }
14.      }
15.      if(!xhr && typeof XMLHttpRequest != 'undefined'){
16.          xhr = new XMLHttpRequest();
17.      }
18.      return xhr;
19.  }
...
What we are trying to do here, is instantiate an XMLHttpRequest object. As you can see I have not bothered to handle the error if the browser cannot instantiate an object.


Now lets have a look at the actual HTML
...
49.  <body>
50.  <form>
51.  Name <input id="NameBox" type="text"/>
52.  <a href="javascript:DoCallback()">Send the data without submitting the form</a>
53.  </form>
54.  <div id="MessagePane"/>
55.  </body>
56.  </html>
57.
This shows a textbox and a URL. When you click on the URL it calls the javascript DoCallback function.

The XMLHTTP request
...
20.  
21.  var myxhr;
22.  function DoCallback(){
23.        myxhr = new_XHR();
24.        myxhr.onreadystatechange=MyCallback;
25.        myxhr.open('GET',"saxxmldemo_static.xml?"
26.          +"name="+document.getElementById("NameBox").value);
27.        myxhr.send(null);
28.      }
29.
...
This sets the callback function onreadystatechange=MyCallback. As you can see this is adding the value in the textbox to the URL. This really doesn't matter if you are using the saxxmldemo_static.xml as this is a static xml file. If you want to use the SAX Servlet example replace line 25 with
myxhr.open('GET', 'http://127.0.0.1:8080/SAXJHelloWorldServlet/saxxmldemo.xml?
This will point to the SAX Servlet which will echo the 'name'. Make sure you have the SAX Servlet example deployed and ready to go.

The Callback
...
29.         
30.  function MyCallback(){
31.      var name;
32.      var message;
33.      if(myxhr.readyState==4 && myxhr.status==200){
34.          var subrootNode = myxhr.responseXML.getElementsByTagName('user-data');
35.          for(i = 0 ; i < subrootNode[0].childNodes.length ; i++){
36.              var node = subrootNode[0].childNodes[i];
37.              if(node.tagName=="name")
38.                  name=node.firstChild.nodeValue;
39.              else if(node.tagName=="message")
40.                  message=node.firstChild.nodeValue;
41.              else{}
42.          }
43.          document.getElementById("MessagePane").innerHTML = "Hey "+name+" the server says \""+message+"\""; 
44.      }
45.  }
...
This is the function that gets called when the XMLHttpRequest object changes state i.e receives a response. As you can see on line 33, we are only interested in readyState=4 (document has loaded) and status 200 which means successful. You should have more error handling code here. You can use childNodes to drill down and extract the information or you can use getElementsByTagName(). The message is written to the html div  with the id 'MessagePane' using innerHTML.

childNodes[n]
_|_childNodes[0] (.firstChild)
_|_childNodes[1]
_|__|_childNodes[0] (.firstChild)
_|__|_childNodes[1]
_|_childNodes[2]


The xmldemo_static.xml
 1. <?xml version="1.0" encoding="UTF-8"?>
 2. <user-data>
 3.     <name type="Alias">Doctor Octopus</name>
 4.     <message type="greeting">Hello there from the SAX servlet</message>
 5. </user-data>
Hide line numbers


Entire listing of index.html
 1. <html>
 2. <head>
 3. <script langua="javascript">
 4. function new_XHR() {
 5.     var xhr;
 6.     try{
 7.         xhr = new ActiveXObject("Msxml2.XMLHTTP");
 8.     }catch(e){
 9.     try{
10.         xhr = new ActiveXObject("Microsoft.XMLHTTP");
11.         }catch(E){
12.             xhr = false;
13.         }
14.     }
15.     if(!xhr && typeof XMLHttpRequest != 'undefined'){
16.         xhr = new XMLHttpRequest();
17.     }
18.     return xhr;
19. }
20. 
21. var myxhr;
22. function DoCallback(){
23.       myxhr = new_XHR();
24.       myxhr.onreadystatechange=MyCallback;
25.       myxhr.open('GET',"http://127.0.0.1:8080/SAXJHelloWorldServlet/saxxmldemo.xml?"
26.         +"name="+document.getElementById("NameBox").value);
27.       myxhr.send(null);
28.     }
29.        
30. function MyCallback(){
31.     var name;
32.     var message;
33.     if(myxhr.readyState==4 && myxhr.status==200){
34.         var subrootNode = myxhr.responseXML.getElementsByTagName('user-data');
35.         for(i = 0 ; i < subrootNode[0].childNodes.length ; i++){
36.             var node = subrootNode[0].childNodes[i];
37.             if(node.tagName=="name")
38.                 name=node.firstChild.nodeValue;
39.             else if(node.tagName=="message")
40.                 message=node.firstChild.nodeValue;
41.             else{}
42.         }
43.         document.getElementById("MessagePane").innerHTML = 
44.                                     "Hey "+name+" the server says \""+message+"\""; 
45.     }
46. }
47. 
48. </script>
49. </head>
50. <body>
51. <form>
52. Name <input id="NameBox" type="text"/>
53. <a href="javascript:DoCallback()">Send the data without submitting the form</a>
54. </form>
55. <div id="MessagePane"/>
56. </body>
57. </html>
Hide line numbers
Back to the tutorial trail | Home

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)