The ins and outs of Ajax

This is my blog in the park to write the first time blog, before all is not to write, in the garden learned a lot of things, now also want to write some of their own feelings to share a bit.

Ajax technology can be said to be the technical foundation of WEB2.0 applications, although software resellers and open source communities provide a lot of Ajax frameworks, we still need to understand the ins and outs of Ajax implementations.

The first thing to say is HTTP requests, because AJAX is based on HTTP requests, so Ajax has to start with an HTTP request. We know that the process of the Internet is the browser and the server for file transfer process, and they are able to transfer files are bound to comply with certain specifications, and the HTTP specification is the browser and server for file transfer of one of the specifications.

HTTP (Hyper Text Transfer Protocol) Hypertext Transfer Protocol, which regulates both the browser's request to the server and the server's response to the browser, so HTTP mainly consists of the request and response parts. The request mainly includes the request line, the request header and the request body three parts.

It is important to note that when a GET request is requested, the content of the request is stitched behind the URL, and the requested content is placed in the request body when the post is requested. There is a request in the form of a POST request in the request header to set Content-type this property and use GET request is not required.

The corresponding server response to the browser includes the corresponding line, response header and response body three parts

With the HTTP request, we can talk about Ajax, Ajax is not a new language but a comprehensive utilization of existing technologies. The essence is to communicate with the server asynchronously, based on the HTTP protocol. and Ajax is asynchronous JavaScript and XML four word abbreviation, asynchronous is asynchronous meaning, refers to the execution of a program does not block the execution of other programs, Its representation is that the order of execution of the program does not depend on the writing order of the program itself, but rather on synchronization. Ajax uses a built-in object XMLHttpRequest object built into a modern browser to asynchronously receive and send HTTP requests and corresponding information.

Let's take a look at the actual code to see how Ajax implements the data of the offspring with each other.

=====get=====//set the request lineXhr.open (' Get ', ' 02.php?name=zhang&age=18 '); //set the request header    //Get not set    //post must be set    //set the request body    //If a get null post wants to put the requested content insideXhr.send (NULL); =====post====//set the request lineXhr.open (' Post '); //set the request header    //Get not set    //post must be setXhr.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); //set the request body    //If a get null post wants to put the requested content insideXhr.send (' 02.php?name=zhang&age=18 ');

This makes use of the XMLHttpRequest object to implement a browser to the server once a request, the following is the processing response

// Monitor response status changes    function () {        if (xhr.status = = && Xhr.readystate = = 4 )            {//  Handle the content of the response when the status of the response is 4 HTTP with a status of 200                     }    }

Here are some of the properties of the XMLHttpRequest response

　　When an XMLHttpRequest object sends an HTTP request to the server, it undergoes several states: Waits until the request is processed, and then receives a response. In this way, the script responds correctly to various states the-xmlhttprequest object exposes a ReadyState property that describes the current state of the object, as shown in table 1.

Table　　 a list of ReadyState property values for the 1.XMLHttpRequest object.

ReadyState value	Describe
0	Describes an "uninitialized" state, in which a XMLHttpRequest object has been created, but has not yet been initialized.
1	Describes a "send" state; At this point, the code has called the XMLHttpRequest Open () method and XMLHttpRequest is ready to send a request to the server.
2	Describes a "send" state; At this point, a request has been sent to the server by means of the Send () method, but no response has yet been received.
3	Describes a "receiving" state where HTTP response header information has been received, but the body portion of the message has not been fully received at the end.
4	Describes a "loaded" state, at which time the response has been fully received.

