Ajax Basics Tutorial (2)-Using the XMLHttpRequest Object 2.3 Interaction Example

See here, you might want to know what a typical Ajax interaction is. Figure 2-1 shows the standard interaction patterns in AJAX applications.

Figure 2-1 Standard Ajax interaction

Unlike standard request/response methods used in standard Web accounts, the practice of AJAX applications differs slightly.

1. A client event triggers an AJAX event. Many of these events can trigger Ajax events from simple onchange events to a specific user action. You can have the following code:

<input type="text"d="email" name="email" onblur="validateEmail()";>

2. Create an instance of the XMLHttpRequest object. Use the Open () method to establish the call and set the URL and the desired HTTP method (usually a get or post). The request is actually triggered by a send () method call. The possible code looks like this:

var xmlHttp;
function validateEmail() {
var email = document.getElementById("email");
var url = "validate?email=" + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

3. Make a request to the server. You might invoke a servlet, a CGI script, or any server-side technology.

4. The server can do what you want to do, including accessing the database, or even accessing another system.

5. Request returned to the browser. Content-type set to Text/xml--xmlhttprequest object can only handle results of text/html type. In other, more complex examples, the response may involve a broader range of JavaScript, Dom management, and other related technologies. Note that you also need to set some other header so that the browser does not cache the results locally. To do this you can use the following code:

response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");

6. In this example, the XMLHttpRequest object is configured to call the callback () function when processing returns. This function checks the ReadyState property of the XMLHttpRequest object and then looks at the status code returned by the server. If everything works, the callback () function will do some interesting work on the client. The following is a typical callback method:

function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}

As you can see, this is different from the normal request/response pattern, but not entirely unfamiliar to web developers. Obviously, there are things you can do when creating and building XMLHttpRequest objects, and you can make a difference when the callback function completes the state check. Generally, you will wrap these standard calls in a library for use throughout the application, or you can use the libraries provided on the web. This is a new area, but a lot of work has been done in the open source community.

Typically, the various frameworks and toolkits available on the Web are responsible for basic connectivity and browser abstraction, and some add user interface components. There are some purely customer based and some need to work on the server. Many of these frameworks are just beginning to develop, or are in the early stages of a release, and the situation is changing as new libraries and new versions are regularly present. The field is maturing and the most advantageous will stand out. Some of the more mature libraries include libxmlrequest, Rslite, Sarissa, JavaScript Object annotations (JavaScript Object Notation,json), JSRs, direct web remote communications REMOTING,DWR) and rails on Ruby. This field is changing, so you should properly configure your RSS collector to collect information on all Web sites on Ajax in a timely fashion!

Back to "Ajax Basics Tutorial-Directory"