Javascript Tutorials
Introduction to AJAX
Javascript Form Validation
Javascript Fundamentals

Introduction to AJAX

Parsing XML With Javascript

The request from the unsubscribe form will introduce XML parsing in javascript. First take a second to separate the request object into an individual function.

 function buildXmlHttpObject() {
     var xmlHttp;
     if (window.XMLHttpRequest) {
         xmlHttp = new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } else {
         document.write("browser not supported");
     }
     return(xmlHttp);
 }

This will allow us to simply call this function to setup our XMLHttpRequest or ActiveX object with browser detection.

The unsubscribe form:

<div id="divUnsubscribeForm">
    <form name="unsubscribeForm">
        EMail Address: <input type="text" id="unsubemail" 
          name="unsubemail"/><br/>
        <input type="button" name="submit" value="Unubscribe" 
          onclick="ajaxUnsubscribeFormSubmit()"/><br/>
    </form>
</div>
<div id="divUnsubscribeResponse">
    Click to unsubscribe
</div>

When parsing XML use responseXML instead of responseText to get a DOM XML object.

 function ajaxUnsubscribeFormSubmit() {
     xmlHttp = buildXmlHttpObject();
     xmlHttp.onreadystatechange=function() {
         if (xmlHttp.readyState == 4) {
             var html = document.getElementById("divUnsubscribeResponse");
             var response = xmlHttp.responseXML;
             var root = response.getElementsByTagName("root").item(0);
             var result = root.getElementsByTagName("result")[0];
             html.innerHTML = response.getElementsByTagName("result")[0].childNodes[0].nodeValue;
             
         }
     }
 }

First use the new buildXmlHttpObject() to setup the request object. Create the needed readystatechange function. Then get the div tag containing the location to display the response and store in html. Next store the DOM XML object from the response in the variable response. Get the root node object from the response using getElementsByTagName.

The getElementsByTagName can also be accessed as an array as seen getting the first tag result and stores it in the variable result. Set the html contents of the div to the content of the result tag in the XML response. After the readystatechange function is setup initialize the variables and make the request.

More XML Parsing

Display the member list by parsing a list of results. Using the getElementsByTagName method against an XML object allows for simple looping.

HTML code to call the javascript:

<div id="divListMembership">
    <a href="#" onclick="ajaxListMembers()">Show List Membership</a>
</div>
<div id="divListMembershipResponse">
</div>

