总结 – Ajax工作原理和实现步骤

目录

一 Ajax技术与原理

1.1 Ajax简介

1.2 Ajax所包含的技术

1.3 Ajax的工作原理

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

1. onreadystatechange 属性

2. readyState 属性

3. responseText 属性

1.5 xmlhttprequst的方法

1. open() 方法

2. send() 方法

二 Ajax编程步骤

2.1 创建XMLHttpRequest对象

2.2 设置请求方式

2.3 调用回调函数

2.4 发送请求

三、应用实例

一 Ajax技术与原理

1.1 Ajax简介

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

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

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

1.2 Ajax所包含的技术

大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

1.使用CSS和XHTML来表示。

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

3.使用XMLHttpRequest来和服务器进行异步通信。

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

AJAX 的核心是 XMLHttpRequest 对象。

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

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

1.3 Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

来看看和传统方式的区别

再来看看它们各自的交互

浏览器的普通交互方式

浏览器的Ajax交互方式

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

1. onreadystatechange 属性

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

2. readyState 属性

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

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

3. 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，就要按照以后步骤走：

1. 创建XMLHttpRequest对象。
2. 设置请求方式。
3. 调用回调函数。
4. 发送请求。

下面来看下具体步骤：

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 设置请求方式

如下：

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

open方法如下：

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

异步 – 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：服务器执行一个完全有效请求失败

再具体就如下：

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() 方法中规定您希望发送的数据。

三、应用实例