AJAX机制详解以及跨域通信

2019-09-14 07:07:33于丽

  XMLHttpRequest对象的属性有5个:

属性 描述
responseText 作为响应主题被返回的文本
responseXML 如果相响应的是text/html或者application/xml类型的话,这个属性将保存着响应的XML文档
status http的响应状态码
statusText http状态的说明
readyState XMLHttpRequest对象的状态位 0 1 2 3 4 分别表示5种状态
timeout 设置超时时间,单位是ms.目前只有IE8+支持---尚未标准化(不推荐使用)

  XMLHttpRequest对象的事件属性onReadyStateChange:-----所有浏览器兼容

  该属性监听的是  XMLHttpRequest对象的readyState属性的变化:

  readyState的变化分别对应如下状态:

  0:尚未初始化。未调用open()之前

  1:启动。调用open()之后,但是未调用send();

  2:发送。调用send()但是尚未得到响应。

  3:正在接收数据。刚接收到响应数据开始到接收完成之前。

  4: 完成。数据接收完成。

xhr.onreadystatechange = function () {
 if (xhr.readyState == 4) {
  if (xhr.status >= 200 && xhr.status <== 300 || xhr.status == 304) {
   alert(xhr.responseText);
   //处理接收的数据
  } else {
   //请求失败,未得到响应数据
  }
 }
}; //补充说明:注册事件必须发生在send()以前

XMLHttpRequest对象的事件属性ontimeout -----仅限IE8+,不过最新的主流高版本浏览器也已经实现(不推荐使用)

xhr.timeout=1000;//一秒钟

xhr.ontimeout=functon(){
  //处理代码
  ......
}
  这种使用方式有个问题需要注意,就是在超时之后,在接收到数据后仍然会触发onreadystatechange事件,如果在处理onreadychange事件时访问xhr.status属性,会出错。所以我们在访问该属性时需要做一下try{}catch处理。但是,因为这个属性暂不兼容,所有我们就不重点讲了。

XMLHttpRequest对象的事件属性onload onerror onloadstar onbort onprogress:

                                                                                                   -----非IE浏览器和IE 10+已实现

       onload在IE8以上可以实现,大部分事件根据readySate变化均可以实现,以上事件只不过是方便使用而已。

  onload和onprogress 这两种事件分别对应着readyState=4和readyState=3的情况,使用方式分别如下: