日期:2014-05-16  浏览次数:20721 次

漫谈AJAX原理

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

AJAXJavaScript,HTMLXMLDOMXmlHttpRequest以及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(){