JavaScript Learning Notes (vii)--AJAX

Ajax = Asynchronous JavaScript and XML (a subset of standard generic markup languages)

Ajax is a technique for creating fast, Dynamic Web pages. Ajax enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page .

First, XMLHttpRequest Object

The core of Ajax technology is the XMLHttpRequest object

All modern browsers support XMLHttpRequest (IE5 and IE6 use activexobject)

syntax -syntax for creating XMLHttpRequest objects:

var = new XMLHttpRequest ();

In IE5, IE6:

var = new ActiveXObject ("Microsoft.XMLHTTP");

check whether the browser supports XMLHttpRequest objects :

var xmlhttp;

if (window. XMLHttpRequest) {

XMLHTTP = new XMLHttpRequest ();

} else {

XMLHTTP = new ActiveXObject ("Microsoft.XMLHTTP");

}

Second, the use of XMLHttpRequest

1. Send a request to the server

Methods: ①open (method,url,async)-calling the Open method does not actually send the request, just initiates a request for sending.

method-request type (GET request, POST request)

The location of the url-file on the server

async-whether the request is processed asynchronously (true-asynchronous; false-synchronous)

②send (String)-sends the request to the server

Comparison of Ps:get and post requests

①get requests are the most common types of requests, simpler and faster, most of which can be used.

And from a performance point of view, to send the same data meter, get requests can reach up to twice times the speed of the POST request.

②post requests are generally used in the following situations:

A. cache files cannot be used

B. Sending large amounts of data to the server

C, when sending a user input that contains unknown characters

2. Properties of the Xhr object:

responsetext: Gets the response data in the form of a string.

responsexml: Gets the response data in XML form.

If the content type of the response is "text/xml" or "Application/xml", the XML DOM document containing the response data will be saved in this property.

Status: The HTTP status of the response. (Example: 202: "OK"; 404: Page not found)

statustext: Description of the HTTP status.

onreadystatechange Events

readyState: 0-uninitialized;

1-Start: The Open () method has been called and the Send () method has not been called;

2-Send: Call the Send () method, but has not received a response

3-Acceptance: Partial response data has been received;

4-Done: All response data has been received and can be used again by the client.

The onreadystatechange event is triggered whenever the value of the ReadyState property is changed from one value to another.

When readystate equals 4 and the status is 200, the response is ready:

That is: if (xmlhttp.readystate = = 4 && xmlhttp.status ==200) {

document.getElementById ("Mydiv"). Innerhtml=xmlhttp.responsetext;

}       

HTTP status code:

100-199 is used to specify certain actions that the client should be corresponding.
200-299 is used to indicate a successful request.
300-399 is used for files that have been moved and is often included in the locator header information to specify the new address information.
400-499 is used to indicate client-side errors.
500-599 is used to support server errors.

Common Status Codes:

200-Success, everything is OK

304-The requested resource has not been modified and can be used directly from the cached version in the browser

400-Error request

401-Not authorized

403-Forbidden

404-Not Found

500-Internal Server error

3. HTTP header information

Use the setrequestheader (header,value) method to set the custom request header information, two parameters: the header field name and the value of the header field.

setRequestHeader () must be called before the Open () method is called and before the Send () method is called.

Call the getResponseHeader () method of the Xhr object and pass in the header field name to get the corresponding response header information.

Call the Getallresponseheader () method to get a long string containing all header information

Example: var myheader = Xhr.getresponsheader ("MyHeader");

var allheader = Xhr.getallresponseheader ();

Example: GET request

Example: POST Request

JavaScript Learning Notes (vii)--AJAX