首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

漫话AJAX原理

2013-04-07 
漫谈AJAX原理AJAX全称Asynchronous JavaScript XML,是一种支持异步请求的技术,AJAX的核心是通过JavaScript

漫谈AJAX原理

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

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

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

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

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

漫话AJAX原理

传统WEB工作方式示意图

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

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

漫话AJAX原理

AJAX技术方式示意图

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

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

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

首先定义一个XmlHttpRequest对象

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本身是一项客户端技术。



热点排行