What is AJAX?
Creating the Object
Creating an instance of the
XMLHttpRequest object is important for Ajax. It differs for browsers.
For Safari and Mozilla:
var XmlHttp = new XMLHttpRequest();
For Internet Explorer:
var XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
The object reference returned by both constructors is to an
abstract object that works entirely out of view of the user. Its methods control all operations, while its properties hold, among other things, various data pieces returned from the server.
Instances of the
XMLHttpRequest object in all supported environments share a concise, but powerful, list of methods and properties. The following table shows the supported methods and their jobs.
Common XMLHttpRequest Object Methods
|Abort the current request|
|Get the complete set of headers (labels and values) as a |
|Get the |
string value of a single header label
|Transfers the request, optionally with postable |
string or DOM object data
Sets a label/value pair to the header to be sent with a request
Example for Creating the XMLHTTP Object
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
XmlHttp = null;
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
XmlHttp = new XMLHttpRequest();
The open method is to specify the attributes like URL, send method, etc.
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName)
open( method, URL, async, userName, password)
|Assigns destination URL, method, and other optional attributes of a pending request|
Two main required parameters are the HTTP method you intend for the request and the URL for the connection. For the method parameter, use "
GET" on operations that are primarily data retrieval requests; use "
POST" on operations that send data to the server, especially if the length of the outgoing data is potentially greater than 512 bytes. The URL may be either a complete or relative URL.
An important optional third parameter is a Boolean value that controls whether the upcoming transaction should be handled asynchronously. The default behavior (
true) is to act asynchronously, which means that script processing carries on immediately after the
send() method is invoked, without waiting for a response.
If you set this value to
false, however, the script waits for the request to be sent and for a response to arrive from the server. While it might seem like a good idea to wait for a response before continuing processing, you run the risk of having your script hang if a network or server problem prevents completion of the transaction. It is safer to send asynchronously and design your code around the
onreadystatechange event for the request object.
The following generic function includes branched object creation, event handler assignment, and submission of a
GET request. A single function argument is a
string containing the desired URL. The function assumes that a global variable,
req, receives the value returned from the object constructors. Using a global variable here allows the response values to be accessed freely inside other functions elsewhere on the page. Also assumed in this example is the existence of a
processReqChange() function that will handle changes to the state of the request object.
var requestUrl = "WebForm2.aspx" + "?SelectedCountry=" + (selectedCountry);
XmlHttp.onreadystatechange = HandleResponse;
XmlHttp.open("GET", requestUrl, true);
It is essential that the data returned from the server be sent with a
Content-Type set to
text/xml. Content that is sent as
text/html is accepted by the instance of the request object, however it will only be available for use via the
|Event handler for an event that fires at every state change|
|Object status integer:|
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
String version of data returned from server process
|DOM-compatible document object of data returned from server process|
String message accompanying the status code
Another property is
This will intimate the status of the request.
Refer to the article "Dropdown Box Using AJAX" for a complete list of statuses.
I hope this article will help learners of Ajax to understand the
- 28th August, 2007: Initial post