Web Hosting Philippines, Offshore Programming, Offshore SEO Philippines, Cheap Webhosting Manila Philippines
Home -> Resources -> Web Development -> The AJAX cheatsheet

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() {
  req = null
  if (window.XMLHttpRequest)
    req = new XMLHttpRequest()  // browsers besides IE
  else if (window.ActiveXObject)
    req = new ActiveXObject("Microsoft.XMLHTTP")  // IE
    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)

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.open("GET", url, false)
Fig. 3

Sending via POST - req.send()

function submitform(url) {

  // 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.

  req.open("POST", url, false)
  // req.setRequestHeader() must come AFTER req.open()


// we do away with HTML form submit to simplify things
  <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')"/>
Fig. 4

Wrapper code for Asynchronous requests

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

function asynXHR(url, reqobj, action) {
  reqobj.open("GET", url, true)

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 */

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 */

Fig. 5
 Want to tip via bitcoin?

(address string below for double checking)

#top">Back to Top

© 2014 by Andy Sy
last updated: 2006-02-01

Web Development / Rich Internet Applications (RIA) Development

Programming Languages


Database Development

   © 2003-2015 Neotitans Technologies Inc.