Ajax and XMLHTTP principles

The Ajax|xml Ajax principle simply sends an asynchronous request to the server through the XMLHttpRequest object, obtains the data from the server, and then uses JavaScript to manipulate the DOM and update the page. One of the most critical steps is getting the request data from the server. To understand this process and principle, we must have an understanding of XMLHttpRequest. 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 have: onreadystatechange  event handlers that trigger events each time the state changes.  responseText     A string form that returns data from the server process.  responseXML     DOM-compliant document data objects returned from the server process.  status           Digital code returned from the server, such as common 404 (not Found) and 200 (ready)  status text       string information for accompanying status codes  readyState        Object state value 0 (uninitialized) object has been established, however, it has not yet been initialized (the open method has not been called) 1 (Initialization) object has been established, the Send Method 2 (send data) has not been invoked, but the current state and the HTTP header are unknown 3 (in data transfer) Received part of the data, because the response and HTTP headers are incomplete, then through Responsebody and responsetext to get some data error, 4 (completed) data received, Complete response data can be obtained by Responsexml and responsetext at this time    however, because of differences between browsers, create a XMLHttpRequest objectDifferent methods may be required. This difference is mainly reflected in IE and other browsers. The following is a relatively standard method for creating XMLHttpRequest objects.    function createxmlhttp ()    {     //non IE browser create XMLHttpRequest object      if (window. XMLHttpRequest)     {     xmlhttp=new XMLHttpRequest ();   }    //ie Browser to create XMLHttpRequest object      if window. ActiveXObject)     {    try    {     xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");        }    catch (E)      {    try{     xmlhttp=new activexobject ("MSXML2. XMLHTTP ");    }     catch (ex) {}   }   }   } function Ustbwuyi ()    {    var Data=document.getelementbyid ("username" ) .value;          Createxmlhttp ();        if (!xmlhttp)          {         alert ("Create XMLHTTP Object exception!") ");         return false;       }                xmlhttp.open ("POST", Url,false);         xmlhttp.onreadystatechange=function ()          {            if (xmlhttp.readystate==4)             {           document.getElementById ("user1"). Innerhtml= "Data is loading ...";              if (xmlhttp.status==200)               {              document.write (Xmlhttp.responsetext);             }                 }         }         Xmlhttp.send ();      } as shown above, the function first checks the overall state of the xmlhttprequest and guarantees that it is complete (readystatus=4), that is, the data has been sent. Then ask for the status of the request based on the server's settings, and if everything is ready (status=200), do what you need to do below. For the two methods of XMLHttpRequest, open and send, where the Open method specifies: A, the type of data submitted to the server, that is, post or get. b, the URL address of the request and the parameters passed. C, transmission mode, false to synchronous, true to asynchronous. The default is true. In the case of asynchronous communication (true), the client does not wait for a response from the server; if it is synchronous (false), the client waits until the server returns the message before performing another operation. We need to specify the synchronization according to the actual needs, in some pages, may issue multiple requests, even organized and planned to have a large scale of the high intensity request, the latter will cover the previous one, this time of course to specify the synchronization mode. The     send method is used to send the request.    know the XMLHttpRequest workflow, we can see that XMLHttpRequest is fully used to send a request to the server, its role is limited to this, but its role is the key to the implementation of the entire AJAX, Because Ajax is nothing more than two processes, making requests and responding to requests. 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 probably have an understanding of the principles 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.