通过XMLHttpRequest,ActiveXObject实现ajax请求

今天学习了原生的ajax请求。我将涉及到的ajax请求方法封装成了一个对象：

 
  var xhr={ 
  
    getXHR: 
  function(){ 
  
         
  var XHR =  
  null; 
  
         
  if( 
  typeof window.ActiveXObject != 'undefined'){ 
  
            XHR = xhr.createActiveXObject(); 
  
        } 
  else{ 
  
            XHR = xhr.createStandardXHR(); 
  
        } 
  
         
  return XHR; 
  
    }, 
  
    createActiveXObject: 
  function(){ 
  
         
  try{ 
  
             
  return  
  new window.ActiveXObject("Mscrosoft.XMLHttp"); 
  
        } 
  catch(e){} 
  
    }, 
  
    createStandardXHR: 
  function(){ 
  
         
  try{ 
  
             
  return  
  new window.XMLHttpRequest(); 
  
        } 
  catch(e){} 
  
    }, 
  
 
  
    onreadystatechange: 
  function(xhr,callback){ 
  
         
  if(!callback){ 
  return;} 
  
         
  if(xhr.readyState == 4){ 
  
             
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
  
                callback(xhr.responseText); 
  
            } 
  
        } 
  
    }, 
  
     
  // 
  IE8+ 
  
    ontimeout: 
  function(callback){ 
  
         
  if(!callback){ 
  return;} 
  
        callback(); 
  
    }, 
  
    onprogress: 
  function(event,callback){ 
  
        console.log("dsss"); 
  
         
  if(!callback){ 
  return;} 
  
        callback(event); 
  
    } 
  
}; 
 

 

发送一个请求：

 
  var XHR = xhr.getXHR(); 
  
    XHR.onreadystatechange=xhr.onreadystatechange( 
  function(data){ 
  
    console.log(data); 
  
    }); 
  
 
  
    XHR.timeout=10000; 
  
 
  
    XHR.ontimeout = xhr.ontimeout( 
  function(){ 
  
        alert("timeout"); 
  
    }); 
  
 
  
    XHR.onprogress = xhr.onprogress( 
  function(event){ 
  
        console.log(event.totalSize); 
  
    }); 
  
 
  
    XHR.open("get","url", 
  true); 
  
    XHR.send( 
  null); 
 

open方法接收三个参数，请求类型，请求url，是否是异步。

当为异步请求时，XHR的readystate属性有以下属性值：

当为0时，即表示没有调用open()方法；

当为1时，此时已经调用了open()方法；

当为2时，此时已经调用了send()方法；

当为3时，此时已经有部门的数据相应了；

当为4时，此时数据已经全部相应，而且可以在客户端使用了；

 

每次readyState的值改变，都会触发一次onreadystatechange事件，因此要在调用open()之前指定onreadystatechange事件以便判断是否已经响应完成且可以使用数据了。

对onreadystatechange事件的处理程序为：

 

    onreadystatechange: 
  function(xhr,callback){ 
  
         
  if(!callback){ 
  return;} 
  
         
  if(xhr.readyState == 4){ 
  
             
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
  
                callback(xhr.responseText); 
  
            } 
  
        } 
  
    }, 
 

首选检测是否已经接收了全部响应数据，因此需要判断xhr.readyState的值是否为4；

当响应完成后，响应结果存在多种，有的是500失败了，有的是404未找到等等。因此需要根据返回的状态status的值来判断响应是否成功。当status为304时，表示的是该资源缓存了，直接取的缓存数据。

 

XHR.send(null) ：发送请求，当没有参数传递时，参数为null;当为get请求时，携带的参数需要通过encodeURIComponent进行编码。

也可以自定义请求的头部信息，在send()与open()方法之间进行设置：

XHR.sendRequestHeader(key,value);