The responseText Property - AJAX

This is the second part of my four-part series, Active Client Pages – Ajax Approach. In this part of the series, we continue our discussion of the Ajax features we will need to use with ACP, and then we look at the principles of the Ajax approach.

TABLE OF CONTENTS:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 4

October 14, 2008

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

The data sent back from the server can be retrieved with the responseText property of the XMLHttpRequest object. This is a sample code.

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

Some HTML Value or JavaScript Property = xmlHttp.responseText;

//You may call another function to do initialization.

}

Sending a Request to the Server

To send off a request to the server, we use the open() method and the send() method.

The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and the server executable file (e.g. sendText.pl that is called by the request) are in the same directory, the code would be:

xmlHttp.open("GET","sendText.pl",true);

xmlHttp.send(null);

The send method sends the request to the server with a "data" parameter specifying the body of the request. For "GET" requests, this parameter should be a value of null, while for "POST" requests, it should be the parameters of the request. This method typically should always be called last.

Now we must decide when the AJAX function should be executed. This is executed normally when an event is triggered. The following is a sample code that illustrates everything I have said about Ajax.

There is an HTML button. When you click it some text will be sent from the server. The value of the onclick attribute is “ajaxFunction();”. When this function is called, it declares the XMLHttpRequest Object (variable). It performs the trials to assign the object variable. Next it stores the function that will process the response to onreadystatechange property of the object.

This function is not executed at this point. It is executed only when the status of the readyState property changes. So it can only be executed after the open() and send() methods of the object have been called. Next, in the ajaxFunction() function, the open() and send() methods are called.

<html>

<head>

function ajaxFunction()

{

var xmlHttp;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{