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 lesson focuses on:

Creating an AJAX object
AJAX properties

Creating an AJAX object

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

Opera 8.0+, Firefox, Safari, Netscape 7

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

Example:

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

Internet Explorer

To create an AJAX object in this browser, the ActiveXObject is used.

Example:

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

//and if the above does not work we will use.....

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.