AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.http://www.w3schools.com/ajax/ajax_intro.asp
Ajax involves the use of JavaScript, CSS, the DOM, and (X)HTML. There’s nothing new
about that. In fact, that pretty accurately describes what DHTML was supposed to be. The
difference is that Ajax uses asynchronous server-side processing.
Traditionally, web applications involve lots of page refreshes. The user makes a choice or
enters data on one page. This information is sent back to the server. The server then sends
back a new page based on the user’s actions. Even if the user only needed to make a small
query to the server, a whole new page would need to be served.
Take the example of a login page. This page would probably have branding, navigation,
and footer elements as well as the obligatory login form. Every time a user tries to log in,
a call must be made to the server to check the inputted data against a database. If the
login is incorrect, the same page is served up again, complete with the same branding,
the same navigation, and the same footer. The only difference between this page and the
previous page is the error message informing the user that the attempted login was unsuccessful.
Despite the fact that only a small portion of the page needed to be updated,
the entire page was reloaded. Each page load is synchronous with a user request.
In the Ajax version, only the login portion of the page changes. Everything else—the
branding, the navigation, and the footer—remains the same. The user fills in the login
form and presses submit. This time, if the login is unsuccessful, an error message appears
on the page that is already loaded in the browser.
The difference between the traditional login page and the Ajax version is that with Ajax,
the server-side processing occurs asynchronously. Instead of serving up a whole new page
every time the user sends a request, the server can process requests in the background.
Perhaps the best description of this difference comes from Derek Powazek, who said that
the traditional Web is to Ajax as email is to instant messaging.
There has always been a very clear divide between client-side processing and server-side
processing. On the client side, which is the browser, JavaScript can manipulate the
contents of the currently loaded page. If any server-side processing is required, a request
is sent to a program on the server, written in PHP, ASP, Perl, ColdFusion, or any other
server-side programming language. Traditionally, the only way for the server to send back
a response was to serve up a new web page.
Whenever the client (the web browser) needed something from the server, a request had
to travel all the way to the server, and a corresponding response had to travel all the way
from the server back to the client.
The magic of Ajax is achieved by placing a way station中转站 between the client and the server.
Using JavaScript, a request is sent from the client to this way station, instead of going all
the way back to the server. The request is then passed along to the server. The server sends
a response back to the way station. This response is then passed on to the client where it
can be processed using JavaScript.
The way station is the XMLHttpRequest object.
XMLHttpRequest object It’s not a standard, but it is very widely supported in modern web browsers.实现是方式不同。
Microsoft first implemented something called XMLHTTP as one of their proprietary ActiveX objects. Here’s how you would create a new instance of the object in Internet Explorer:
var waystation = new ActiveXObject("Microsoft.XMLHTTP");
Other browsers achieve the same result by using XMLHttpRequest:
var waystation = new XMLHttpRequest();
In order to satisfy both implementations, you would need to write something like this getHTTPObject function to create an instance of the right object:
function getHTTPObject(){ if(window.ActiveXObject){ var waystation=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ var waystation=new XMLHttpRequest(); } else{ var waystation=false; } return waystation; }
That’s a very simple example. In a real-world situation, you might have to write something
even more convoluted!回旋
The getHTTPObject function returns a reference to a new XMLHttpRequest object. You can
assign this reference to a variable:
request = getHTTPObject();
This object has a number of methods, the most useful of which is open. The open method
is used to point the object at a file on the server. You can also specify what sort of HTTP
request you want to make: GET, POST, or SEND. A third parameter specifies whether the
request should be processed asynchronously.
This will initiate a GET request to a file called example.txt in the same directory as the
JavaScript file:
request.open( "GET", "example.txt", true );
You also need to specify what happens when the XMLHttpResponse object receives a
response from the server. You can do this by utilizing the onreadystatechange property.
This is an event handler that is triggered when the server sends a response back to the
XMLHttpRequest object.
This will cause a function called doSomething to be executed when onreadystatechange is
triggered:
request.onreadystatechange = doSomething;
Once you’ve specified where the object should send a request and what it should do once
it receives a response, you can start the process using the send method:
request.send(null);
The whole process looks like this:
request = getHTTPObject(); request.open( "GET", "example.txt", true ); request.onreadystatechange = doSomething; request.send(null);
You’ll need to write a function called doSomething to handle the response from the server
When the server sends a response back to the XMLHttpRequest object, a number of properties
are made available. The readyState property is a numerical value that is updated
while the server deals with the request. There are five possible values:
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete
Once the readyState property has a value of 4, you have access to the data sent by the server.
You can access this data as a string of text provided by the responseText property. If the
data is sent back with a Content-Type header of “text/xml”, you can also access the
responseXML property, which is effectively a DocumentFragment. You can use all the usual
DOM methods to manipulate this DocumentFragment. This is where the XML part of
XMLHttpRequest comes from.
In this example, the doSomething function waits for a readyState value of 4 and then
dumps the entire responseText property into an alert dialog:
function doSomething() {
if (request.readyState == 4) {
alert(request.responseText);
}
}
If the example.txt file contains a piece of text saying “Hello world,” then that will appear
in the alert box.
That’s a very simple and unimpressive way of using the XMLHttpRequest object, but with a
little imagination, it can be put to astounding use.
Hijax
If the success of Ajax has shown one thing, it’s that having a short, snappy name for something
helps sell an idea. Just as it’s easier to say Ajax instead of “XMLHttpRequest with DOM
Scripting, CSS, and (X)HTML,” it’s simpler for me to say Hijax instead of “progressive
enhancement using Ajax.”
Ajax relies on the server for its power. A server-side programming language carries out
most of the real work. The XMLHttpRequest object acts as a gateway between the browser
and the server, transferring requests and responses. If that gateway is removed, it should
still be possible to send requests and receive responses. It will just take longer.