Ajax_02之XHR发起异步请求

1、Ajax:
 AJAX:Asynchronous Javascript And Xml,异步的JS和XML;
 同步请求:地址栏输入URL、链接跳转、表单提交……
 异步请求:使用Ajax发起,底层使用XMLHttpRequest对象;
2、XHR的创建:
 var xhr=null;
 if(window.XMLHttpRequest){xhr=new XMLHttpRequest();//新IE及其它}
 else{xhr=new ActiveXObject('Microsoft.XMLHTTP');//老IE}
3、XMLHttpRequest对象的常用成员:
 ①成员属性:
  readyState:int,初始值0;
   0——UNSEND——请求消息未发送;1——OPENED——XHR已打开到服务器的链接;2——HEADERS_RECEIVED——XHR已经接收到响应消息起始行和头部;3——LOADING——XHR正在加载响应消息主体;4——DONE——XHR已经完成响应消息;
  responseText:初始值"",readyState值为3时开始有响应消息主体文本;
  responseXML:初始值null,readyState值为3时有响应消息主题内容——XML DOM树对象;
  status:初始值0,保存响应状态码,readyState值为2时开始有值;
  statusText:初始值"",保存响应消息原因短句,readyState值为2开始有值;
 ②成员事件:
  onreadystatechange:每次readyState值发生改变就触发;
 ③成员方法:
  open(method,url):打开到服务器的连接;
  send():发送请求消息;
  setRequestHeader(name,value):设置请求消息头部;
  getAllResponseHeaders():获取所有的响应消息头部;
  getResponseHeader(name):获取某个响应消息头部;
4、XHR对象发起异步请求步骤:
 ①创建XHR对象:
  var xhr=new XMLHttpReponse();
 ②监听XHR就绪状态改变事件:
  xhr.onreadystatechange=function(){}
 ③连接到服务器:
  xhr.open(method,url,isAsync);
 ④发起请求消息:
  xhr.send(data);
5、XHR发起异步的HTTP GET请求:
 ①创建XHR对象:
  var xhr=new XMLHttpResponse();
 ②监听XHR就绪状态改变事件
  xhr.onreadystatechange=function(){
   if(xhr.readystate===4){
    if(xhr.status===200){doResponse(xhr);}
    else{alert("响应完成,但有问题");}
   }
  }
 ③连接到服务器
  xhr.open('GET','x.php?k=v&k=v',true);
 ④发起请求消息
  xhr.send(null);
6、XHR发起异步HTTP POST请求:
 ①创建XHR对象:
  var xhr=new XMLHttpResponse();
 ②监听XHR就绪状态改变事件
  xhr.onreadystatechange=function(){
   if(xhr.readyState===4){
    if(xhr.status===200){doResponse(xhr);}
    else{alert("响应完成,但有问题");}
   }
  }
 ③连接到服务器
  xhr.open('POST','x.php',true);
 ④修改请求消息头部
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 ⑤发起请求消息
  xhr.send('k=v&k=v');

posted @ 2016-11-09 13:28  Jupiter258  阅读(730)  评论(0编辑  收藏  举报