Ajax and XML Minimalist introduction

The AJAX full name asynchronous JavaScript and XML, which is asynchronous JavaScript and XML. It is a technology that uses JavaScript scripts to exchange data with the server without refreshing the entire page, unlike the traditional data exchange with the server, which is done only by the browser itself. It can improve the response speed of web pages and enhance the user experience.

The implementation of Ajax relies on a core object, namely: XMLHttpRequest. This object has three main properties:

1. Onreadystatechange:on start, of course, is to listen to a certain state, in fact, it listens to the server's response status.

2.readyState: Indicates the server's response status information, it has 0,1,2,3,4 these five values, generally we use more than 4, indicating that the request is complete. A change in the value of this property will trigger the onReadyStateChange event.

3.responsetext/responsexml: It represents the data retrieved from the server, if you get the TXT file from the server, use ResponseText, if you get an XML file please use Responsexml.

After you create the object, you can use it to interact with the server for data. As always, the way that Internet Explorer and other browsers create the object is different. IE uses ActiveX objects to create, while other browsers can create them directly. We first need to create a function to handle this incompatibility.

    functionmyxhr () {if(!window. XMLHttpRequest) {//If the XMLHttpRequest object is not supported            //try to create an object under IE (version slightly more ...). )            Try{                return NewActiveXObject (' msxml2.xmlhttp.6.0 '); }Catch(e) {Try{                return NewActiveXObject (' msxml2.xmlhttp.4.0 '); }Catch(e) {Try{                    return NewActiveXObject (' msxml2.xmlhttp.3.0 '); }Catch(e) {//If none are supported, the creation fails.                         return false; }                }            }        }        //Otherwise, create the XMLHttpRequest object directly        return NewXMLHttpRequest (); }

Once the object is created, it can be used to interact with the server, mainly using the object's two methods open (type,url,isblocking), and send (). The Open method represents the preparation of the data from the server, it has three parameters, the first type refers to the method of obtaining data from the server, usually get and post two ways (and of course, there are other ways), get represents the information from the server, get method is simpler and more common, Unless you want to send a lot of data to the server, you generally use get. The second parameter URL represents the location of the file you want to get in the server, which is a string. The third parameter represents synchronous or asynchronous fetching, which is a Boolean value that, if taken synchronously, writes true, and then blocks (blocking) The execution of JavaScript code after the server response is complete, which can affect subsequent page rendering if the network speed is too slow. So here we generally write false, which is asynchronous execution. When executed asynchronously, we can use the onReadyStateChange event to listen to the server's response and not affect the execution of the subsequent code. Example:

var new myxhr (); // Create a Xhr object // use the Get method to get the Book.xml file from the server in an asynchronous manner Xhr.open (' Get ', ' Book.xml ',false)

The format for data exchange with the server is mainly JSON and XML, where the XML is presented. XML full-scale Extensible Markup language, which is a member of the Markup language family (which means that a specific language-independent Dom method such as getElementsByTagName is also available in XML), unlike HTML, which is primarily used to display text on a Web page, XML is primarily used to store and exchange data. In addition, the tags in XML are custom, a typical XML document is this:

<!--Document Header Declaration -<?XML version= "1.0" encoding= "Iso-8859-1"?><!--One root node, note that the label signature is custom-defined -< Person><!--several child nodes can also be nested inside subnodes. -    <name>Sombody</name>    <Gender>Male</Gender></ Person>

Let's take a look at an example of how to asynchronously load the information in an XML document and add it to the HTML using AJAX.

/*
Example: Reading the ISBN node in book.xml from the server using AJAX
*/

functionGETISBN () {//Create a Xhr object        varXHR =Newmyxhr (); if(XHR) {//to request data from a server in Get modeXhr.open ("GET", "Book.xml",false); //Listener Server Response statusXhr.onreadystatechange =function(){                //start executing functions If the request is complete                if(Xhr.readystate = = 4){                    //retrieve the XML document from the server with the Responsexml property of XHR and assign it to the XmlDocument variable                    varXmlDocument =Xhr.responsexml; //get the text content of the ISBN node from XML using the common Dom method                    varISBN = Xmldocument.getelementsbytagname ("ISBN") [0].childnodes[0].nodevalue; //Add the acquired content to the HTML document                    varNEWP = document.createelement ("P"); Newp.innerhtml= "ISBN:" +ISBN;//Newp.createtextnodexDocument.body.appendChild (NEWP); }            }            //do not send data to the serverXhr.send (NULL); }        Else{            //throws an error if the XHR object creation fails            Throw NewError ("XMLHttpRequest not supported!"); }    }

This completes an AJAX request.

Attached: contents of Book.xml

<? XML version= "1.0" encoding= "Iso-8859-1" ?> <  Book >    < title > JavaScript Step by step</title>    <ISBN  >9780735624998</ISBN></book> 

(Beginner JavaScript, this is a summary of your own, please light spray)

Reference documents:

1.Jeremy Keith. JavaScript DOM Programming Art (Chinese second edition)

2. Ga. Ajax XMLHttpRequest The three properties of an object and the open and send methods. http://www.cnblogs.com/jianglan/archive/2011/07/20/2112098.html

3.Steve suehring. JavaScript from beginner to proficient (Chinese second edition)

4.w3cschool.xml Introduction. http://www.w3school.com.cn/xml/xml_intro.asp

Ajax and XML Minimalist introduction