The principles and operating mechanism of Ajax

Source: Internet
Author: User
Tags try catch
About Ajax, it's a technology that's been very hot lately, and it's very popular nowadays. Of course, it is not a new technology, but a unity under the various existing technologies and support mechanisms. In my project, Ajax is occasionally used to give users some experience without refreshing. After a few times, I personally decided to make a summary of its principles and operating mechanisms.
The name Ajax is said to be shorthand for asynchronous JavaScript + XML, in fact, it is a combination of the following several technologies.

1. Use CSS and XHTML for presentation.
2. Use the DOM model for interactive and dynamic display.
3. Use XMLHttpRequest to communicate with the server asynchronously.
4. Use JavaScript to bind and invoke.

The principle of Ajax
XMLHttpRequest is the core mechanism of Ajax, which is introduced first in IE5 and is a technology that supports asynchronous requests. Simply put, JavaScript is the time to request and process responses to the server without blocking the user. No refreshing effect is achieved.
So let's start with XMLHttpRequest and see how it works.
First, let's look at the properties of the XMLHttpRequest object.
Its properties are:
onReadyStateChange the event handler for the event that triggers each state change.
ResponseText A string form that returns data from a server process.
Responsexml a DOM-compliant document data object returned from a server process.
Status number code returned from the server, such as common 404 (not Found) and 200 (ready)
Status Text string information accompanying the status code
ReadyState object state Value, 0-Uninitialized 1-Loading 2-loading complete 3-Interactive 4-complete.

However, because of the differences between browsers, creating a XMLHttpRequest object may require different methods. This difference is mainly reflected in IE and other browsers.
The following are XMLHttpRequest objects created separately from different browsers.

< SCRIPT language = "javascript" type = "Text/javascript" >
var xmlHttp = false;
Create a XMLHttpRequest object for IE
try {
Use a version of MSXML to create
XmlHttp = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
Try catch (E2) {
XmlHttp = false;
}
}

if (! xmlHttp && typeof XMLHttpRequest!= ' undefined ') {
Create a XMLHttpRequest object for other non-Microsoft browsers
XmlHttp = new XMLHttpRequest ();
}
</script >

This process is divided into three steps, first we define a XMLHTTP to reference the created XMLHttpRequest. We then try to create the object in a Microsoft browser, first with the Msxml.xmlhttp object, and then try to create it with macrosoft.xmlhttp if it fails. Finally, we create this object for non-Microsoft browsers.
So, we've created a XMLHttpRequest object, so let's look at how to make a XMLHttpRequest request. function Executexmlhttprequest (Callback,url)
{
Handling non-Microsoft browsers
if (window. XMLHttpRequest)
{
Xhr=new XMLHttpRequest ();
Xhr.onreadystatechange = callback;
Xhr.open ("Get", url,true);
Xhr.send (NULL);
}
Dealing with Microsoft browsers
else if (window. ActiveXObject)
{
Xhr=new ActiveXObject ("Macrosoft"). XMLHttp ");
if (XHR)
{
Xhr.onreadystatechage=callback;
Xhr.open ("Get", url,true);
Xhr.send ();
}
}
Visible from above, execution XMLHttpRequest in fact, most of the code is still used to deal with the difference between the browser, for different browsers it still has to do different processing, but this looks very intuitive.
In the above code, the key is:
Xhr.onreadystatechage=callback It defines a callback function that is automatically executed once it is answered.
Xhr.open ("" Get ", url,true); True indicates that you want to execute the request asynchronously.

For callback, we have:
function Processajaxresponse () {
Status identified as Completed
if (xhr.readystate = = 4) {
is ready
if (Xhr.status = = 200) {
502 502 ' votes '). InnerHTML = Xhr.responsetext;
} else {
Alert ("There was a problem retrieving the XML data:
" +
Xhr.statustext);
}
}
}
That is, once the server finishes processing XMLHttpRequest and returns to the browser, the callback method assigned with Xhr.onreadystatechange will be invoked automatically.

This is almost the entire workflow of XMLHttpRequest, which first checks the overall state of the XMLHttpRequest and ensures that it is completed (readystatus=4), and then asks for the status of the request based on the server's settings, if everything is ready (status =200), then perform the actions that are required below.

Knowing the XMLHttpRequest workflow, we can see that XMLHttpRequest is completely used to send a request to the server, and its role is limited to this, but its role is the key to the entire AJAX implementation, because Ajax is nothing more than two processes, Make a request and respond to a request. And it's completely a client-side technology. And XMLHttpRequest is to handle the server-side and client communication issues so it is so important.
Now, we can probably get an idea of the fundamentals of Ajax. We can think of the server side as a data interface, it returns a plain text stream, of course, this text stream can be an XML format, can be HTML, can be JavaScript code, can be just a string. At this time, XMLHttpRequest to the server to request this page, the server side will write the results of the text to the page, which is the same as the normal web development process, the difference is that the client after the result is asynchronous, not directly displayed in the page, but first by JavaScript to deal with, And then display it on the page. As for the many Ajax controls that are popular today, such as Magicajax, you can return other data types such as datasets, just encapsulate the results of the process, and they don't make much difference in nature.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.