12.3. Using REST in JavaScript

The page discusses sending REST requests from client-side (in-browser) JavaScript. If you're using server-side JavaScript, see your server vendor's documentation for creating HTTP requests.

If you have developed AJAX applications, all this will seem trivial to you: after all, every AJAX request is an HTTP request, and in many ways, AJAX applications are RESTful.

Creating XMLHttpRequest Objects
Sending HTTP requests in JavaScript involves the XMLHttpRequest object. Note that despite its name, neither the request nor the response has to involve XML.

Sadly, there is no standard way to create XMLHttpRequest objects. The following function is a cross-browser solution:

function createRequest() {
  var result = null;
  if (window.XMLHttpRequest) {
    // FireFox, Safari, etc.
    result = new XMLHttpRequest();
    if (typeof xmlhttp.overrideMimeType != 'undefined') {
      result.overrideMimeType('text/xml'); // Or anything else
    }
  }
  else if (window.ActiveXObject) {
    // MSIE
    result = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  else {
    // No known mechanism -- consider aborting the application
  }
  return result;
}

Using XMLHttpRequest
An XMLHttpRequest object allows you to send a request, either GET or POST; however, it does not immediately return a value. Rather, you have to supply a callback function that will be invoked when the request completes. Confusingly, you callback is actually invoked several times (up to four times, depending on the browser), during different stages of the client/server interaction. It is only the fourth and final stage that interests us; the readyState field can be used to test for the stage, as shown in the following code fragment:

var req = createRequest(); // defined above
// Create the callback:
req.onreadystatechange = function() {
  if (req.readyState != 4) return; // Not there yet
  if (req.status != 200) {
    // Handle request failure here...
    return;
  }
  // Request successful, read the response
  var resp = req.responseText;
  // ... and use it as needed by your app.
}

Note that if the response is an XML response (denoted by the server using MIME type text/xml), it can also be read using the responseXML property. This property contains an XML document, and can be used as such using JavaScript's DOM navigation facilities.

Sending the Request
Once we have created the request object and set up its callback function, it is time to issue the request:

req.open("GET", url, true);
req.send();

For POST requests, use:

req.open("POST", url, true);
req.setRequestHeader("Content-Type",
                     "application/x-www-form-urlencoded");
req.send(form-encoded request body);

For more information about sending HTTP requests from JavaScript, just google for XMLHttpRequest.