What is XMLHttpRequest?

A method of making HTTP requests between a client and a server without the need for a page refresh. It's the X in Ajax.

XMLHttpRequest Advantages

• Faster because we're sending
  and receiving less data with each
  request
• More responsive UI
• Cool factor

View a demo

Basic XMLHttpRequest Syntax

var xhr = new XMLHttpRequest();            // Create a new object
var data = 'field1=value1&field2=value2';  // URL-encoded data string

// Define our readystatechange handler
var readyStateHandler = function(event){
   if( this.readyState == 4){
      // handle this.responseText or this.responseXML
   }
}
xhr.open('GET','/processing_script')        // open a connection
xhr.onreadystatechange = readyStateHandler  // set the handler
xhr.send(data);                             // send the data
		

XMLHttpRequest Limitations

• Ugly data syntax: 'field1=value1&field2=value2' (For real?)

• Subject to Same Origin Policy: same protocol, domain or IP, and port

  • http://api.foo.example to http://www.foo.example/ possible by using document.domain.
  • http://foo.example to http://bar.example impossible.
• URL-encoded strings means that you can’t send binary data
• MIME type mismatches present problems in code (sending XML as HTML, for example)
• Can't track progress of data transfers.
• Can't timeout requests.

XMLHttpRequest, Level 2

It’s awesome!!!1!ONE!

All of the advantages of
XMLHttpRequest + more goodies

• Cleaner FormData syntax for sending information
• Transfer binary data
• ProgressEvent interface to monitor progress of
  data transfers
• Cross-Origin Resource Sharing means cross-domain
  requests are possible
• Set timeouts
• Enforce MIME types

Current browser support, June 2011

Setting and handling timeouts

var makeRequest = function(event){
    event.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.onload = function(event){ // process the response }
    xhr.ontimeout = function(event){ alert('Request timed out.'); }
    xhr.open('GET', 'bookmarks.json');
    xhr.timeout = 5000; // timeout in milliseconds. 5000ms = 5s
    xhr.send();
}
window.addEventListener('load', makeRequest, false);

View a demo

(Try Internet Explorer 8 or 9)

Using FormData objects

var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('key','value');
data.append('name','Jane Doe');
xhr.open('GET','/processor');
xhr.send(data);

View a demo

(use Chrome, Firefox, or Safari 4+)

Using FormData objects to upload files

var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('file',form['upload'].file[0]); // get file data*
xhr.open('GET','/processing_script');
xhr.send(data);

View a demo

(use Chrome, Firefox, or Safari 4+)

• *form['upload'].file[0]: FileList interface from the File API, a class definition for the HTML5 file input type.
• Uses the files attribute and either array syntax (files[0]), or the items attribute syntax (files.item(0))

ProgressEvent interface

Applies to both the XMLHttpRequest and XMLHttpRequestUpload objects

onreadystatechange only applies to XMLHttpRequest.

ProgressEvent interface

• Inherits from the EventTarget interface
• Can use event attribute or addEventListener() syntax

xhr.onprogress = function(event){ /* do something */ }

var progressHandler = function(event){ /* do something */ }
xhr.addEventListener('progress',progressHandler,false);

XMLHttpRequestUpload Object

Part of the XMLHttpRequest interface.

• Created automatically any time we upload data
• Accessed via a read-only attribute of XMLHttpRequest
• Syntax is XMLHttpRequest.upload
• Again: has its own event interface that lets us monitor upload progress

Monitoring uploads with progress events

var xhr = new XMLHttpRequest();
var data = new FormData();
data.append('file',form['upload'].file[0]);

xhr.upload.onprogress = function(event){
     console.log( event.loaded / event.total );
}
xhr.upload.onerror = function(event){ alert('something went wrong!'); }
xhr.upload.onload = function(event){ alert('file uploaded!'); }

xhr.open('GET','/processing_script');
xhr.send(data);

View a demo

Monitoring uploads: Caveats

May be a lag between when the upload completes (when the load or loadend events are fired) and when the server returns a response.

Cross-Origin Requests

Look just like same-origin requests, but uses full URLs.

xhr.open('GET','http://datahost.example/data.xml');

Browser sends an additional header:

Cross-Origin Resource Sharing

• Working draft specification
• Collection of nine headers that shape access control
• Can’t make a cross-origin request unless the receiving server allows access

CORS Response Headers and what they do

Access-Control-Allow-Origin

Allow access to a particular originating domain.

Access-Control-Allow-Credentials

Permit requests with cookies

Access-Control-Expose-Headers

Indicates which headers are safe to reveal

Access-Control-Max-Age

How long the results of a "preflighted" request can be cached.

Access-Control-Allow-Methods

Specifies which HTTP request methods — ex: GET, POST, PUT, HEAD, DELETE — are allowed.

Access-Control-Allow-Headers

Which headers will be accepted (for example: X-CustomHeader).

Cross-Origin Resource Sharing

Minimum header necessary for a cross-origin request to succeed.

HTTP/1.1 200 OK
Date: Fri, 27 May 2011 21:27:14 GMT
Server: Apache/2
Last-Modified: Fri, 27 May 2011 19:29:00 GMT
Accept-Ranges: bytes
Content-Length: 1830
Keep-Alive: timeout=15, max=97
Connection: Keep-Alive
Content-Type:  application/xml; charset=UTF-8
Access-Control-Allow-Origin: *

View a demo

Setting CORS Headers

Varies by server type and programming language, but here is a roundup:

Apache

Header set Access-Control-Allow-Origin "http://foo.example"

Lighttpd

setenv.add-response-header = ( "Access-Control-Allow-Origin" => "http://foo.example" )

Nginx

add_header Access-Control-Allow-Origin http://foo.example

IIS

<add name="Access-Control-Allow-Origin" value="*" />

Python

print "Access-Control-Allow-Origin: http://foo.example"

PHP

header("Access-Control-Allow-Origin: http://foo.example");

Handling responses

• XHR2 adds response and responseType attributes
• responseText (for text-based responses) and responseXML (for XML documents and fragments) are still supported
• responseType isn't yet supported in any browser(spec is still in flux)
• Can enforce MIME types with overrideMimeType()

Handling responses: An example

var makeRequest = function(event){
    event.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.onload = function(event){
    	var xhr = event.target;
    	console.log(xhr.response); // the response.
    }
    xhr.open('GET', 'bookmarks.json');
    xhr.send();
}
window.addEventListener('load', makeRequest, false);

Handling responses: overrideMimeType()

Enforce a MIME type for the response. In this case, the browser will treat data.xml as XML despite its text/html content type.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.xml');
xhr.overrideMimeType('application/xml')
xhr.send();

Date: Sat, 04 Jun 2011 03:11:31 GMT
Server: Apache/2.2.17
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

View a demo

Learn more

For more on XMLHttpRequest, Level 2 and associated technologies, see:

• XMLHttpRequest specification
• XMLHttpRequest, Level 2 specification
• Cross-Origin Resource Sharing
• File API
• XDomainRequest Object (Internet Explorer only)
• EventTarget interface
• More basic demos by moi