onreadystatechange Events
the XMLHttpRequest object fires a ReadyStateChange event regardless of when the readystate value has changed. Where the onReadyStateChange property receives a EventListener value-indicates to the method that the object will be activated regardless of when the readystate value has changed.
ResponseText Property
This responsetext property contains the text content of the HTTP response received by the client. When the readystate value is 0, 1, or 2 o'clock, ResponseText contains an empty string. When the readystate value is 3 (receiving), the response contains the response information that the client has not yet completed. When ReadyState is 4 (loaded), the responsetext contains the complete response information.
Responsexml Property
This responsexml property is used to describe the XML response when a full HTTP response is received (ReadyState is 4), at which point the Content-type header specifies that the MIME (media) type is text/xml,application/ XML or End with +xml. If the Content-type header does not contain one of these media types, then the value of Responsexml is null. The value of the responsexml is also null whenever the readystate value is not 4.
In fact, this Responsexml property value is a document interface type object that describes the parsed document. If the document cannot be parsed (for example, if the document is not well-structured or does not support the corresponding character encoding of the document), then the value of Responsexml will be null.
Status Property
This Status property describes the HTTP status code and is of type short. Also, this status property is available only if the ReadyState value is 3 (in the receiving) or 4 (loaded). When the value of readystate is less than 3 o'clock attempting to access the status value throws an exception.
StatusText Property
This statustext property describes the HTTP status code text, and is only available if the ReadyState value is 3 or 4. Attempting to access the StatusText property when ReadyState is a different value throws an exception.

And here Ajax's "A" and "J" have already been said. Now there's an x not saying, we know that X is the meaning of XML, then what is XML, XML is a markup language, very similar to HTML, its purpose is to transfer data, with self-descriptive (fixed format of data), The following code is an example

　　

//// Be sure to have a root node // something in root can be customized <root>    <array>        <item>            <picture>apple</picture >            <oldPrice>100</oldPrice>            <newPrice>10</newPrice>        </item>        <item>            <picture>apple</picture>            <oldPrice>100</oldPrice>            < newprice>10</newprice>        </item>        <item>            <picture>apple</picture>            <oldPrice>100</oldPrice>            <newPrice>10</newPrice>        </item>    </array></root>

Grammar Rules

1. Must have a root element

2. No spaces, no numbers or. Start, case sensitive

3. No cross-nesting

4. Attribute double quotation marks (the browser is automatically corrected into double quotes)

5, special symbols to use the entity

6. Annotations are the same as HTML

Now that we've covered the Ajax four words, we've combined an integrated case with Ajax to render an XML data asynchronously on the page, as shown in the code below

　　

<!     DOCTYPE html>table{Border-Collapse:collapse;            } td,th{border:1px solid #ccc;            height:50px; Text-Align:center; padding:020px; }</style>//get Asynchronous Object    varXHR =NewXMLHttpRequest (); //set the request headerXhr.open (' Get ', ' 03.php '); //set the request bodyXhr.send (NULL); //Listening for response statusXhr.onreadystatechange =function(){        if(Xhr.readystate = = 4 && xhr.status = 200 ){            //Receive XML file            //Console.log (xhr.responsexml)            varXMLDom =Xhr.responsexml; //get the contents of the XML data            varItems = Xmldom.queryselectorall (' Item '); varRenderdom = Document.queryselector (' tbody ')); varrenderhtml = ' ';  for(vari = 0; i < items.length; i++ ){                //iterate through the data to get the contents of each array                varitem =Items[i]; varPicdom = Item.queryselector (' pic '); varOlddom = Item.queryselector (' Oldprice ')); varNewdom = Item.queryselector (' Newprice ')); //get the value in each tag                varPic =picdom.innerhtml; varOld =olddom.innerhtml; varNE =newdom.innerhtml; //concatenation of data values in XML into HTML tagsrenderhtml + = ' <tr> '; Renderhtml+ = ' <td> ' +pic+ ' </td> '; Renderhtml+ = ' <td> ' +old+ ' </td> '; Renderhtml+ = ' <td> ' +ne+ ' </td> '; Renderhtml+ = ' </tr> '; }            //Render to Pagerenderdom.innerhtml =renderhtml; }    }</script>
There is a whole explanation for the basic meaning of Ajax, but the XMLHttpRequest below IE6 is not provided but provides a activeobject ("Microsoft.XMLHTTP") attribute. If you want to be compatible with IE's early browser, make a simple judgment
    if (window. XMLHttpRequest) {                varnew  XMLHttpRequest ();                } eles {                var New ActiveXObject ("Micsoft.xmlhtttp")
　　
The ins and outs of Ajax