XHR对象详解

XHR是指XMLHttpRequest对象的缩写。是通过自己创建的用来承接ajax请求服务器返回数据的一个对象。IE5是第一款引入XHR对象的浏览器，在IE5中XHR对象是通过MSXML库中的一个ActiveX对象实现的。

 在理解xhr的用法的时候，我们可以参照xhr的原生写法这样更好理解，下面是AJAX请求的原生写法：

          var xhr = new XMLHttpRequest();
	      function getDatas(){
			 xhr.open('post','php/getAlarmDatas.php');
			 xhr.setRequestHeader('Content-type','application/x-www-form-urlencode');
			 xhr.send('name'+deviceName);
			 xhr.onreadystatechange = function(){
				if(xhr.status==200 && xhr.readyState==4){
				       alarms = xhr.responseText;
					}
				}
			}

使用xhr对象的时候，浏览器首先会检测原生的XHR是否存在，如果存在则返回它的新实例，如果原生对象不存在就检测ActiveX对象，如果都不存在，就抛出一个错误，然后我们可以使用如下方法创建XHR对象。

例如：

var xhr = new XMLHttpRequest();

要调用的第一个方法是open(),它接受三个参数：

1. 1. 要发送的请求类型
   2. 请求的URL,(即接口，必须是同源接口)
   3. 第三个表示是否异步发送请求的布尔值

例如：

xhr.open('post','php/getAlarmDatas.php');

但是，需要注意的是open不会真正发送一个请求，而是启动一个请求以备发送。

然后就会调用send方法，作为请求主题发送数据，如果不需要传递参数，也必须传入null，就像angular里即使没有参数也要传一个data参数,可以为空参数，但必须传。发送send之后，请求就会被分配给服务器，由于这次请求是同步的，Javascript代码会等到服相应之后把数据加到XHR对象的对应的属性上去。

xhr对象的属性简介如下：

responseText: 作为响应主体返回的文本
responseXML: 如果响应的内容类型是"text/xml"或者"application/xml",这个属性中将保存包含着响应数据的xml dom文档
status: 响应的http状态
statusText: http状态说明 
为了判断返回值是否正确，我们可以采用这种方法确认服务器端已经把数据给我们
 

xhr.open('post','php/getAlarmDatas.php',false);
			xhr.send(null);
			if((xhr.status>=200 && x.status < 300 || x.status ==304){
				alert(xhr.responseText);
			})else{
				alert('Request is unsuccessful'+xhr.status);
			}

我们一般安装这种方式处理请求和返回的内容，但是多数情况下，我们还需要发送异步请求，才可以让javascript继续执行而不必等待相应，此时可以检查XHR的readyState属性，该属性表示请求/响应过程中的当前活动节点。这个属性的可取的值如下：

0：未初始化，尚未调用open()方法

1：启动，已调用open()方法，但是尚未调用send()方法

2：发送，已调用send()方法，但是尚未接收到响应

3：接收，已经接收到部分响应数据

4：完成，已经接收到全部响应数据，而且已经在客户端使用了

因为我们一般发送的是javascript的异步请求，所以原生的数据返回正确的判定方法一般是
 

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

只要请求状态变化一次也就是onreadyState变化一次，就会触发onchangeStatechange变化一次，所以这个状态变化就会进行一次判断。在onreadyStateChange事件处理程序的中使用xhr对象而不是使用this对象，原因是onreadyStatechange事件处理程序的作用域问题，如果使用This对象，在有的浏览器中会导致函数执行失败，或者导致错误的产生，因此使用实际的XHR对象是比较实用的一种方式。
————————————————
版权声明：本文为CSDN博主「Alive_tree」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Alive_tree/article/details/86477694