AJAX论文

河南理工大学计算机学院

课程论文

课程名称：AJAX

论文题目：AJAX 的基本原理

学生姓名 ：杨二威

专业年级 ：计应10-1

学 号 :411020040186

2011年 10 月

河南理工大学计算机学院

此表由评阅人填写

评价项目 满分 得分 总分 教师签字 论点、论据 40

写作规范性 30 论述逻辑性

30

河南理工大学

Ajax基本原理

摘要：本文介绍了Ajax的基本原理，交互过程和与之相关的技术及简单的实现方法，在此基础上给出了一个完整的实例，以使得能够对Ajax有一个更清楚的理解。

关键字：Ajax，JavaScript，DOM，无刷新页面，不完全刷新

引言

计算机桌面应用使我们得以用以前不能想象的方式处理大量的复杂数据；基于计算机网络的C/S模式应用使得共享数据和资源成为现实。然而，正如C/S模式的应用是由于人们不满足单机的桌面应用一样，人们对C/S模式也心存抱怨了：C/S模式除了带给我们数据和资源共享的便利之外，也给我们带来了令我们（程序开发设计人员）和客户头疼的部署和发布问题。于是，B/S模式应用应运而生，而且得到了迅速的发展。B/S模式应用符合一定规范的浏览器作为通用客户端，从而解决了C/S模式中最令人头疼的部署和发布问题。但是，到此并没有结束，B/S虽然解决了应用的部署和发布问题，却因为种种限制，使得应用没有了以前丰富的交互，并且每次与服务器的交互都要完全刷新页面，这是非常糟糕和令人不快的。本文讨论了如何解决页面完全刷新和缺乏交互性的问题，我们用的方法就是――Ajax。

Ajax

那么，Ajax到底是什么呢？Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，这只是最初的观点，最初由Jesse James Garrett创造出来的。但是，Ajax现在的覆盖面已经有了进一步的扩展，把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在其中了。

坦率的讲，Ajax并不是什么新鲜玩艺。也就是说，Ajax并不是一种全新的技术，而更像一种技巧，是把过去的几种技术巧妙结合的技巧。真正与Ajax相关的新名词应该是XMLHttpRequest――一个最早在IE 5中出现，最近开始在多数浏览器得到支持的用来实现异步通信的对象。正如前面所说，B/S模式是利用浏览器作为其通用的客户端，所以要想异步通讯成为可能，必须要得到浏览器的支持。如果不是有了浏览器对XMLHttpRequest对象的广泛支持，我们可能不会看到Ajax的今天，更不会看到许多对Ajax的著名应用，如Google Map，Google Suggest，Ta-da List等。

Ajax的处理过程是怎样的呢？下图为Ajax应用的标准处理模式。

图 1 标准Ajax处理过程

从图中我们可以看出：由事件触发，创建一个XMLHttpRequest对象，把HTTP方法（Get/Post）和目标URL以及请求返回后的回调函数设置到XMLHttpRequest对象，通过XMLHttpRequest向服务器发送请求，请求发送后继续响应用户的界面交互，只有等到请求真正从服务器返回的时候才调用callback()函数，对响应数据进行处理。

在这个交互过程中，涉及到几种我们不得不提的技术：

1．XHTML和CSS――用来使表现标准化；

2．DOM――动态的修改文档的内容和结构；

3．XML――进行数据的交换和处理；

4．JavaScript――对上述几种技术进行绑定，使其成为协同工作的整体。

Ajax相关技术及基本原理

1．XMLHttpRequest简介

XMLHttpRequest，是我们得以实现异步通讯的根本。最早在IE 5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFo x、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。这就使得Ajax有了今天如火如荼的发展。

用XMLHttpRequest进行异步通讯，首先必须用JavaScript创建一个XMLHttpRequest 对象实例。创建XMLHttpRequest对象实例的代码清单如下所示：

var xmlHttp;

function createXMLHttpRequest(){

if(window.ActiveXObject){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

}

}

可以看出，创建XMLHttpRequest对象相当容易。首先，声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用；然后，在createXMLHttpRequest()方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同，因此在创建时，通过一个分支语句进行判断。如果window.ActiveXObject调用返回true，则证明为IE浏览器，那么就通过传递“Microsoft.XMLHTTP”给ActiveXObject()来创建XMLHttpRequest对象，否则就把XMLHttpRequest实现为本地JavaScript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的，所以可以用同样的方法访问XMLHttpRequest的方法和属性。

表 1 标准XMLHttpRequest方法

表 2 标准XMLHttpRequest属性

创建了XMLHttpRequest对象，并了解了XMLHttpRequest对象的方法和属性之后，让我们来看看怎样利用XMLHttpRequest对象发送简单的请求。利用XMLHttpRequest对象发送简单请求的基本步骤如下：

1）创建XMLHttpRequest对象实例。

2）设定XMLHttpRequest对象的回调函数，利用onreadystatechange属性。

3）设定请求属性：设定HTTP方法（GET或POST）；设定目标URL。利用open()方法。

4）将请求发送给服务器。利用send()方法。

3．利用DOM对服务器响应进行处理

前面已经设置了回调函数，回调函数正是用来处理服务器响应信息的。但是，别忘了我们的最终目的：解决页面完全刷新和缺乏交互性的问题。在服务器对我们的请求信息作出响应后，我们就得实现页面的无缝更新（就是无闪烁的更新信息）。要实现这一点，那么就不