• 0: uninitialized
• 1: loading
• 2: loaded
• 3: interactive
• 4: complete

During each stage of the request, "onreadystatechange" fires to allow you to react to it.

1. Your XML document is well formed. responseXML will always return null if not.
2. In Firefox, call request.overrideMimeType('text/xml') at the start of your Ajax request (upon instantiation) to explicitly tell the browser that the returned data will have a content type of "text/xml".
3. IE doesn't support the client side overrideMimeType() method, so you must ensure that your server returns the proper "text/xml" content header type for the XML file that is being returned. If your XML file is named with an extension of ".xml", most servers by default send out the proper "text/xml" headers, though if it is not, you'll want to modify your server settings to do so. See "XML documents and the Content-type pitfall in IE" for more info.

If any one of the above conditions are not met, the data returned will be as plain text, not an XML object as expected. Here's a simple example of returning the first ELEMENT's node value within the XML file "test.xml" using Ajax:

var mygetrequest=new ajaxRequest()
if (mygetrequest.overrideMimeType)
 mygetrequest.overrideMimeType('text/xml')
mygetrequest.onreadystatechange=function(){
 if (mygetrequest.readyState==4){
  if (mygetrequest.status==200){
   var xmldata=mygetrequest.responseXML //retrieve result as an XML object
   var animals=xmldata.getElementsByTagName("theanimal")
   alert(animals[0].firstChild.nodeValue) //alerts "The dog is a domesticated subspecies..."
  }
  else{
   alert("An error has occured making the request")
  }
 }
}

mygetrequest.open("GET", "test.xml", true)
mygetrequest.send(null)

var myrequest=new ajaxRequest()
myrequest.onreadystatechange=function(){
 if (myrequest.readyState==4){ //if request has completed
  if (myrequest.status==200){ //if request was successful (versus "page not found" etc)
   //do something with returned data
  }
 }
}

If you're running an Ajax request offline locally on your PC, a value of 0 is returned by status in most browsers regardless of the actual request status, even if it was successful. To run and test Ajax requests locally, it should overlook the status code being 200, and merely rely on a readyState value of 4. The following example takes into account the request possibly being run offline and to enable it:

var myrequest=new ajaxRequest()
myrequest.onreadystatechange=function(){
 if (myrequest.readyState==4){ //if request has completed
  if (myrequest.status==200 || window.location.href.indexOf("http")==-1){ //if request was successful (versus "page not found" etc) or if run offline (rely on readyState of 4 alone then)
   //do something with returned data
  }
 }
}

• 200: "Ok"
• 301: "Moved Permanently"
• 304: "Not Modified" (page hasn't been modified)
• 404: "Not Found"
• 403: "Forbidden"
• 401: "Unauthorized" (wrong password)

IE8 only. Supports this property if using the new XDomainRequest() object to create the Ajax request.

var ie8ajaxrequest=new XDomainRequest()
ie8ajaxrequest.contentType="text/xml"

IE8 only. Supports this property if using the new XDomainRequest() object to create the Ajax request.

var ie8ajaxrequest=new XDomainRequest()
ie8ajaxrequest.timeout=2000
ie8ajaxrequest.ontimeout=function(){
 alert("Request has timed out. Please try again.")
}

If your request is synchronous (as specified when calling ajaxrequest.open()), this event handler should not be defined, as the browser will still invoke it once even though there are no state changes.

Mozilla only. IE8 supports this via the new XDomainRequest() object.

Mozilla only. IE8 upports this via the new XDomainRequest() object.

Mozilla only. IE8 supports this via the new XDomainRequest() object.

• eventobj.position: The current number of bytes received
• eventobj.totalSize: The total size of the data being retrieved.

For example:

var myrequest=new ajaxRequest()
myrequest.onprogress=function(e){
 var currentpercent: (e.position/e.totalSize)*100
 window.status="Downloading data. Percentage complete: "+currentpercent+"%"
}

IE8 only. Supports this property if using the new XDomainRequest() object to create the Ajax request.

var ie8ajaxrequest=new XDomainRequest()
ie8ajaxrequest.timeout=2000
ie8ajaxrequest.ontimeout=function(){
 alert("Request has timed out. Please try again.")
}

var myrequest=new ajaxRequest()
myrequest._timeout=setTimeout(function(){
 myrequest.abort()
 },
 5000
) //end setTimeout

1. Method: Enter "GET" for GET requests, "POST" for POST requests. Other possible values include "HEAD" or "PUT".
2. url: The relative or full URL to the Ajax request. All modern browsers restrict this url to the same domain as the page making the request. For cross domain Ajax requests, a "web proxy" needs to be used to first bring the data from the remote host onto the current, such as via PHP's file_get_contents() method or Curl before opening a request to the local copy of the data.
3. async: Optional Boolean parameter that specifies whether the request should be asynchronous (default) or synchronous (true=async, false=sync). In the later, the request stalls the loading of the rest of the page until the request is completed.
4. username: Optional parameter for specifying the username of an authenticated request.
5. password: Optional parameter for specifying the password of an authenticated request.

For "GET" requests, pass any parameters that should be sent along with the request by adding it to the url followed by a question mark (?), for example:

var myrequest=new ajaxRequest()
myrequest.open("GET", "result.php?id=george&age=30", true)

Be sure to use encodeURIComponent() on any parameter values that may contain special characters such as spaces or "=" etc. For "POST" requests, parameters are entered inside request.send() instead.

As mentioned, by default the browser restricts the domain portion of the URL entered into request.open() to only those that match that of the calling page. If you're using an absolute URL, the URL's hostname must match exactly the calling page's. This means even "http://mysite.com" and "http://www.mysite.com" are treated as different (non matching) hostnames. To ensure an absolute URL request's hostname matches the calling page's, you can have JavaScript dynamically construct that portion of the URL:

var myrequest=new ajaxRequest()
var myhostname="http://"+window.location.hostname
myrequest.open("GET", myhostname+"/mydir/response.php", true)

Ajax GET request:

var myrequest=new ajaxRequest()
myrequest.open("GET", "result.php?id=george&age=30", true)
myrequest.send(null) //send GET request

Ajax POST request:

var myrequest=new ajaxRequest()
var parameters="id=george&age=30"
myrequest.open("GET", "result.php", true)
myrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
myrequest.send(parameters) //send POST request

Here's an example that probes the content type of the request to decide what data to return:

var myrequest=new ajaxRequest()
myrequest.onreadystatechange=function(){
 if (myrequest.readyState==4){ //if request has completed
  if (myrequest.status==200){ //if request was successful (versus "page not found" etc)
   var contentType=myrequest.getResponseHeader("Content-Type")
   if (contentType=="text/xml") //XML Data (make sure server sends out correct header)?
    return myrequest.responseXML
   else if (contentType=="text/json") //JSON Data (make sure server sends out correct header)?
    return eval(myrequest.responseText) //(beware of cross domain security issues)
   else // Text Data
    return myrequest.responseText
  }
 }
}

For Ajax "POST" requests, always send a "Content-type" header of "application/x-www-form-urlencoded".

var myrequest=new ajaxRequest()
"
"
myrequest.open("POST", "submit.php", true)
myrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
myrequest.send("id=" + encodeURI(somevalue))