Introduction to AJAX __ajax

An instance

Before we begin to formally explain Ajax, let's first look at Google Map's use of Ajax to improve its product design.

1. Enter http://maps.google.com in the browser address bar to open the Google map interface.

2. Enter "China" in the search box at the top of the page and click the "Search" button.

3. Click the "Satellite" button in the upper-right corner of the map to switch to the satellite interface.

4. Resize the upper-left corner of the map, or reduce the current area. As you can see, the image of the map area is quickly transformed according to the position of the ruler.

5. Hold down the left mouse button, drag the map, map area of the image with the mouse movement and moving the image of the process is updated in real time. The effect is shown below.

It can be seen from the above that when the user drags the map to operate, the map on the Web page changes immediately, the page is not refreshed, when the left mouse button is moved to move the map, the map followed the move, the process is fast, while the user did not want the server to submit the form or and click a hyperlink. This process is difficult to understand with traditional Web application interactive thinking, which is the charm of Ajax.

L What is Ajax?

Before we study Ajax, let's first discuss a question--what is Web 2.0. When you hear the Word Web 2.0, you should first ask what Web 1.0 is. "Although you rarely hear about Web 1.0, it actually refers to a traditional web with a completely different request and response model." For example, click a button on the hdu.edu.cn website. A request is sent to the server, and then the response is returned to the browser. This request is not just a new content and a list of items, but another complete HTML page. So when a Web browser is redrawn with a new HTML page, you may see flicker or jitter. In fact, you can see the requests and responses clearly from each new page you see.

Web 2.0 (to a large extent) eliminates this visible reciprocating interaction. For example, on Google Maps, you can drag the map, zoom in and out, and only a few redraw operations. Of course there are still requests and responses, but they are hidden behind the scenes. As a user, the experience is more comfortable and feels like a desktop application. This new feeling and paradigm is what you realize when someone mentions Web 2.0.

The need to be concerned is how to make these new interactions possible. Obviously, you still need to make requests and receive responses, but it is the HTML redraw that interacts with each request/response that makes for slow, clumsy Web interaction. So it's clear that we need a way to make requests and receive responses that only contain the data that you need rather than the entire HTML page. The only time you need to get the whole new HTML page is when you want the user to see the new page.

Most interactions, however, add details to existing pages, modify body text, or overwrite existing data. In these cases, Ajax and Web 2.0 methods allow data to be sent and received without updating the entire HTML page. For those who often surf the internet, this ability can make your applications feel faster, respond more promptly, and let them visit your site from time to times.

So here's the time to make a complete explanation of Ajax: Adaptive Path's Jesse James Garrett defines Ajax as

Ajax is not a technology. In fact, it is a combination of several booming technologies in a new and powerful way. Ajax includes representations based on XHTML and CSS standards, dynamic display and interaction using the document Object model, asynchronous communication with the server using XMLHttpRequest, and the use of JavaScript to bind everything.

This is great, but why do you want to name it Ajax? In fact, the term Ajax was created by Jesse James Garrett, who said it was "shorthand for asynchronous JavaScript + XML."

L AJAX Working principle

With the above definition, we should already know the composition of Ajax, that is, he is composed of technology such as Xhtml,xml,css,dom,xmlhttprequest,javascript, however, the real use of Ajax can achieve asynchronous communication, To truly realize this magnificent miracle, you must be very familiar with a JavaScript object, that is, XMLHttpRequest. So we need to understand how Ajax works, starting with understanding the XMLHttpRequest object.

Here are a few of the few methods and properties that will be used for the object.

open (): Creates a new request to the server.

send (): Sends a request to the server.

abort (): Exits the current request.

readystate: Provides the ready state of the current HTML.

ResponseText: The request response text returned by the server.

' onReadyStateChange: Callback method

Responsexml: The request returned by the server responds to the XML form of the text of the organization.

Here is a brief introduction to the role of these methods.

L Create a XMLHttpRequest

First you need to create a new variable and assign it a XMLHttpRequest object instance. This is simple in JavaScript, as long as you use the New keyword for the object name, as shown in the following code.

Create a variable with var in JavaScript, give it a name (such as "request"), and assign it a new XMLHttpRequest instance. You can then use the object in the function.
Error handling
In fact all sorts of things can go wrong, and the code above does not provide any error handling. A better approach is to create the object and gracefully exit the problem when it occurs. For example, any older browsers do not support XMLHttpRequest, and you need to let these users know that something is wrong. The following JS code describes how to create the object by creating a Getxmlhttprequest () method.

Code 1: The creation of a detailed XMLHttpRequest object

function Getxmlhttprequest () {
var request = false;
try {

Request = new XMLHttpRequest ();
} catch (Trymicrosoft) {
try {
Request = new ActiveXObject ("Msxml2.xmlhttp");
} catch (Othermicrosoft) {
try {
Request = new ActiveXObject ("Microsoft.XMLHTTP");
} catch (Failed) {
Request = false;
}
}
}
return request;

}

Be sure to understand these steps:
Create a new variable request and assign False value. False is used later as a decision condition, which indicates that the XMLHttpRequest object has not yet been created.
• Add Try/catch Block:
• Try to create a XMLHttpRequest object.
1. Failure (catch (failed)) guarantees that the value of the request is still false.
2, check whether the request is still false (if everything is normal will not be false).
• The request returns False if there is a problem.

In addition, in the above code, we are not aware of a problem, that is, when the request = new XMLHttpRequest (), when there is an exception, in the Catch statement we used the request = new ActiveXObject (" Msxml2.xmlhttp "); and request = new ActiveXObject (" Microsoft.XMLHTTP "), and so on the object acquisition, this is for IE browser operation, because IE browser to The XMLHttpRequest version has a different name. In fact, it calls it a few different things. If you are using a newer version of Internet Explorer, you need to use object Msxml2.xmlhttp, while older versions of Internet Explorer use Microsoft.XMLHTTP. We need to support both types of objects (while also supporting non-Microsoft browsers).

L send a request with XMLHttpRequest
After you get the request object, you can enter the request/response loop. Remember, the only purpose of XMLHttpRequest is for you to send requests and receive responses. Everything else is the work of JavaScript, CSS, or other code on the page: Changing the user interface, switching images, and interpreting the data returned by the server. Once you are ready to XMLHttpRequest, you can send the request to the server.
Ajax uses a sandbox security model. Therefore, Ajax code (specifically the XMLHttpRequest object) can only send requests to the same domain in which it resides. If you let