Ajax总结

标签：

var request = null;
function getXMLHttpRequest(){
     if(window.XMLHttpRequest===undefined){
          try{
               request = new ActiveXObject(‘Msxml2.XMLHTTP.6.0‘);
          }catch(e){
               request = new ActiveXObject(‘Msxml2.XMLHTTP.3.0‘);
          }
     }else{
          if(window.XMLHttpRequest){
               request = new XMLHttpRequest();
          }else{
               return ‘浏览器不支持‘
          }
     }
}
//当给open方法传递第三个参数为false时
//进入同步模式  open方法会阻塞  直至status返回状态码
//此时不需要有onreadystatechange事件
getXMLHttpRequest();
//发送请求的三个过程
request.open(‘GET‘,‘my.html‘);
request.setRequestHeader(‘Content-Type‘,‘text/plain‘);
//send里边发送的是请求正文
request.send(null);

//请求发送完成后进入异步监听状态
//几个有用的方法和属性
//1.status statusText返回相应状态码
//2.getResponseHeader() getAllResponseHeaders()
//3.onstatechange事件
//4.readyState  当前的请求状态
//5.responseText  responseXML得到文本类型的返回   得到document类型的返回
request.onstatechange = function(){
     if(request.status==200 && request.readyState ==4){
          //得到响应头并得到响应正文的类型
          var responseType = resquest.getResponstHeader(‘Content-Type‘);

          if(responseType.match(‘/^text/‘)){
               console.log(resquest.responseText);
          }
     }
}


//XHR2中新增的事件与属性
request.onloadstart = function(){//该方法会在调用send()后触发
     console.log(‘开始发送请求‘);
}

request.onprogress = function(event){
     console.log(‘请求进行中‘);

     if(event.lengthComputable){
          var loaded = event.loaded;//得到已经发送给服务器的数据长度
          var total = event.total；//待发送的数据总长度
          console.log(loaded/total);
     }
}
//请求发送完成
request.onload = function(){
     console.log(‘请求结束‘);
     if(request.status==200){//请
          console.log(‘正确的得到响应‘);
     }
}


//3个请求出问题的事件
request.ontimeout = function(){
     console.log(‘请求超时‘);
}

request.onabort = function(){
     console.log(‘请求终止‘);
}
request.onerror = function(){
     console.log(‘请求出错啦‘);
}

Ajax总结

标签：

原文地址：http://www.cnblogs.com/gsLiu/p/4823220.html