Javascript to list members:

 function ajaxListMembers() {
     xmlHttp = buildXmlHttpObject();
     xmlHttp.onreadystatechange=function() {
         if (xmlHttp.readyState == 4) {
             var html = document.getElementById("divListMembershipResponse");
             var response = xmlHttp.responseXML;
             var members = "";
             for(var i=0; i < response.getElementsByTagName("member").length; i++) {
                 members = members + response.getElementsByTagName("member")[i].childNodes[0].nodeValue + "
"; } html.innerHTML = members; } } xmlHttp.open("GET","ListMembers", true); xmlHttp.send(null); }

First initialize the the xmlHttp object and setup the readystatechange function. Next get the html response div as before. Get the DOM xml object of the response, and initialize an empty string to store the response. Next get the member tags by looping through the response with getElementsByTagName appending the tag contents to the response string. Then put the response in the html div. Finally the code to make the request.

Using CData

CData storage structures allow for storing large unstructured data along with nested XML. The same procedure as retrieving the contents of a tag is used to retrieve CData.

The HTML to handle message composition:

 <div id="divComposeMessage">
     Compose Message:<br>
     <form id="composeMessage">
         Subject: <input type="text" id="composeSubject" name="composeSubject"/><br/>
         <textarea id="composeBox" name="composeBox" cols="80" rows="25">
         </textarea><br>
         <input type="button" name="submit" value="Send" onclick="ajaxComposeFormSubmit()"/><br/>
     </form>
 </div>
 <div id="divComposeMessageResponse">
 </div>

The Javascript to submit the compose form:

 function ajaxComposeFormSubmit() {
     xmlHttp = buildXmlHttpObject();
     xmlHttp.onreadystatechange=function() {
         if (xmlHttp.readyState == 4) {
             var html = document.getElementById("divComposeMessageResponse");
             var response = xmlHttp.responseXML;
             var text = "Subject: " + response.getElementsByTagName("subject")[0].childNodes[0].nodeValue + "
"; text = text + "Recepients:
"; for(var i=0; i < response.getElementsByTagName("member").length; i++) { text = text + response.getElementsByTagName("member")[i].childNodes[0].nodeValue + "
"; } text = text + "Message:
"; text = text + response.getElementsByTagName("message")[0].childNodes[0].nodeValue html.innerHTML = text; } } var queryString = "?composeSubject=" + document.getElementById("composeSubject").value + "&composeBox=" + document.getElementById('composeBox').value; xmlHttp.open("POST","ComposeMessage" + queryString, true); xmlHttp.send(null); }

This works the same as the previous examples. This example simply pulls the response tags and creates a response showing what the server received. To change things up this request is being made as a POST request instead of a GET request. This is preferable when transfering larger values.

Complete ajax.js file:

function buildXmlHttpObject() {
    var xmlHttp;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        document.write("browser not supported");
    }
    return(xmlHttp);
}

function ajaxSubscribeFormSubmit() {
    xmlHttp = buildXmlHttpObject();
    xmlHttp.onreadystatechange=function() {
        if (xmlHttp.readyState == 4) {
            var html = document.getElementById("divSubscribeResponse");
            html.innerHTML = xmlHttp.responseText;
        }
    }
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    var queryString = "?name=" + name + "&email=" + email;
    xmlHttp.open("GET","Subscribe" + queryString,true);
    xmlHttp.send(null);
}

function ajaxUnsubscribeFormSubmit() {
    xmlHttp = buildXmlHttpObject();
    xmlHttp.onreadystatechange=function() {
        if (xmlHttp.readyState == 4) {
            var html = document.getElementById("divUnsubscribeResponse");
            var response = xmlHttp.responseXML;
            var root = response.getElementsByTagName("root").item(0);
            var result = root.getElementsByTagName("result")[0];
            html.innerHTML = result.childNodes[0].nodeValue;
        }
    }

    var email = document.getElementById('unsubemail').value;
    var queryString = "?unsubemail=" + email;
    xmlHttp.open("GET","Unsubscribe" + queryString,true);
    xmlHttp.send(null);
    
}

function ajaxListMembers() {
    xmlHttp = buildXmlHttpObject();
    xmlHttp.onreadystatechange=function() {
        if (xmlHttp.readyState == 4) {
            var html = document.getElementById("divListMembershipResponse");
            var response = xmlHttp.responseXML;
            var members = "";
            for(var i=0; i < response.getElementsByTagName("member").length; i++) {
                members = members + response.getElementsByTagName("member")[i].childNodes[0].nodeValue + "
"; } html.innerHTML = members; } } xmlHttp.open("GET","ListMembers", true); xmlHttp.send(null); } function ajaxComposeFormSubmit() { xmlHttp = buildXmlHttpObject(); xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState == 4) { var html = document.getElementById("divComposeMessageResponse"); var response = xmlHttp.responseXML; var text = "Subject: " + response.getElementsByTagName("subject")[0].childNodes[0].nodeValue + "
"; text = text + "Recepients:
"; for(var i=0; i < response.getElementsByTagName("member").length; i++) { text = text + response.getElementsByTagName("member")[i].childNodes[0].nodeValue + "
"; } text = text + "Message:
"; text = text + response.getElementsByTagName("message")[0].childNodes[0].nodeValue html.innerHTML = text; } } var queryString = "?composeSubject=" + document.getElementById("composeSubject").value + "&composeBox=" + document.getElementById('composeBox').value; xmlHttp.open("POST","ComposeMessage" + queryString, true); xmlHttp.send(null); }
Introduction and Interacting With the Webserver <<  1 2
New Content