Introduction


XmlHttpRequest is a [soon-to-become standard] JavaScript object which is used to communicate with web servers asynchronously.  Using the standard request/response paradigm, one can implement a functionality such as WebMark's search-as-you-type.  Note that use of the XmlHttpRequest is central to the AJAX paradigm.  AJAX was defined by the Adaptive Path company.  Here are some WebMark results.

This tutorial is a working experiment, an attempt to exemplify my theory on Learning By ImmersionLet me know if you have any questions, comments, or suggestions.

If you are looking for information on multithreading or timeouts, scroll to the end of this tutorial

Caching


IE 6.0 caches responses to XmlHttpRequests; there may be a way to set headers and such so that IE 6.0 won't do this, but for now, I just append random crap to the querystring in order to fool IE into grabbing a fresh version for every request.  Note IE also has issues with caching images.

Browser Compatibility


XmlHttpRequest works in IE 6.0+, Firefox 1.0+, and the latest version of Opera.  Beyond this, I am unsure; I would like to know what exactly the browser requirements are.  Because some browsers do not support XmlHttpRequest, consider using IFrames.  Here's an excellent introduction to iframe elements.  You may be interested to know that IE7 now supports a native XmlHttpRequest object.

Request/Response


To understand what XmlHttpRequest does, you need to understand the request/response behavior of all web servers.  This is how all web surfing works -- you send (request) data to a computer asking to see a webpage, and it sends (response) data back.  Usually, this requires clicking on a hyperlink or button, and results in the page being reloaded -- a time consuming and sometimes resource-draining process.  What if you simply want to refresh a tiny bit of text -- surely you don't have to keep refreshing the page?  What XmlHttpRequest gets you is the ability to send requests to webservers behind the scenes in JavaScript, and get responses back, without the user necessarily knowing that anything has happened.

A Simple Example


Try navigating here: http://luke.breuer.com/tutorial/xmlhttprequest.aspx?gettime= .  While this is nice, you still have to refresh the page every time you want to see the time.  What if you could have the clock update dynamically?  XmlHttpRequest can do this.  You might say that this can simply be done with Javascript and no XmlHttpRequest -- this is true, but this is only a pedantic example.  WebMark's search-as-you-type functionality is a better example, but it is too complex for a simple tutorial like this one.

Without further ado, check out the textbox below (you will need to enable the timer):

Almost all of the explanation lies in comments for the code in this page and the Javascript file.  I have made the code more complicated than absolutely necessary, but I think it's valuable to see XmlHttpRequest working with a timer and working asynchronously, as this is how I often see it being used.

Lemme see the Code!


There is generic code in the [nicely commented] xmlhttprequest.js file and code specific to this example on this page (view the source).  The only other code you need is a few lines of ASP.NET code, which I have written in C#:

private void Page_Load(object sender, System.EventArgs e) { if (Request["foo"] != null) { Response.Write(Request["foo"].ToUpper()); Response.End(); } else if (Request["gettime"] != null) { Response.Write(DateTime.Now.ToUniversalTime().ToString()); Response.End(); } }

And in PHP:

if (isset($_GET['foo'])) { echo strtoupper($_GET['foo']); die(); } else if (isset($_GET['gettime'])) { echo date('r'); die(); }

Timeouts


There seems to be a fair deal of inquiry on the web as to XmlHttpRequest timeouts.  It appears that the XmlHttpRequest object itself has no support for timeouts, but one can always use window.setTimeout. Ajax blog and Ajax Patterns seem to have covered this issue in detail.

Multithreading


After mastering the basics of XmlHttpRequest, one may wonder about running multiple requests at the same time.  The official ECMA JavaScript spec (pdf) does not include any multithreading functionality; tests performed on IE 6.0 and Firefox 1.5 strongly indicate that neither browser has multithreaded javascript.  It appears that so-called asynchronous javascript actions (XmlHttpRequest, setTimeout, setInterval) cause events to queue up, which will fire when no other javascript code is executing.

Additional Material


Relevant WebMark searches: XmlHttpRequest, AJAX.  Here is the Wikipedia definition of AJAX.

Support Tutorials like This


If you found this tutorial helpful, please link to it.  If you really want to show your appreciation... :-)