Ajax Learning notes Collation _ajax related

Ajax:asynchronous JavaScript and XML, asynchronous JS scripts and XML, commonly used to implement the local asynchronous refresh of the page, to improve the user experience is a great help. XML has an advantage in multiple languages, but Ajax technology actually uses JSON objects rather than XML to process data.

Ajax history .... Understanding Sexual knowledge

Ajax belongs to the Web front-end development technology, and JavaScript has an unusually close connection. Ajax is a technology that realizes asynchronous communication without refreshing, and this technology can be implemented in many ways. The originator of the browser Netscape (Netscape) first invented the LiveScript scripting language, to enrich the form of Web page elements, so that the Web page can show dynamic effects. After the subsequent revisions to the birth of the JavaScript language, Microsoft (Microsoft) Company also saw the prospects of the Internet, began to dabble in the Internet industry, launched a JScript language, unfortunately no JavaScript mature, development retardation. Ultimately, Microsoft's commitment to the Internet has contributed to the long, tortuous process of MS's acquisition of the NS.

In this case, the Dynamic HTML language (dynamically Hyper Text Markup Language) is where JavaScript is placed in the element nodes of the DOM tree, providing dynamic display behavior for the elements.

Ajax Code Ideas

Create a Request object

Configure the Request object and send it to the server

Server answer Request Object

(1) Create the Request object as an object to communicate with the server:

function Createrequest () {
try{
var request=new xmlhttprequest ();
} catch (tryms) {
try{
request=new activexobject ("msxml2.xmlhttp");
} catch (otherms) {
try{
request=new activexobject ("Microsoft.XMLHTTP");
} catch (Failed) {
request=null
}}} return request;
}

Note: ActiveXObject is a Microsoft-specific programming object, and there are two different versions supported separately by different browsers. XMLHTTP is a set of APIs that can transmit or receive XML and other data through the HTTP protocol in scripting languages such as JavaScript.

When the request object is obtained, it has such posting attributes:

Commonly used are onreadystatechange,readystate,responsetext,status.

(2) Configure the Request object and send it to the server:

var request=createrequest ();
Request.open ("Get", url,true);
Request.onreadystatechange=showresponse;
Request.send (NULL);

The Open,send method comes from the prototype XMLHttpRequest of the Request object and opens __proto__:xmlhttprequest to see:

The open () method has three parameters, the first is the method used to send the request (get or post, the difference is summed up later), the second is to specify the URL of the server-side script (the file can be any type of file), and the third parameter to specify whether to do asynchronous processing (default true asynchronous)

The Send () method will send the request to the server.

I noticed here, Request.onreadystatechange=showresponse, that the location of the code is different, and the response content of the console output is different. Come to think of it too, the callback function to join the task queue is different for sure output different Ah, like now this position,

Request.onreadystatechange=showresponse before send after open, when the code resolves to request.onreadystatechange=showresponse; At this point the Readystates=1 (request has been established with the server), then when the readystates from 1 to 2, the callback function Showresponse join the task queue waiting to be executed, readystate from 2 to 3, The callback function showresponse the second time to join the task queue, readystate from 3 to 4, and the callback function joins the queue again. So when the main code is finished, the console outputs "request sent, Server received, send after", "request is processing", "request completed"; it does:

(3) The server answers the request object, JS can process the response content:

function Showresponse () {
if (request.readystate==0) {
console.log (' request not initialized, before calling Open ');
} else if (request.readystate==1) {
console.log (' request has been made, server connection established, before send ' after Open ');
} else if (request.readystate==2) {
console.log (' request sent, server received, send ');
} else if (request.readystate==3) {
Console.log (' request is processing ');
} else if (request.readystate==4) {
console.log (' request completed ');
if (request.status==200) {
//process request.responsetext;
}
}
}

The above code is only to track readystate changes, the actual project code is not so much. Below is the actual main code:

function Showresponse () {
if (request.readystate==4) {
if (request.status==200) {
// Processing request.responsetext;
}
}

Ps:ajax Solve what problem

As we all know, when a client requests a page from a server, the server first dynamically calculates and generates the page, and then sends it to the client. The client browser compiles and renders the page sequentially.

In the absence of Ajax: If the page has a user validation control, then when the client browser renders the user validation control, it waits for the server to validate the results before continuing to render the page elements. This validation process is usually done by reading the database and so on, which is called the synchronization method. And this way, will cause the Web page to appear the suspended animation state.

After using Ajax: The same is the validation control, the client submits the validation request and continues to render the other elements sequentially. When the validation results are obtained, JavaScript modifies the in-memory DOM object after the client and presents it to the user (note: This modifies only the DOM object in memory and the paging file received by the client is not modified). Thus, in an asynchronous manner, there is no suspended animation, and the client also saves the time it costs to wait for the server to return results.