delta one handle kitchen faucets

Home Ajax XMl http request
« Home »
Jul 8th, 2012 Comments: 2

Ajax XMl http request

Plurk
Share this

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>

Comments

( 2 )
  1. Veterinario Cosenza Apr 25th, 2012 2:15

    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

  2. Petra Jul 3rd, 2014 10:52

    This post is very informative but it took me a long time to find it in google.
    I found it on 11 spot, you should focus on quality backlinks building, it will help you to rank to google top
    10. And i know how to help you, just search in google – k2 seo tips and tricks

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>