Ajax深入学习笔记_H5之家 - 中国HTML5教程资源分享第一站

最近在学习ajax，下面整理了一下学习的内容，以便巩固用。
先来看看为什么要用ajax，也就是同步和异步是什么：

同步和异步

同步的意思就是客户端提交表单，发起请求后需要一直等待服务器端的响应，收到服务器端的响应后需要重新载入页面。
而有了ajax，则可进行异步交互，比如不会提交整个表单后等待服务器响应再刷新页面，而是填写的过程中，通过ajax的机制，就可以把已经填写的部分提交给服务器，服务器进行处理，而这个过程中可以继续填写后面的内容，服务器发送回响应只会刷新页面的部分内容（利用JavaScript操作DOM进行局部刷新），而不是重新载入整个页面。
其实就是为客户机（网页中常为JavaScript）代码提供了一种发送HTTP请求的方式。通常提交请求都是以表单的形式发送，获取响应要刷新整页，而ajax则是按需发送，只刷新返回的数据。

Ajax的基本操作步骤

Ajax指异步的JavaScript和XML，JS无需等待服务器响应，而是在继续执行脚本内容，响应就绪后对响应进行处理。若是同步，则JS代码会收到服务器的响应后再继续执行。
ajax是通过XMLHttpRequest对象在客户端和服务器端进行数据交换的。

1. 创建XMLHttpRequest对象
该对象用于和服务器交换数据：

var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

2.向服务器发送请求
XHR.open(method,url,async):规定请求的方式、请求文件在服务器上的URL和是否异步处理请求。启动一个请求以备发送。
XHR.send()：将请求发送到服务器，参数为请求主体发送的数据，如果不需要请求主体发送数据，则必须填入null，因为对有些浏览器来说必须有一个参数。通常post方式会填入发送的数据。

3.服务器响应
在收到响应后，响应的数据会自动填充XHR对象的属性：
XHR.responseText：服务器返回的文本数据
XHR.responseXML：服务器返回的XML格式的数据
status：服务器返回的状态码。响应的HTTP状态：
- 200: “OK”，响应成功返回
- 304：请求的资源未被修改，可使用浏览器中的缓存版本
- 404: 未找到页面
statusText：HTTP状态文本说明
同步的时候应当检查status的值后来决定下一步的操作：

if(xhr.status>=200 && xhr.status<300 || xhr.status=304){ //do something }else{ alert("request was unsuccessful: "+xhr.status); }

4.异步处理
onreadystatechange 事件：当async为true时，规定该事件上绑定的方法，每当readyState属性改变时，就会触发该事件。
readyState属性：表示请求-响应过程的当前活动阶段。为XHR对象的状态。异步的时候应当检查该属性。从 0 到 4 发生变化:
0: 请求未初始化，未调用open()
1: 服务器连接已建立，已调用open，未调用send
2: 请求已接收，即服务器已收到请求头信息。已调用send，尚未收到响应
3: 已收到部分响应数据
4: 请求已完成，已收到全部响应数据，可在客户端使用
注意：需在调用open之前指定onreadystatechange事件绑定的函数才能确保跨浏览器兼容性。

xhr.onreadystatechange=(xhr.readyStatus==4){ if(xhr.status>=200 && xhr.status<300 || xhr.status==304){ //do something }else{ alert("request was unsuccessful: "+xhr.status); } } };

5.终止异步
xhr.abort()：调用该方法取消异步请求，XHR对象会停止触发事件，并且不再允许访问任何与响应有关的对象属性。
在终止请求后，应对XHR对象释放引用。
6.老版本的XHR对象缺点
只支持文本数据的传送，无法读取和上传二进制文件。
只能访问同域中的资源。
传送和接收数据时没有进度信息，只能提示有无完成。
新版本即level2的改进：

要想把ajax学得透彻，了解HTTP协议还是很有必要的。

HTTP头部

浏览器在发送XHR请求的同时也会默认发送一些头部信息，浏览器能够显示的字符集（Accept-charset）、当前页面设置的任何Cookie等。也可以自定义发送信息，通过调用XHR.setRequestHeader(header,value)向请求添加头部。该方法应当放在open之后send之前。
XHR对象的getResponseHeader()和getAllResponseHeaders()可用于获取响应的头部信息

1. GET请求
常用于向服务器查询某些信息，可将查询字符串参数追加到url末尾。必须对查询字符串进行encodeURIComponent()编码，具体来说必须对参数名和参数值都进行编码才能附加到url后面。
向现有url追加查询字符串参数：

{ url += (url.indexOf("?") == -1 ? "?":"&"); url += encodeURIComponent(name)+"="+encodeURIComponent(value); return url; }

2.POST请求
用于向服务器发送应当被保存的数据（修改服务器端数据），数据是请求的主体。
使用POST方式：
- 无法使用缓存文件（get通常会使用缓存？）
- 向服务器发送大量数据
- 发送包含未知字符的用户输入
在send方法中传入要发送的数据（字符串或文档）
表单数据序列化，通过XHR发送到服务器：

{ var xhr = createXHR(); xhr.onreadystatechange=(xhr.readyState==4){ if(xhr.status>=200 && xhr.status<300 || xhr.status==304){ //do something }else{ alert("request was unsuccessful: "+xhr.status); } }; } xhr.open("post","url",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //表单提交时的内容类型，如果提交的是表单数据必须要写这个 var form = document.getElementById("user-info"); xhr.send(serialize(form));//表单序列化 }