Ajax XMl http request

XMLHttpRequest

Once the XMLHttpRequest object has been created, it can be used to communicate directly with the server.  The first thing that should be done is to create a function that will be able to “catch” the information returned by the server.  This object contains a property called onreadystatechange, which stores the function that will process the server response. The following example code defines an empty function that will receive server data in addition to setting the onreadystatechange property.

 

Example: ajaxRequest.onreadystatechange = somefunction(){

// We still need to write some code here

}

 

The XMLHttpRequest object has a property called readyState. That stores the status of the server’s response. The response states are: processing, downloading or completed. The onreadystatechange property stores a function that will be executed each time the readyState changes.

For the example below, we are only interested in the “complete” readyState so that information can be obtained. Note that when the property is equal to a value of 4 the response is complete and data can be retrieved from the server.

Example: ajaxRequest.onreadystatechange = somefunction(){

if(ajaxRequest.readyState == 4){

}

}

 

When the response is complete, it is then possible to access the responseText property, which stores the response from the server.  JavaScript and HTML forms will allow you to set a text box to equal responseText.  Using the “someForm” form and a text box called “date”, the following example shows how to set the “date” text box to the server’s date.

Example: ajaxRequest.onreadystatechange = somefunction(){

if(ajaxRequest.readyState == 4){

document.someForm.date.value = ajaxRequest.responseText;

}

}

Once the onreadystatechange property has the necessary response-handling function, the request can be sent.  Achieving this requires the following two steps:

  1. Provide the URL for the server-side script used in the  Ajax application.
  2. Send the request with the send function

 

For the first step, we will use the example of a simple PHP script, called “serverDate.php”, that can be found in latter example.  For now, only the name is required.  The URL is set using the open method, which requires three arguments. The following example demonstrates the syntax for this method.

Example: ajaxRequest.onreadystatechange = somefunction(){

if(ajaxRequest.readyState == 4){

document.someForm.date.value = ajaxRequest.responseText;

}

}

 

ajaxRequest.open(“GET”, “serverDate.php”, true);

 

NOTE:  This example assumes that the PHP and HTML files are in the same directory.

 

The following example shows how to use the JavaScript to send a request to the server.

Example: ajaxRequest.onreadystatechange = somefunction(){

if(ajaxRequest.readyState == 4){

document.someForm.date.value = ajaxRequest.responseText;

}

}

ajaxRequest.open(“GET”, “serverDate.php”, true);

ajaxRequest.send(null);

 

Before the JavaScript is plugged into the HTML file, a way to run the AJAX function must be established. It would be optimal if the AJAX ran while the user is performing some action on the web page.  To accomplish this, the function will be set to run after the user enters their name and the onChange attribute will be used to make it so that the function is called whenever the user changes the user textbox.  An example of this is shown in the example below.

Example: <input type=’text’ onChange=”ajaxFunction();” name=’user’ /> <br />

 

The following example shows the JavaScript incorporated into the HTML file.

Example: <html>

<body>

 

<script language=”javascript” type=”text/javascript”>

<!–

//Support Code for Browser

function ajaxFunction(){

var ajaxRequest;  // This is necessary for AJAX

 

try{

// For Firefox, Opera, Safari

ajaxRequest = new XMLHttpRequest();

} catch (e){

// For Internet Explorer

try{

ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try{

ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (e){

// Something is incorrect

alert(“Current browser does not work.”);

return false;

}

}

}

}

// Function to receive data from server

ajaxRequest.onreadystatechange = somefunction(){

if(ajaxRequest.readyState == 4){

document.someForm.date.value = ajaxRequest.responseText;

}

}

ajaxRequest.open(“GET”, “serverDate.php”, true);

ajaxRequest.send(null);

}

 

//–>

</script>

 

<form name=’someForm’>

Name: <input type=’text’ onChange=”ajaxFunction();” name=’user’ /> <br />

Date: <input type=’text’ name=’date’ />

</form>

</body>

</html>

This entry was posted in Ajax Tutorials and tagged , , , , , , , , , , , , . Bookmark the permalink.

One Response to Ajax XMl http request

  1. I relish, lead to I discovered just what I was taking a look for. You have ended my four day long hunt! God Bless you man. Have a great day. Bye

Leave a Reply

Your email address will not be published.