In-depth understanding of ajax's XHR objects

This time I will bring you an in-depth understanding of the XHR object of ajax. What are the things to note when using the XHR object of ajax? The following is a practical case, let’s take a look.

The previous words 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. 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 was first introduced by Microsoft A feature that other browser providers later provided identical implementations of. 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 URL of the request and whether to send the request asynchronously The Boolean value

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

[Note] The URL is relative to the current page where the code is executed, and requests can only be sent 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 4 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 store the XML DOM document of the response data

status: HTTP status of the response

statusText: Description of the HTTP status

After receiving the response , the first step is to check the status attribute to determine that the response has been returned successfully. Generally speaking,

HTTP status code

of 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 necessary What is received is an asynchronous response, which requires detecting 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

　　只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

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

实例

　　下面以一个小实例来演示ajax中xhr对象的应用

<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('Microsoft.XMLHTTP');
  }
  //异步接受响应
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        //实际操作
        result.innerHTML += xhr.responseText;
      }
    }
  }
  //发送请求
  xhr.open('get','message.xml',true);
  xhr.send();
}
</script>

//message.xml

<p>hello world</p>

最后

　　通过实例的演示发现，ajax前端本身的内容并不难。但是，由于ajax涉及到一些后端及网络的知识，使得学起来不是很容易。以后的博文将逐步深入地介绍ajax的重点内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX的队列请求如何实现（附代码）

pushState+Ajax实现无刷新的页面切换

The above is the detailed content of In-depth understanding of ajax's XHR objects. For more information, please follow other related articles on the PHP Chinese website!