Ajax技术与原理

一，Ajax技术与原理

1.1 Ajax简介

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

AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。

AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。

1.2 Ajax所包含的技术

1.2 Ajax所包含的技术

1.使⽤CSS和XHTML来表示。

2.使⽤DOM模型来交互和动态显示。

3.使⽤XMLHttpRequest来和服务器进⾏异步通信。

4.使⽤javascript来绑定和调⽤。

AJAX 的核⼼是 XMLHttpRequest 对象。

不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。

IE 浏览器使⽤ ActiveXObject，⽽其他的浏览器使⽤名为 XMLHttpRequest 的 JavaScript 内建对象

1.3 Ajax的⼯作原理

Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步 化。并不是所有的⽤户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎⾃⼰来做,， 只有确定需要从服务器读取新数据时再由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 属性可能的值：

 我们要向这个 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 XMLHttpRequest⽅法

1. open() ⽅法

open() 有三个参数。第⼀个参数定义发送请求所使⽤的⽅法，第⼆个参数规定服务器端脚本的URL，第 三个参数规定应当对请求进⾏异步地处理。

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

2. send() ⽅法

send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录，那么代码是这 样的：

xmlHttp.send(null);

其它⽅法如下：

 ⼆ Ajax编程步骤

为了⽅便理解，我给AJAX统⼀了⼀个流程，要想实现AJAX，就要按照以后步骤⾛：

1. 创建XMLHttpRequest对象。

2. 设置请求⽅式。

3. 调⽤回调函数。

4. 发送请求。

下⾯来看下具体步骤：

2.1 创建XMLHttpRequest对象

2.1 创建XMLHttpRequest对象

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()⽅法

 如下：

//第⼆步：设置和服务器端交互的相应参数，向路径
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指示值，请求也不包含IfRange请求头字段

417——服务器不满⾜请求Expect头字段指定的期望值，如果是代理服务器，可能是下⼀级服务器不能 满⾜请求

500——服务器产⽣内部错误

501——服务器不⽀持请求的函数

502——服务器暂时不可⽤，有时是为了防⽌发⽣系统过载

503——服务器过载或暂停维修

504——关⼝过载，服务器使⽤另⼀个关⼝或服务来响应⽤户，等待时间设定值较⻓

505——服务器不⽀持或拒绝⽀请求头中指定的HTTP版本

2.4 发送请求

//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" +
Math.random(); 
// 增加time随机参数，防⽌读取缓存 
xmlHttp.setRequestHeader("Content-type", "application/x-www-formurlencoded;charset=UTF-8"); 
// 向请求添加 HTTP 头，POST如果有数据⼀定加加！！！！
xmlHttp.send(params)

如果需要像 HTML 表单那样 POST 数据，请使⽤ setRequestHeader() 来添加 HTTP 头。然后在 send() ⽅法中规定您希望发送的数据。