标签：端口 端口和协议 通信 事件 情况 检测 active error 有一个
在XHR出现之前，Ajax的通信必须借助一些hack手段来实现，大多是使用隐藏的框架或内嵌框架。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。虽然名字中包含XML成分，但Ajax通信与数据格式无关；这种技术就是无需刷新页面即可从服务器取得数据，但不一定是XML数据。人们也通常将这种技术成为远程脚本。
XMLHttpRequest对象
IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXMLHttp.6.0。要使用MSXML库中的XHR对象，需要像第18章讨论创建XML文档时一样，编写一个函数，例如：
// 适用于IE7之前版本 //此方法会返回一个XHR对象 function createXHR(){ if(typeof arguments.callee.activeXString!="string"){//检测函数体的自定义属性activeXString的值不是string类型，因为后面会自定义这个属性，并为其赋值 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i, len; for(i=0,len=versions.length;i<len;i++){ try{ new ActiveXObject(versions[i]);//创建一个ActiveX类型的一个实例（需要版本号），若不支持这个版本会报错 arguments.callee.activeXString=versions[i];//为函数体自定义activeXString属性，并将版本号赋值给它 break; }catch(ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); }
IE7+、firefox、opera、chrome、safari都支持XHR对象，在这些浏览器中创建XHR对象要像下面这样使用：
var xhr=new XMLHttpRequest();
然后我们就可以将IE7之前的和IE7之后的封装成一个跨浏览器创建XHR对象的方法，适合任何浏览器任何版本！！
function createXHR(){ if(typeof XMLHttpRequest!="undefined"){//检测是否支持XMLHttpRequest原生对象 return new XMLHttpRequest(); }else if(typeof ActiveXObject!="undefined"){ if(typeof arguments.callee.activeXString!="string"){//检测函数体的自定义属性activeXString的值不是string类型，因为后面会自定义这个属性，并为其赋值 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i, len; for(i=0,len=versions.length;i<len;i++){ try{ new ActiveXObject(versions[i]);//创建一个ActiveX类型的一个实例（需要版本号），若不支持这个版本会报错 arguments.callee.activeXString=versions[i];//为函数体自定义activeXString属性，并将版本号赋值给它 break; }catch(ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("No XHR object available."); } }
使用：
var xhr=createXHR();
XHR对象的用法
在使用XHR对象时，要调用的第一个方法是open（），它接收3个参数：要发送的请求的类型（get、post等等）、请求的URL和表示是否异步发送请求的布尔值。：
xhr.open("get","example.php",false);
这行代码会启动一个针对example.php的GET请求。有关这行代码，需要说明两点：一是URL相对于执行代码的当前页面（当然也可以用绝对路径）；二是调用open（）方法并不会真正发送请求，而只是启动一个请求以备发送。
注意：只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。
要发送特定的请求，必须像下面这样调用send（）方法：
xhr.send(null);
这里的send（）方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必要的。调用send（）之后，请求就会被分派到服务器。
由于这次请求是同步的，javascript代码会等到服务器响应之后再继续执行。在收到响应之后，响应的数据就会自动填充XHR对象的属性，相关属性简介如下：
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是“text/xml”或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。
status：响应的HTTP状态。
statusText：HTTP状态说明。
在接收到响应之后，第一步是检测status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，reponseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。为确保接收到适应的响应，应该像下面这样检查上述两种状态代码：
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ console.log(xhr.responseText); }else{ console.log("Request was unsuccessful:"+xhr.status); }
无论内容类型是什么，响应主体的内容都会保存到responseText属性中；而对于非XML数据而言，responseXML属性的值将为null。
像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让javascript代码继续执行，而不必等待响应。此时可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：
0：未初始化。尚未调用open（）方法。
1：启动。已经调用open（）方法，但尚未调用send（）方法。
2：发送。已经调用send（）方法，但尚未接收到响应。
3：接收，已经接收到部分响应数据。
4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性值有一个值变成另一个值，都会触发一下readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常我们只对readyState的值为4的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在地哦啊用open（）之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性，例如：
var xhr=createXHR(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ console.log(xhr.responseText); }else{ console.log("Request was unsuccessful:"+xhr.status); } } } xhr.open("get","example.php",false); xhr.send(null);
另外，在接收到响应之前还可以调用abort（）方法来取消异步请求：
xhr.abort();
调用这个方法之后，XHR对象会停止触发事件，而且也不允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。
标签：端口 端口和协议 通信 事件 情况 检测 active error 有一个
原文地址：https://www.cnblogs.com/fqh123/p/10624832.html
