AJAX
  1. AJAX intro
  2. AJAX basics
  3. AJAX browsers
  4. AJAX forms
  5. AJAX sending data
  6. AJAX summary

AJAX basics

AJAX communicates with a web server in a specific way through the use of an object and the web server knows when and how to send and receive data using special properties of the object.

This tutorial focuses on:

Creating an AJAX object

An AJAX object is created one way for Internet Explorer 5 & 6 and a different way for other browsers. This is just a quick overview of how to create AJAX objects. The next tutorial goes into much more detail with some examples.

Firefox, Safari, Chrome, Opera, Internet Explorer 7+

To create an AJAX object in these browsers, the XMLHttpRequest object is used.

Example:
<script type="text/javascript"> ajaxObject = XMLHttpRequest(); </script>

Internet Explorer 5 & 6

To create an AJAX object in these browsers, the ActiveXObject is used.

Example:
<script type="text/javascript"> ajaxObject = new ActiveXObject("Microsoft.XMLHTTP"); </script>

AJAX properties

AJAX properties are special characteristics about an object that dictate how and when a web browser and a web server communicate.

onreadystatechange property

The onreadystatechange property is used to receive information returned by the web server. This property stores the function that will process the response from the web server.

Example:
<script type="text/javascript"> ajaxObject = XMLHttpRequest(); ajaxObject.onreadystatechange = function(){ //code for the function that will //process the response from the web server } </script>

readyState property

The readyState property is used to store the status of the web server's response. When the readyState changes, the function created by onreadystatechange executes.

Example:
<script type="text/javascript"> ajaxObject = XMLHttpRequest(); ajaxObject.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ // get data from //web server's response } } </script>

responseText property

The responseText property is used to store the actual information received by the web server.

Example:
<script type="text/javascript"> ajaxObject = XMLHttpRequest(); ajaxObject.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ // get data from //web server's response document.form1.text.value = ajaxRequest.responseText; } } </script>

In the above example, a textbox named 'text' in a form named 'form1' is updated with the value from the responseText property.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information