这一篇是Ajax整理笔记

Ajax概要介绍

Ajax 是一种网页开发技术，（Asynchronous Javascript + XML）异步 JavaScript 和 XML；
Ajax 是异步交互，局部刷新；
Ajax 能减少服务器压力；
Ajax 能提高用户体验；
Ajax 交互与传统交互比较：

传统交互：网页整体刷新，服务器压力大，用户体验不好；
Ajax交互：局部刷新，服务器压力小，用户体验好；

同步和异步

为什么要用ajax，首先我们要了解同步和异步是什么.

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

Ajax的基本操作步骤

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

创建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");
  }

向服务器发送请求

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

详细步骤如下：（按顺序1>2>3）

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求
函数内的参数分别代表：规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
setRequestHeader(header,value)向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
1
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
send(string)将请求发送到服务器。
string：仅用于 POST 请求

服务器响应

在收到响应后，响应的数据会自动填充XHR对象的属性：
XHR.responseText：服务器返回的文本数据
XHR.responseXML：服务器返回的XML格式的数据
status：服务器返回的状态码。

响应的HTTP状态

- 200: “OK”，响应成功返回
- 304：请求的资源未被修改，可使用浏览器中的缓存版本
- 404: 未找到页面
同步的时候应当检查status的值后来决定下一步的操作：
if(xhr.status>=200 && xhr.status<300 || xhr.status=304){
//do something
}else{
alert(“request was unsuccessful: “+xhr.status);
}

异步处理

onreadystatechange事件：当async为true时，规定该事件上绑定的方法，每当readyState属性改变时，就会触发该事件。
readyState属性：表示请求-响应过程的当前活动阶段。为XHR对象的状态。
异步的时候应当检查该属性。从 0 到 4 发生变化:
- 0: 请求未初始化，未调用open()
- 1: 服务器连接已建立，已调用open，未调用send
- 2: 请求已接收，即服务器已收到请求头信息。已调用send，尚未收到响应
- 3: 已收到部分响应数据
- 4: 请求已完成，已收到全部响应数据，可在客户端使用
  注意：需在调用open之前指定onreadystatechange事件绑定的函数才能确保跨浏览器兼容性。
```
xhr.onreadystatechange=function(){
    if(xhr.readyStatus==4){
    if(xhr.status>=200 && xhr.status<300 ||   xhr.status==304){ 
          //do something
      }
    else{
      alert("request was unsuccessful: "+xhr.status);
        }
   }
};
```

终止异步

xhr.abort()：调用该方法取消异步请求，XHR对象会停止触发事件，并且不再允许访问任何与响应有关的对象属性。
在终止请求后，应对XHR对象释放引用。

老版本的XHR对象缺点

只支持文本数据的传送，无法读取和上传二进制文件。
只能访问同域中的资源。
传送和接收数据时没有进度信息，只能提示有无完成。
这里有：新版本即level2的改进

HTTP头部

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

GET请求
常用于向服务器查询某些信息，可将查询字符串参数追加到url末尾。必须对查询字符串进行encodeURIComponent()编码，具体来说必须对参数名和参数值都进行编码才能附加到url后面。
向现有url追加查询字符串参数：
1
2
3
4
5
function addURLPara(url,name,value){
url += (url.indexOf("?") == -1 ? "?":"&");
url += encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
}
POST请求
用于向服务器发送应当被保存的数据（修改服务器端数据），数据是请求的主体。
什么时候使用POST方式？：

无法使用缓存文件（get通常会使用缓存？）
向服务器发送大量数据
发送包含未知字符的用户输入
在send方法中传入要发送的数据（字符串或文档）

表单数据序列化

通过XHR发送到服务器：

function submitData(){
    var xhr = createXHR();
    xhr.onreadystatechange=function(){
    if(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));//表单序列化
}

使用该方式必须设置自定义请求头部信息Content-Type，以说明请求的内容类型。
这样服务器就会根据请求的内容类型来解析表单中的数据。
在通过post方式请求表单中，在open和send之间，要添加request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
如果不设置content-type头部，那么发送给服务器的数据就不会出现在$_POST超级全局变量中。

拾遗：

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

为 True 的话，表示的是异步，异步表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；
为 False 的话，表示同步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
我们一般都是用 True；