Blog Task 8

AJAX means ‘Asynchronous Javascript and XML

fig1

Figure 1: The traditional model for web applications (left) compared to the Ajax model (right).

This approach makes a lot of technical sense, but it doesn’t make for a great user experience. While the server is doing its thing, what’s the user doing? That’s right, waiting. And at every step in a task, the user waits some more.

fig2

Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

XmlHttpRequest

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.

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.

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.

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.

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();

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: