In-depth understanding of the XHR object in the first part of the ajax series

ajax is the abbreviation of asynchronous javascript and XML. The Chinese translation is asynchronous javascript and XML. This technology can request additional data from the server without unloading the page, which will bring a better user experience. Those who are interested in ajax Friends, let’s take a look at the XHR object, the first article in the ajax series.

Previous words

Ajax is the abbreviation of asynchronous javascript and XML , Chinese translation is asynchronous javascript and XML. This technology can request additional data from the server without unloading the page, which will bring a better user experience. Although XML is in the name, ajax communication has nothing to do with the data format. The following will introduce the content of ajax in detail

Creation

## The core of ajax technology is the XMLHttpRequest object (XHR for short), which is composed of A feature first introduced by Microsoft and later implemented by other browser providers. XHR provides a fluent interface for sending requests to the server and parsing server responses. It can obtain more information from the server asynchronously, which means that after the user clicks, he can obtain new data without refreshing the page

　IE5 It 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 an XHR object is also called instantiating an XHR object. Because XMLHTTPRequest() is a constructor. The following is a compatible way of writing an XHR object

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

##Send a request

open()

When using an XHR object, the first method to be called is open(), which accepts 3 parameters: the type of request to be sent (" get", "post", etc.), the requested URL and a Boolean value indicating whether to send the request asynchronously

xhr.open("get","example.php", false);

　[Note]URL is relative to the current page where the code is executed, and can only send requests to URLs in the same domain using the same port and protocol. If the URL is any different from the page that initiated the request, a security error will occur.

#send()

The send() method receives a parameter, which is to be sent as the request body. The data. 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 response data will automatically fill in the properties of the XHR object, mainly including the following four properties

responseText: The text returned as the response body

responseXML: If the content type of the response is 'text/xml' or 'application/xml', this attribute will save the XML DOM document of the response data

status: The HTTP status of the response

statusText: Description of HTTP status

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

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

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

Asynchronous If you need to receive an asynchronous response, you need to detect the readyState attribute of the XHR object, which represents the current active stage of the request/response process. Possible values ​​for this attribute are as follows:

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

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

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

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

Whenever the readyState attribute value changes from one value to another, a readystatechange event will be triggered. This event can be used to detect the value of readyState after each state change. Typically, we are interested in the stage with a readyState value of 4 because all data is ready

[Note] The onreadystatechange event handler must be specified before calling open() to ensure cross-browser compatibility. Otherwise, it will not be able to receive the cases where the readyState attribute is 0 and 1

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

Instance

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

<button id="btn">获取信息</button>
<p id="result"></p>
<script>
btn.onclick = function(){
  //创建xhr对象
  var xhr;
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open(&#39;get&#39;,&#39;message.xml&#39;,true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

Through the demonstration of examples, we found that the content of the ajax front-end itself is not difficult. However, since ajax involves some back-end and network knowledge, it is not easy to learn. Future blog posts will gradually introduce the key contents of ajax in depth

The above is the first article of the in-depth understanding of ajax series introduced by the editor to the XHR object. I hope it will be helpful to everyone!

Related recommendations:

Detailed explanation of the simple implementation of AJAX paging effect

Ajax submit form and receive json method

Examples to explain the implementation of Ajax with a simple percentage progress bar

The above is the detailed content of In-depth understanding of the XHR object in the first part of the ajax series. For more information, please follow other related articles on the PHP Chinese website!