原生ajax

ajax请求

function ajax(url,funSucc,funFail){
  //1.创建Ajax对象
  //用没有定义的变量->报错
  //用没有定义的方法->undefined
  if(window.XMLHttpRequest){
    //只兼容非ie6的浏览器
    var oAjax=new XMLHttpRequest();
}
  else{
    //ie6
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

  //2.连接服务器
  //异步:true
  oAjax.open('GET',url,true);
 
  //3.发送请求
  oAjax.send(null);

  //4.接收返回值
  oAjax.onreadystatechange=function(){
    if(oAjax.readyState==4 && oAjax.status==200){
      funSucc(oAjax.responseText);
      //alert(oAjax.responseText);//服务器返回的文本
    }
    else{
      if(funFail){funFail(oAjax.status);}//判断是否有失败函数才调用
    }
  }
}

阻止缓存

//url后面问号加时间函数，此时url在不断变化
'url?t=' + new Date().getTime(),...

XHR对象的用法

open() 
//启动一个请求
//接收三个参数：请求类型，请求的url,是否异步（true表示异步）

send()
//发送请求
//接收一个参数，即要作为请求主体发送的数据，若不需要则填入null

接收到响应后，响应的数据会自动填充XHR对象的属性：

responseText: 作为响应返回的文本

responseXML: 如果响应的内容类型是'text/xml'或者'application/xml',这个属性中将保存包含着响应数据的XML DOM文档

status: 响应的HTTP状态

statusText: HTTP状态的说明

readyState: 表示请求/响应过程的当前活动阶段
属性值：
0：未初始化，没有调用open()
1：启动，已经调用open()，尚未调用send() 
2：发送，已经调用send()，尚未收到响应
3：接收，已经接收到部分数据
4：完成，已经接收全部数据，可以在客户端使用了

每次readyState的值改变，都会触发一次readyStatechange事件
要在调用open()之前指定onreadyStatechange事件才能确保浏览器兼容

进度事件

有以下6个进度事件

loadstart:在接收到响应数据的第一个字节时触发

progress:在接收响应期间持续不断地触

error:在请求发生错误时触发

abort:在因为调用abort()方法而终止连接时触发

load:在接收到完整的响应数据时触发

loadend:在通信完成或者触发error、abort或load事件后触发

浏览器适用

ff,safari,chrome,ios的safari和安卓的webkit都支持

IE9-浏览器不支持以上事件(IE9浏览器仅支持load事件)

每个请求都从触发loadstart事件开始，接下来，通常每隔50毫秒左右触发一次progress事件，然后触发load、error、abort或timeout事件中的一个，最后以触发loadend事件结束

progress

progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、loaded和total。其中，lengthComputable是一个表示进度信息是否可用的布尔值，loaded表示已经接收的字节数，total表示根据Content-Length响应头部确定的预期字节数。有了这些信息，就可以为用户创建一个进度指示器了

为确保准确执行，必须在调用open()之前添加onprogress事件处理程序

xhr.onprogress = function(e){
    e = e || event;
    if (e.lengthComputable){
        result.innerHTML = "Received " + e.loaded + " of " + e.total + " bytes";
    }
};