攻略ajax

最近在做项目，是一个后台管理系统，需要很多前后台的数据交互。其中都是用到了ajax的异步交互。最开始接触 是直接使用 jquery ajax ，是一个比较方便的框架，使用简单。无需知道原理  直接  $.get();/$.post(); 就可以实现数据交互。

但是当我需要实现一个进度条的功能时，我就一脸懵逼了。跟师兄要了实现进度条的代码，他用的都是原生的ajax，鉴于我没有学习过原生ajax，而是直接使用jquery ajax，师兄给我的代码我看的一脸懵逼。只觉得很复杂看不懂。

在网上找了很多资料。包括有jquery的很多插件可以实现这功能，但是 奈何功力尚浅，其中的原理都不懂，便不知如何使用。

拿了一个函数直接生搬硬套，却没有达到我想要的效果。去请教师兄，师兄跟我讲

“你不能为了做项目而做项目，我给你的代码，都是原生的，这些都是最好的。这其中的原理你要懂，这些都是很简单的代码……”

师兄也点醒了我。我也意识到自己的问题，觉得自己太浮躁。很多基础都还没打牢，基本的原理都不是很理解，就开始使用框架，这确实是一个坏习惯。顿时感觉羞愧难当，自己不是一个合格的程序员。

师兄给了我一个网址，是ajax的学习视频。我决定用一天时间看完ajax，不求精通，只求能够理解其中的原理。在以后的学习路上，慢慢提升。脚踏实地，才能敲出朴实而健壮的代码。

在这里，十分感谢师兄对我的谆谆教诲。或许，每个人的学习路上都需要有那么一个好的导师，为你指明方向。

 

下面，是我的学习笔记。

 

Ajax的核心

XMLHttpRequest对象

1.创建对象 var xhr=new XMLHttpRequest();

 

2.启动请求：xhr.open(“post”,url,true);

post/get表示请求类型；url；true/false表示是否异步发送请求

 发送请求：xhr.send(null);

 

3.请求得到响应后，响应的数据会自动填充xhr对象的属性

属性：

responseText 作为响应主体被返回的文本

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

status  响应的HTTP状态200成功、304请求资源未被修改，可以使用缓存

statusText   HTTP状态的说明

readyState 表示请求/响应过程的当前活动阶段

0：未初始化，尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接收到部分数据

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

timeout 表示请求在等待响应多少毫秒之后就终止

 

4.事件（方法）：

onreadystatechange()  只要readystate属性的值产生变化，都会触发一次onreadystatechange事件。通常我们只 对readystate值为4的阶段 感兴趣，因为此时所有的数据准备就绪。不过，必须在调用 open()之前指定  onreadystatechange()事件处理程序

open(“post”,url,true)

setRequestHeader() 设置自定义的请求头部信息

send(null)

getResponseHeader(“参数字段”) 传入头部字段名称，获得相应的响应头部信息

getAllResponseHeaders() 取得一个包含所有头部信息的长字符串

abort() 取消异步请求

overrideMineType() 用于重写XHR响应的MINE类型

 

5.get请求

常用于向服务器查询某些信息，必要时也可以将查询的字符串参数追加到url的末尾。

对于XHR而言，位于传入open()方法的url末尾的查询字符串必须使用encodeURIComponent()进行编码

function addURLParam(url,name,value)

{

url+=(url.indexOf(“?”)= = -1 ? “?” : “&”);

url+=encodeURIComponent(name)+ “=” + encodeURIComponent(value);

return url;

}

 

6.post请求

常用于想服务器发送应该被保存的数据

发送post()请求需要向send()方法中传入某些数据。由于XHR设计主要是为了处理ＸＭＬ，当需要提交表单信息是，需要将头部信息Ｃｏｎｔｅｎｔ－Ｔｙｐｅ

设为为ａｐｐｌｉｃａｔｉｏｎ／ｘ－ｗｗｗ－ｆｏｒｍ－ｕｒｌｅｎｃｏｄｅｄ

其次，以适当的格式创建一个字符串

var form=document.getElementById(“user-info”);

xhr.send(serialize(form));//将表单user-info中的数据序列化之后发送给服务器

 

7.FormData

为序列化表单以及创建与表单格式相同的数据提供了便利

var data= new FormData();

data.append(“name” , “Linda”); //创建对象，向其中添加数据

 

var data = new FormData ( document.forms[0]); // 创建实例  

 

有了FormData对象后，

var form=document.getElementById(“user-info”);

xhr.send(serialize(form));

 

可以转化为var form=document.getElementById(“user-info”);

xhr.send(new FormData(form));

 

使用FormData的方便之处在于不必在xhr对象上设置请求头部。

 

8.超时设定

XHR对象的属性timeout表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个数值后，表示在规定时间内浏览器没有接收到响应那么就触发timeout事件，进而调用ontimeout事件处理程序

 

9.进度事件:XHR的6个进度事件

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

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

error 在请求发生错误时触发

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

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

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

每个请求的触发事件流程

loadstart事件 → 一个或多个progress事件 →error/abort/load事件中的一个 →loadend事件

 

9.1 load事件，用于替代readystatechange事件，响应接受完毕将自动触发load事件，因此没有必要去检查readystate属性的值的变化。

只要浏览器接收到服务器的响应，不管其状态如何，都会触发load事件，这意味这你必须要检查status属性，判断数据是否真的已经可用

 

9.2 progress事件

这个事件会在浏览器接受新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、position、totalSize

lengthComputable：表示进度信息是否可用的布尔值

position:表示已经接受的字节数

totalSize:表示根据content-Length响应头部确定的预期字节数

创建进度条指示器的一个实例

var xhr = new XMLHttpRequest();

xhr.οnlοad=function(event){

if  ( ( xhr.status >= 200 && xhr.status < 300) || xhr.status = = 304)

{alert(xhr.responseText);}

else

{alert(“请求失败” + xhr.status);}

};

xhr.οnprοgress=function(event){

var divStatus= document.getElementById (“status”);

if( event.lengthComputable = = true)

{

divStatus.innerHTML= “已经接收了” + (event.position/event. totalSize) * 100 + “%” ;

}

}

xhr.open(“get”, “upload.php” ,true);

xhr.send(null);