Ajax Tutorial: AJAX Technologies

AJAX Technologies

Example:

<html>

<body>

 

<script language="Javascript" type="text/javascript">

<!--

 

function createRequestObject() {

    var tmpXmlHttpObject;

   

    //depending on what the browser supports, use the right way to create the XMLHttpRequest object

    if (window.XMLHttpRequest) {

        // Mozilla, Safari would use this method ...

        tmpXmlHttpObject = new XMLHttpRequest();

       

    } else if (window.ActiveXObject) {

        // IE would use this method ...

        tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");

    }

   

    return tmpXmlHttpObject;

}

 

//call the above function to create the XMLHttpRequest object

var http = createRequestObject();

 

function makeGetRequest(wordId) {

    //make a connection to the server ... specifying that you intend to make a GET request

    //to the server. Specifiy the page name and the URL parameters to send

    http.open('get', 'definition.jsp?id=' + wordId);

       

    //assign a handler for the response

    http.onreadystatechange = processResponse;

       

    //actually send the request to the server

    http.send(null);

}

 

function processResponse() {

    //check if the response has been received from the server

    if(http.readyState == 4){

       

        //read and assign the response from the server

        var response = http.responseText;

              

        //do additional parsing of the response, if needed

              

        //in this case simply assign the response to the contents of the <div> on the page.

        document.getElementById('description').innerHTML = response;

              

        //If the server returned an error message like a 404 error, that message would be shown within the div tag!!.

        //So it may be worth doing some basic error before setting the contents of the <div>

    }

}

 

-->

</script>

 

<h1>Have you heard these terms before?</h1>

<p>

Ceraunophobia <a href="javascript:makeGetRequest(1)">More about Ceraunophobia</a><br>

Astraphobia <a href="javascript:makeGetRequest(2)">More about Astraphobia</a><br>

Ophidiophobia <a href="javascript:makeGetRequest(3)">More about Ophidiophobia</a><br>

</p>

 

<div id="description"></div>

 

</body>

</html>

 

There are 3 Javascript functions listed and one extra line outside the function blocks.

The var http = createRequestObject() uses the createRequestObject() function to create the XMLHttpRequest object (depending on whether the user is using Internet Explorer or some other browser). This object is used to make all the AJAX requests to other pages on the server.

The second function makeGetRequest() is used to make the actual request to the server. The first line invokes the open() method on the XMLHttpRequest object. This method lets you specify the page to call on the server and also lets you specify that you want to use GET for the request. You can append parameters to the URL (the normal GET style) if you want to pass in some values to the page you are going to call. The other thing worth noting is that 'processResponse' is the name of the function that must be called when the response is received from the server. You can name this anything you want, but use the same name for the third function as well.

The third function processResponse() basically checks whether the response from the server has been received (the response is basically the text of the page returned) and assigns that text to a local variable called 'response'. After that the text within the <div> tag on the page (this text can be accessed using the property called innerHTML) is replaced with the text that was received as a response.

Next Topic