The core of Ajax (Asynchronous Javascript + XML) technology is XMLHttpRequest对象, namely: XHR. Although the name contains XML, it only refers to this technology that can obtain data from the server without refreshing the page, and its communication has nothing to do with the data format, not necessarily XML data.
XMLHttpRequest object
IE7+, Firefox, Opera, Chrome and Safari all support native XHR objects. We can directly use the XMLHttpRequestconstructor to create XHR objects.
var xhr = new XMLHttpRequest();
Although the method of creating xhr is different in browsers of versions before IE7, but with the development of front-end technology today, there are few business requirements to support versions before IE7. Therefore, I skip this case here.
Usage of XHR
When using an XHR object, the first method to call is open()that it takes 3 parameters:
- The type of request to send, eg: get/post
- the requested url
- Whether to send the request asynchronously, this parameter is a boolean value
xhr.open('get', 'example.php', false)
Note: The call to the open() method does not actually send a request, it just initiates a request to be sent!
Also, you can only send requests to URLs in the same domain using the same port and protocol, otherwise, an error will occur.
After the open()method is executed, the method must be called again send()to actually initiate the ajax request.
xhr.open('get', 'example.txt', false);
xhr.send(null);The send() method accepts one parameter, namely: the data to be sent as the body of the request. If data does not need to be sent, it must be passed nullin because this parameter is required by some browsers.
The request in this example is synchronous, and the Javascript code will wait until the server responds before executing.
After receiving the response, the data of the response will automatically fill in the properties of the XHR object. The related properties are:
- responseText: The text to be returned as the response body.
- responseXML: If the content-type of the response is "text/xml" or "application/xml", then this attribute will hold the XML DOM document containing the response data.
- status: HTTP status of the response
- statusText: Description of the HTTP status
Regardless of the content type, the content of the response body will be saved to the responseTextattribute, and 非XML数据the value of the responseXML attribute will be null.
After receiving the response, generally speaking, it will first judge whether the status is 200, which is the sign of the success of the request. At this point, responseTextthe content of the property is ready and responseXMLcan be accessed if the content type is correct.
In addition, if the status code statusis 304, it means that the requested resource has not been modified, and the cache in the browser can be used directly. Of course, such a response is also valid.
if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ){
alert(xhr.responseText);
}
else{
alert('fail! status:' + xhr.status);
}Some browsers incorrectly report a 204 status code. The ActiveX version of XHR in IE will set 204 to 1223, while the native XHR in IE will normalize 204 to 200. Opera will report a status value of 0 when it gets a 204.
Original link: http://www.4455q.com/ajax-comet-javascript-chapter21-note1.html