The AJAX cheatsheet

There is just one thing that XMLHttpRequest() brings to the table that was not possible before. It is simply:

The ability for javascript to read an http URL and stuff its contents into a string.

This was a capability that Javascript should have had from the very beginning and, despite the deceptive, marketing-driven naming, has nothing to do with XML.

In fact, 'AJAX' is a lot simpler to understand than the 600-page books on it might lead you to think. This one page no-nonsense guide for experienced Javascript and HTTP coders contains all the core info you will need to make practical use of this terribly-monikered, but indispensable, technology.

XMLHttpRequest (XHR) Object Creation

function createXHRobj() {
  if (window.XMLHttpRequest)
    req = new XMLHttpRequest()  // browsers besides IE
  else if (window.ActiveXObject)
    req = new ActiveXObject("Microsoft.XMLHTTP")  // IE
  else
    alert ("Could not create XHR obj!")
  return req
}

Fig. 1

Asynchronous GET request

var req=createXHRobj()

function request(url) {
  req.onreadystatechange = callbackFunction
  req.open("GET", url, true)
  // 3rd param specifies asynchronous request (browser does not wait/block)
  req.send("")
}

function callbackFunction() {
  if (req.readyState == 4)  // request completed
    if (req.status == 200)  // HTTP response code (200 == OK)
      response  = req.responseText
      // and anything else you might need to do
    else {
      // error reporting code
    }
}

Fig. 2

Synchronous (blocking) GET request

function request(url) {
  req=createXHRobj()
  req.open("GET", url, false)
  req.send(null)
  alert(req.responseText)
}

Fig. 3

Sending via POST - req.send()

function submitform(url) {
  req=createXHRobj()

  // DO NOT EVER use the same names for javascript variables and
  // HTML element ids, they share the same namespace under IE and
  // may also cause problems in other browsers.
  namevar=encodeURIComponent(document.getElementById('Sender_Name').value)
  emailvar=encodeURIComponent(document.getElementById('Sender_Email').value)

  req.open("POST", url, false)
  // req.setRequestHeader() must come AFTER req.open()
  req.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

  req.send("name="+namevar+"&email="+emailvar)
  alert(req.responseText)
}


// we do away with HTML form submit to simplify things
<form>
  <input type="text" id="Sender_Name"  />  // long descriptive names that will not be used as
  <input type="text" id="Sender_Email" />  // javascript variable names are a good habit here...
  <input type="button" value="send" onclick="javascript:submitform('processform.php')"/>
</form>

Fig. 4

Wrapper code for Asynchronous requests

var req1=createXHRobj()
var req2=createXHRobj()

function asynXHR(url, reqobj, action) {
  reqobj.onreadystatechange=action
  reqobj.open("GET", url, true)
  reqobj.send("")
}

function responseIsReady(reqobj) {
  if (reqobj.readyState==4)
    if (reqobj.status==200) return true
    else {
      alert("ERROR: STATUS RESPONSE "+reqobj.status)
      return true // let the call proceed so we know which
                  // call the status error occurred in
    }
  else return false
}


// each callback function must use its own request object
var req1, req2

function showstock() {
  if (responseIsReady(req1)) alert("stock price: $"+req1.responseText)

  /* IE can't reuse the XHR object, you are required to clean up and create a new one */
  req1=null
  req1=createXHRobj()
}

function showtemp()  {
  if (responseIsReady(req2)) alert("It's "+req2.responseText+" celsius")

  /* IE can't reuse the XHR object, you are required to clean up and create a new one */
  req2=null
  req2=createXHRobj()
}

asynXHR("price.php?stock=GOOG",req1,showstock)
asynXHR("temperature.php?city=Singapore",req2,showtemp)

Fig. 5