Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of XHR objects in ajax, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Create

At the core of ajax technology is the XMLHttpRequest object (XHR), a feature first introduced by Microsoft and later provided by other browser providers. XHR provides a smooth interface for sending requests to the server and parsing server responses, and can get more information from the server asynchronously, meaning that users can get new data without having to refresh the page after clicking.

IE5 was the first browser to introduce XHR objects. In IE5, the XHR object is implemented through an ActiveX object in the MSXML library, while IE7+ and other standard browsers support native XHR objects

Creating a XHR object is also called instantiating a XHR object because XMLHTTPRequest () is a constructor. Here is a compatible way to create a XHR object

Var xhr;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ('Microsoft.XMLHTTP');}

Send a request

Open ()

When using the XHR object, the first method to call is open (), which takes three parameters: the type of request to be sent ("get", "post", and so on), the URL of the request, and a Boolean value indicating whether to send the request asynchronously.

Xhr.open ("get", "example.php", false)

[note] URL is the current page relative to which the code is executed, and requests can only be sent to URL in the same domain that use the same port and protocol. If there is any difference between the URL and the page that starts the request, a security error will be raised

Send ()

The send () method receives one parameter, the data to be sent as the body of the request. After calling the send () method, the request is dispatched to the server

Xhr.open ("get", "example.txt", false); xhr.send (null)

Receive response

After receiving the response, the data of the response is automatically populated with the properties of the XHR object. There are four main properties.

ResponseText: the text returned as the body of the response

ResponseXML: the XML DOM document that holds the response data in the attribute 'text/xml' or' application/xml', if the content type of the response is

Status: the HTTP status of the response

StatusText: description of the status of HTTP

After receiving the response, the first step is to check the status property to determine that the response has been returned successfully. In general, a HTTP status code of200 can be used as a sign of success. At this point, the content of the responseText attribute is ready, and if the content type is correct, responseXML can be accessed. In addition, a status code of 304 indicates that the requested resource has not been modified and can be used directly with the cached version in the browser; of course, it also means that the response is valid

Regardless of the content type, the content of the response body is saved to the responseText property, while for non-XML data, the value of the responseXML property will be null

If ((xhr.status > = 200 & & xhr.status < 300) | | xhr.status = = 304) {alert (xhr.responseText);} else {alert ('request was unsuccessful:' + xhr.status)

Async

If you need to receive an asynchronous response, you need to detect the readyState property of the XHR object, which represents the current active phase of the request / response process. The desirable values for this property are as follows:

0 (UNSENT): not initialized. The open () method has not been called yet

1 (OPENED): start. The open () method has been called, but the send () method has not been called

2 (HEADERS_RECEIVED): send. The send () method has been called and the header information has been received

3 (LOADING): receive. Partial response subject information has been received

4 (DONE): complete. All the response data has been received and can be used on the client

Whenever the value of the readyState property changes from one value to another, a readystatechange event is triggered. You can use this event to detect the value of readyState after each state change. Usually, we are interested in the stage where the readyState value is 4, because all the data is ready by then.

[note] you must specify an onreadystatechange event handler before calling open () to ensure cross-browser compatibility, otherwise you will not be able to receive cases where the readyState properties are 0 and 1

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

Example

Here is a small example to demonstrate the application of xhr objects in ajax

Get information btn.onclick = function () {/ / create xhr object var xhr; if (window.XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ('Microsoft.XMLHTTP');} / / asynchronously accept response xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {if (xhr.status = = 200) {/ / actual result [XSS _ clean] + = xhr.responseText } / / send request xhr.open ('get','message.xml',true); xhr.send ();}

/ / message.xml

Hello world

Thank you for reading this article carefully. I hope the article "sample Analysis of XHR objects in ajax" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.