Javascript Tutorials
Introduction to AJAX
Javascript Form Validation
Javascript Fundamentals

Introduction to AJAX

Introduction

AJAX stands for Asynchronous Javascript And XML. AJAX is useful for processing user interaction on websites without the traditional page reload of form submission. While AJAX is a powerful enhancement to HTML it does require a little work for cross browser support.

This tutorial will cover the creation of a simple forms to handle mailing list management. The basic parts are the HTML forms and a javascript submission to submit the form. For examples on the server side processing see this Java servlet tutorial.

Setup the HTML

 <html>
 <head>
     <title>Join mailing list</title>
     <link type="text/javascript" href="ajax.js"/>
 </head>
 <body>
 <div id="form">
     <form name="ajaxTest">
         Name: <input type="text" name="name"/><br/>
         EMail Address: <input type="text" name="email"/><br/>
         <input type="button" name="submit" value="Subscribe" onclick="ajaxSubscribeFormSubmit()"/><br/>
     </form>
 </div>
 <div id="divSubscribeResponse">
     Click the subscribe button to join the list
 </div>
 </body>
 </html>

First setup a link to the external javascript file used to store the AJAX functions in the HTML header of the page. Alternatively the javascript can be included inline inside script tags.

Next create the form, but there isn't a need to put a method or action. Then setup 2 input boxes for name and email address of the subscriber. Notice the submit button is an input type of button not submit. This is to prevent an HTML form submission. Instead this button uses the onclick action to fire the AJAX request.

The bottom div contains the form instructions, and it will be updated by the javascript to display the form submission results. The div needs an ID attribute attached so we can access it later with the javascript.

Setup Javascript XML Object

 function ajaxSubscribeFormSubmit() {
     var xmlHttp;
     if (window.XMLHttpRequest) {
         xmlHttp = new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     } else {
         document.write("browser not supported");
     }
     xmlHttp.onreadystatechange=function() {
         if (xmlHttp.readyState == 4) {
             var html = document.getElementById("divResponse");
             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);
 }

The javascript is contained in ajaxFormSubmit() function. Create the xmlHttp variable to hold the HTTP request functionality. Different browsers store the XML HTTP request functions under different interfaces. Mozilla based products such as Firefox and Seamonkey along with Opera and Safari use window.XMLHttpRequest. While Internet Explorer has the XML HTTP request in an ActiveX object. If no available interfaces are found the information div is updated to inform the user of an unsupported browser.

Now setup the ready state change function. This is where the code to update the code is stored. The XML HTTP object contains 5 ready states uninitialized, setup, sent, in process, complete. They are given the IDs 0-4 respectively. In this example we're only concerned about number four, when the request is complete.

Finally create and send the request to the server. Grab the values of the form input fields and build the query string to append to the request. Once everything is setup send open the socket and send the request to the server. As the request state changes the onreadystatechange function gets called and once the request reaches the completed state the information div is updated with the server response.

 1 2  >> Processing XML With Javascript and DOM
New Content