9. Lesson 9: AJAX Principles and Practices (Quick Start)

1. Once in a wild era: Only "forms and hyperlinks" can be used for client-to-server submission, which may cause page re-loading problems. The real-time page has only a few changes, it can only be repeated.

2. If you can send an interactive request and receive response from the server) to an "object", let the object perform the following work in the background using an independent thread: "request, wait for the response data, respond to the server's response, and modify the current page locally. This avoids the problem of "Refresh all pages". This requirement is the AJAX background.

3. What is this object?

Class Name: XMLHttpRequest

Method for generating objects: var xhr = new XMLHttpRequest ();

Jianghu status: called AJAX "engine"

Degree of standardization: accepted by mainstream browsers, but not IE6 or earlier versions)

Request sending method: xhr. send ();

4. Where to send and what to send?

Var xhr = new XMLHttpRequest (); // to which and what? Xhr. send (null );

Before sending the request, set the parameters to describe the request details:

Xhr. open ("GET", "url? Parameter 1 = value 1 & Parameter 2 = value 2 ");

The current Code is as follows:

Var xhr = new XMLHttpRequest (); xhr. open ("GET", "url? Parameter 1 = value 1 & Parameter 2 = value 2 "); xhr. send (null );

Now you can send a request to the server with parameters.

5. What should I do if the server's response data is sent to the client?

Capture an "Event" onreadystatechange of the xhr object and bind it with a "callback function"

Xhr. onreadystatechange = function () {// Process Code}

When the server responds to data, the readyState of the xhr object changes to 0-1-2-3-4, and the final value is 4), and each change calls "processing code ", obviously, this is unnecessary. Let's make some improvements to reduce the number of callbacks.

Xhr. onreadystatechange = function () {if (readyState = 4) {// final processing code }}

But where is the server data?

In the responseText member variable of xhr, our code is improved as follows:

xhr.onreadystatechange=function(){   if(readyState==4){        alert(xhr.responseText);    }}

6. The complete code and comments are listed below.

// New xhr object var xhr = new XMLHttpRequest (); // sets the working parameter xhr. open ("GET", "url? Parameter 1 = value 1 & Parameter 2 = value 2 "); // registers the callback function xhr. onreadystatechange = function () {if (readyState = 4) {alert (xhr. responseText) ;}}// send the request xhr. send (null );