Click here to Skip to main content
13,141,576 members (53,373 online)
Click here to Skip to main content
Add your own
alternative version

Stats

28.9K views
34 bookmarked
Posted 27 Aug 2007

Learning Ajax with xmlhttp Object

, 27 Aug 2007
Rate this:
Please Sign up or sign in to vote.
It’s a reference for beginners who would like to learn Ajax

What is AJAX?

AJAX, an acronym for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability.

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.

Object Methods

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

MethodDescription
abort()Abort the current request
getAllResponseHeaders()Get the complete set of headers (labels and values) as a string
getResponseHeader("headerLabel")Get the string value of a single header label
send(content)Transfers the request, optionally with postable string or DOM object data
setRequestHeader("label", "value")

Sets a label/value pair to the header to be sent with a request


Example for Creating the XMLHTTP Object

<script language="javascript">
  //Global XMLHTTP Request object
var XmlHttp;
//Creating and setting the instance of appropriate XMLHTTP Request object to 
//a "XmlHttp" variable  
function CreateXmlHttp()
{
 //Creating object of XMLHTTP in Internet Explorer
 try
 {
  XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e)
 {
  try
  {
   XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  catch(oc)
  {
   XmlHttp = null;
  }
 }
 //Creating object of XMLHTTP in Mozilla and Safari 
 if(!XmlHttp && typeof XMLHttpRequest != "undefined") 
 {
  XmlHttp = new XMLHttpRequest();
 }
}
</script>

The open method is to specify the attributes like URL, send method, etc.

MethodDescription

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);
 CreateXmlHttp();
 
 // If browser supports XMLHTTPRequest object
 if(XmlHttp)
 {
  //Setting the event handler for the response
  XmlHttp.onreadystatechange = HandleResponse;
  
  //Initializes the request object with GET (METHOD of posting), 
  //Request URL and sets the request as asynchronous.
  XmlHttp.open("GET", requestUrl,  true);
  
  //Sends the request to server
  XmlHttp.send(null);  
 }

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/plain or text/html is accepted by the instance of the request object, however it will only be available for use via the responseText property.

Object Properties

PropertyDescription
onreadystatechangeEvent handler for an event that fires at every state change
readyStateObject status integer:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseTextString version of data returned from server process
responseXMLDOM-compatible document object of data returned from server process
statusTextString message accompanying the status code

Another property is status.

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 xmlhttp object.

History

  • 28th August, 2007: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

sathesh pandian
Technical Lead
India India
have been working in web technologies for the last 8 years.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170915.1 | Last Updated 28 Aug 2007
Article Copyright 2007 by sathesh pandian
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid