总结 - Ajax工做原理和实现步骤

在建立Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax能够完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器从新发送整个页面。
提高站点的性能，这是经过减小从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会从新载入整个页面，这必须下载32K的数据。若是使用Ajax计算新的总量，服务器只会返回新的总量值，所以所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，若是用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，能够将静态表格刷新为内容可编辑的表格。用户单击Done以后，就能够发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

1.4 XMLHttpRequest 对象的三个经常使用的属性

1. onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange = function() {
    //咱们须要在这写一些代码
}

2. readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 以前）
1	请求已提出（调用 send() 以前）
2	请求已发送（这里一般能够从响应获得内容头部）
3	请求处理中（响应中一般有部分数据可用，可是服务器尚未完成响应）
4	请求已完成（能够访问服务器响应并使用它）

咱们要向这个 onreadystatechange 函数添加一条 If 语句，来测试咱们的响应是否已完成(意味着可得到数据)：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response得到数据
    }
}

3. responseText 属性

能够经过 responseText 属性来取回由服务器返回的数据。
在咱们的代码中，咱们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

其它属性以下：

1.5 xmlhttprequst的方法

1. open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

2. send() 方法

send() 方法将请求送往服务器。若是咱们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

其它方法以下：

二 Ajax编程步骤

为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按照之后步骤走：

建立XMLHttpRequest对象。

设置请求方式。

调用回调函数。

发送请求。

下面来看下具体步骤：

2.1 建立XMLHttpRequest对象

建立XMLHttp对象的语法是：

var xmlHttp=new XMLHttpRequest();

若是是IE5或者IE6浏览器，则使用ActiveX对象，建立方法是：

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

通常咱们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，若是支持则建立该对象，若是不支持则建立ActiveX对象。JS代码以下：

//第一步：建立XMLHttpRequest对象

var xmlHttp;
if (window.XMLHttpRequest) {            //非IE
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {       //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

2.2 设置请求方式

在WEB开发中，请求有两种形式，一个是get，一个是post，因此在这里须要设置一下具体使用哪一个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。
open()方法

功能	参数
规定请求的类型、URL 以及是否异步处理请求	参数1：设置请求类型（GET 或 POST），GET与POST的区别请本身百度一下，这里不作解释；参数2：文件在服务器上的位置；参数3：是否异步处理请求，是为true，否为false。

以下：

//第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
       
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

open方法以下：

GET 仍是 POST？
与 POST 相比，GET 更简单也更快，而且在大部分状况下都能用。然而，在如下状况中，请使用 POST 请求：

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

异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。XMLHttpRequest 对象若是要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：对于 web 开发人员来讲，发送异步请求是一个巨大的进步。不少在服务器执行的任务都至关费时。AJAX 出现以前，这可能会引发应用程序挂起或中止。
经过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其余脚本
当响应就绪后对响应进行处理

2.3 调用回调函数

若是在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候须要写一个回调函数，XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，因此回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，咱们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，而后将这个数据显示到指定的div上。由于从后台返回的数据多是错误的，因此在回调函数中首先要判断后台返回的信息是否正确，若是正确才能够继续执行。代码以下：

//第三步：注册回调函数

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
}

在上面代码中，xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器链接已创建。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。因此这里咱们判断只有当xmlHttp.readyState为4的时候才能够继续执行。

xmlHttp.status是服务器返回的结果，其中200表明正确。404表明未找到页面，因此这里咱们判断只有当xmlHttp.status等于200的时候才能够继续执行。

var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;

这段代码就是回调函数的核心内容，就是获取后台返回的数据，而后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性均可以获取后台返回的数据，分别是：responseText和responseXML，其中responseText是用来得到字符串形式的响应数据，responseXML是用来得到 XML 形式的响应数据。至于选择哪个是取决于后台给返回的数据的，这个例子里咱们只是显示一条字符串数据因此选择的是responseText。responseXML将会在之后的例子中介绍。

AJAX状态值与状态码区别
AJAX状态值是指，运行AJAX所经历过的几种状态，不管访问是否成功都将响应的步骤，能够理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”得到。（由数字1~4单位数字组成）
AJAX状态码是指，不管AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所得到；（由数字1XX,2XX三位数字组成，详细查看RFC）
这就是咱们在使用AJAX时为何采用下面的方式判断所得到的信息是否正确的缘由。

if(ajax.readyState == 4 && ajax.status == 200) {。。。。);}

AJAX运行步骤与状态值说明
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并非一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是：
0 - (未初始化)尚未调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，能够在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具备的状态值，而对于成功访问的状态（获得信息）咱们大多数采用“4”进行判断。

AJAX状态码说明
1**：请求收到，继续处理
2**：操做成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个彻底有效请求失败

再具体就以下：

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不肯定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处获得
301——删除请求数据
302——在其余地址发现了请求数据
303——建议客户访问其余URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址获得
306——前一版本HTTP中使用的代码，现行版本中再也不使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求受权失败
402——保留有效ChargeTo头响应
403——请求不容许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不容许
406——根据用户发送的Accept拖，请求资源不可访问
407——相似401，用户必须首先在代理服务器上获得受权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上再也不有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器容许的大小
414——请求的资源URL长于服务器容许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不知足请求Expect头字段指定的指望值，若是是代理服务器，多是下一级服务器不能知足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另外一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

2.4 发送请求

//第四步：设置发送请求的内容和发送报送。而后发送请求

var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增长time随机参数，防止读取缓存 				
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");                     // 向请求添加 HTTP 头，POST若是有数据必定加加！！！！
xmlHttp.send(params);

若是须要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。而后在 send() 方法中规定您但愿发送的数据。