AJAX Example

[Total: 1    Average: 4/5]

Small Example

If we take a look at a small form with two items or components like this one:

Take interest that we did not put a SUBMIT on this form.

Also note that we added an onkeypress event to run a function. So each time a key is pressed inside the focus of the first form-text box we will run our function.

Now we will add in that function. It will first attempt to determine which browser a person has, so we know which version of the AJAX HTTP header object to use:

Now we need to detect when the HTTP header object used in AJAX changes. There are 5 states:

  • 0 – Not Initiaized Yet
  • 1 – Object Configured
  • 2 – Request Sent
  • 3 – Request in Progress
  • 4 – Request Complete

Now we can respond to new data from the server:

Next we need to send a request so we can process the response:

Now the only thing left is to write some server code (in test_ajax.php).
Since it only needs the data for field two, we will return a random number.

NOTE: This is PHP code which goes in a separate file from the HTML/JAVASCRIPT/AJAX file we were previously describing.

Times Viewed: 114

Leave a Reply

Your email address will not be published. Required fields are marked *