欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

AJAX工作原理

程序员文章站 2022-04-11 09:00:18
...
一、ajax技术的背景

不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行。而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了ajax中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用ajax,比如说MSDN网站菜单中的一些应用。遗憾的是,不知道出于什么想法,当时微软发明了ajax的核心技术之后,并没有看到它的潜力而加以发展和推广,而是将它搁置起来。对于这一点来说,我个人是觉得非常奇怪的,因为以微软的资源和它的战略眼光来说,应该不会看不到ajax技术的前景,唯一的解释也许就是因为当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝,毕竟巨人也有打盹的时候,比如IBM曾经在对微软战略上的失误。正是这一次的失误,成就了它现在的竞争对手google在ajax方面的领先地位,而事实上google目前在ajax技术方面的领先是微软所无法达到的,这一点在后面我讲述ajax缺陷的时候也会提到。现在微软也意识到了这个问题,因此它也开始在ajax领域奋起直追,比如说推出它自己的ajax框架atlas,并且在.NET2.0也提供了一个用来实现异步回调的接口,即ICallBack接口。那么微软为什么对自己在ajax方面的落后如此紧张呢?现在就让我们来分析一下ajax技术后面隐藏的深刻意义。

二、什么是ajax

ajax即“Asynchronous Javascript AND XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。ajax包括使用XHTML和CSS标准实现Web页面,使用DOM实现动态显示和交互,使用XML进行数据交换和处理,最后使用javaScript绑定和处理所有数据。ajax将一些服务器负担的工作下放至客户端,利用客户端的某些能力来处理数据,减少用户实际和心理上的等待时间,用户不在遇到因为页面刷新导致浏览器长时间空白,甚至停止响应的糟糕结果,这给了用户最佳的体验效果。ajax基于标准化的XML,被广泛使用并且支持,利于维护和修改。ajax调用外部数据很方便,在需要页面与数据分离的情况下,可以应用ajax获取数据。

三、ajax所包含的技术

大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用java
Script来绑定和调用。

四、ajax原理和XmlHttpRequest对象

ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。通过下图能更清楚的理解ajax的工作原理

AJAX工作原理

XMLHttpRequest的工作原理。
XMLHttpRequest对象的属性有:
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
statusText 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

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

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

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

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

由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法