Ajax

[welcomewiki]

The XMLHttpRequest object makes AJAX possible.
The XMLHttpRequest

The XMLHttpRequest object is the key to AJAX.



It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
Creating An XMLHttpRequest Object

Different browsers use different methods to create an XMLHttpRequest object.
Internet Explorer uses an ActiveXObject.


Other browsers use a built in JavaScript object called XMLHttpRequest.
Here is the simplest code you can use to overcome this problem:

[welcomewiki]

var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Example above explained:

1. Create a variable named XMLHttp to use as your XMLHttpRequest object. Set the value to null.
2. Test if the object window.XMLHttpRequest is available. This object is available in newer versions of Firefox, Mozilla, Opera, and Safari.
3. If it's available, use it to create a new XMLHttpRequest object: XMLHttp=new XMLHttpRequest()
4. If it's not available, test if the object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.
5. If it is available, use it to create a new object: XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

[welcomewiki]

A Better Example?

Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.



The example below tries to load Microsoft's latest version "Msxml2.XMLHTTP", available in Internet Explorer 6, before it falls back to "Microsoft.XMLHTTP", available in Internet Explorer 5.5 and later.







function GetXmlHttpObject()
{
var xmlHttp=null; try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}






Example above explained:

1. First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
2. Try to create the object according to web standards (Mozilla, Opera and Safari):XMLHttp=new XMLHttpRequest()
3. Try to create the object the Microsoft way, available in Internet Explorer 6 and later:XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
4. If this catches an error, try the older (Internet Explorer 5.5) way: XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

[welcomewiki]

AJAX Suggest

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a web form.
Type a Name in the Box Below

First Name: Suggestions:
This example consists of three pages:

• a simple HTML form
• a JavaScript
• a PHP page

[welcomewiki]

The HTML Form

This is the HTML page. It contains a simple HTML form and a link to a javascript:

First Name:
onkeyup="showHint(this.value)">

Suggestions:

Example Explained - The HTML Form

As you can see, the HTML page above contains a simple HTML form with an input field called "txt1".
The form works like this:

1. An event is triggered when the user presses, and releases a key in the input field
2. When the event is triggered, a function called showHint() is executed.
3. Below the form is a called "txtHint". This is used as a placeholder for the return data of the showHint() function.