漫谈AJAX原理

AJAX全称Asynchronous JavaScript XML，是一种支持异步请求的技术，AJAX的核心是通过JavaScript创建的XmlHttpRequest对象。

AJAX是JavaScript，HTML，XML，DOM，XmlHttpRequest以及CSS技术的综合。

下面做一个用一个生活中的例子来解释AJAX，并与传统WEB技术进行比较。

假如笔者有一天在家里写程序，突然肚子饿了，恰巧家里又没有什么吃的了，需要去外面的商店买的一点吃的，现在我有两个选择：第一个选择是我自己去外面的商店把吃的买回来，但是我必须放下手中的工作，这样所有的工作都要停止下来，直到我把吃的买回来才能继续工作，第二个选择是我打电话给一个朋友，告诉他我要什么样的东西，然后我就可以边继续工作边等朋友把吃的送到我家，等到朋友到了，我就可以吃了，在此过程中工作一直在进行，而没有间断。

以上两个例子正是传统的WEB技术与AJAX的区别。传统WEB技术强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步，就是用户每次必须等到提交返回后，才能进行下一步操作，在服务器处理用户提交信息过程中用户必须处于等待状态，

传统WEB工作方式示意图

如上例所述的第一种选择，我必须让所有的工作都处于等待状态，知道我买东西回来才能继续。

而AJAX技术则是通过将用户提交的信息告诉AJAX引擎，有该引擎来负责将用户信息提交给服务器，并由该引擎负责接收服务器返回的结果，并负责传给用户，

AJAX技术方式示意图

如上所述的第二种选择，其中给我买东西的朋友住在这里就是AJAX引擎，它负责发送和接收数据，二者的工作方式如下图所示。

从上图可知，传统的WEB工作方式是用户接口每提交一次HTTP请求，就必须等待服务器那边的HTTP响应，而AJAX技术则是则是通过AJAX引擎来负责局部数据提交和接收，下面将结合上面AJAX工作方式示意图中的路线解释AJAX工作原理。

路线1 是用户接口通过JavaScript创建并调用AJAX引擎(XmlHttpRequest对象)

首先定义一个XmlHttpRequest对象

var http_request;
function CreateXHR(){
//创建AJAX引擎,AJAX根据用户使用的浏览器不同，创建不同的AJAX引擎
			if(window.ActiveXObject){
				//针对IE浏览器
				http_request=new ActiveXObject("Microsoft.XMLHTTP");
			}else{
				//针对非IE别的浏览器
				http_request=new XMLHttpRequest();
			}
}

XmlHttpRequest的两个方法，open和send，其中open方法指定了：

a、向服务器提交数据的类型，即GET还是POST。

b、请求的url地址和传递的参数。

    c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户端就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些情况下，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。

　　function sendRequest(){
			CreateXHR();   //创建AJAX引擎
			//如果AJAX引擎创建成功
			if(http_request){
				//设置处理的数据所在资源的Url
				var Url="UserCheck.aspx?username="+u;

				//打开Url,准备发送,true表示同步处理
				http_request.open("GET",Url,true);
				
				//指定一个函数[回调函数]，处理从服务器返回的结果.
				http_request.onreadystatechange=CallBack;
				
				//发送请求
				http_request.send();
			}
	}

路线2 不论是是什么技术都是以HTTP协议请求发送出去的。

路线3 服务器处理HTTP请求后，返回HTTP响应给AJAX引擎(XmlHttpRequest对象)，一般返回的HTTP响应由三种形式，文本格式(THML格式)，XML格式，JSON格式

路线4由回调函数处理AJAX引擎(XmlHttpRequest对象)返回的结果，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。readyStatus有如下四种情况：

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。

//处理函数

	function CallBack(){
		//成功返回
		if(http_request.readyState==4){
			if(http_request.status==200){
				//从ajax引擎中取出结果
				var res=http_request.responseText;
				//window.alert("服务器返回了:"+res);
			}
		}
	}

AJAX的工作原理就是按照这个流程一步一步的进行的，通过这一流程可以看出，AJAX 主要的工作路线是路线1和路线4，路线2和路线3与AJAX关系并不大，因此AJAX本身是一项客户端技术。