AJAX技术在网页编程的实现-毕业论文.doc

1、AJAX 技术在网页编程的实现 页 1/28 摘要 传统的因特网模型使用线性的设计，提供给用户一些选择（超链接、表单），然后用户发送选择结果给服务器。这种单一的模式不符合应用程序的灵活交互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的缺点包括页面打开缓慢和降低网络可用带宽。 Ajax 是一种“富客户端”技术。它提供了灵活多样的界面控制元素，这些控制元素可以很好的与数据模型相结合。如果采用富客户界面，可以从以前的服务器响应影响整个界面，转移到只有收到请求的应用程序部分才会做出相应的变化。这本质上意味着界面被分解成许多独立的模块，这些模块都会对收到的 信息做出相应的反应，有些会和服务器端进

2、行交互，有些是这些模块之间的通信。 Ajax 应用可以仅向服务器发送并取回必需的数据，它使用 SOAP 或其它一些基于 XML 的 Web service 接口，并在客户端采用 JavaScript 处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，同时很多的处理工作可以在发出请求的客户端机器上完成，结果我们就能看到响应更快的应用。 AJAX 技术在网页编程的实现 页 2/28 目录 1. 引言 . 4 2. AJAX 技术应用 . 4 2.1. 什么是 AJAX?. 4 2.2. AJAX的基本工作原理 . 5 2.3. 为什么要使用 AJAX技术？ . 8 2.3.1. 什

3、么是“富客户端”（ Rich Client）？ . 8 2.3.2. 谁 挡 了传 统 Web 应用程序的路？ . 9 2.3.3. 程序员的解决方案 . 11 2.3.4. Ajax 的一个简单例子 . 13 2.4. AJAX技术在 MOKER工程的应用 . 16 2.4.1. Moker 目标要求 . 16 2.4.2. 网站系统要求与开发环境 . 17 2.4.3. Moker 工程的具体实现 . 18 3. 结论 . 26 4. 致谢 . 27 5. 参考文献 . 28 AJAX 技术在网页编程的实现 页 3/28 Contents 1. INTRODUCE . 4 2. APPLI

4、CATION OF AJAX TECHNOLOGY .错误 !未定义书签。 2.1. WHAT IS AJAX?. 4 2.2. THE BASIC PRINCIPLE OF AJAX . 5 2.3. WHY WE USE AJAX？ . 8 2.3.1. What is rich client? . 8 2.3.2. What blocks classic Web application？ . 9 2.3.3. Programmers solution . 11 2.3.4. A simple sample of Ajax . 13 2.4. AJAX IN MOKER PORJECT .

5、 16 2.4.1. Mokers target . 16 2.4.2. Web sites server system and develop environment. 17 2.4.3. The detail implement of Moker project . 18 3. CONCLUSION . 26 4. THANKS . 27 5. REF 俄 RENCE. 28 AJAX 技术在网页编程的实现 页 4/28 1. 引言 一个理想的无形的用户界面应该是这样的：当用户需要时提供给用户所有功能，不需要时用户可以不受干扰地专注于手头的问题。然而，这样理想的用户界面是可遇而不可求的。当

6、今用于显示文档内容的基本的 Web 浏览器技术显然不能满足实现一个理想的用户界面 一个可以完成更高层次人物界面的要求。 Ajax (Asynchronous JavaScript + XML)由 Jesse James Garrett 首先提出，一种创建交 互式网页应用的网页开发技术。 Ajax 采用一系列已有的甚至是老的技术，将这些技术锻造、延伸，超越其原有的概念，让我们可以应付 Web客户端程序所要面对的复杂情况。 Ajax 将使实现一个理想的 Web 用户界面成为可能。 2. Ajax 技术应用 2.1. 什么是 Ajax? AJAX 全称为“ Asynchronous JavaScri

7、pt and XML”，（异步 JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。 其实 Ajax 严格意义上讲它不是一种技术，应该说是一种方法 使用几种现有技术开发外观及操作类似桌面 软件的 Web 应用软件 的方法 。 主要包含 了以下几种技术 ： 基于 Web 标准（ standards-based presentation） XHTML+CSS 的表示； 使用 DOM（ Document Object Model）进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索 ； AJAX

8、 技术在网页编程的实现 页 5/28 使用 JavaScript 将所有的东西绑定在一起。 实现 Ajax 的所有 技术 都已存在了许多年 成熟技术 。 在 2005 年 2 月 Jesse James Garrett 这种动态 HTML“富客户端”异步交互客户端服务（ cross-browser-asynchronous-rich-client-dynamic-HTML-client-server）技术起了一个简洁的名字： Ajax。 2.2. Ajax的基本工作原理 Ajax 的工作原理相当于在用户和服务器之间加了 个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转

9、嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约 ISP（ Internet 服务提供者） 的空间及带宽租用成本的目 的。 Ajax 使用非标准的对象 XMLHttpRequest 与服务器通信。它可以接受、发送多种形式的信息，包括 XML、 HTML 甚至文本文件。当基本上遵循以下几个基本步骤： 第一步：创建一个向服务器发送 HTTP 请求的 XMLHttpRequest 对象 在使用 JavaScript 向服务器发送 HTTP 请求之前，我们需要创建一个XMLHttpRequest 的对象。在 Internet Exploerer（ IE）浏览器内，我们可

10、以从 ActiveX对象引入，被称为 XMLHTTP；在非 IE浏览器 例如 Mozilla、 Netscape、 Safari 则通过实现一个支持 Microsoft 的 ActiveX 的方法与属性的 XMLHttpRequest 类。 var httpRequest; if (window.XMLHttpRequest) / Mozilla, Safari, . httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) httpRequest.overrideMimeType(text/xml); / Se

11、e note below about this line AJAX 技术在网页编程的实现 页 6/28 else if (window.ActiveXObject) / IE try httpRequest = new ActiveXObject(“Msxml2.XMLHTTP“); catch (e) try httpRequest = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e) 如果没有指定从服务业相应的 XML MIME 类型，有一些版本的 Mozilla 浏览器可能不能正常运行。为了适应不同版本的浏览器，我们可以调用一个内部方法来

12、覆盖服务器发送来的头部，已房改头部不是“ text/xml”类型。 httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType(text/xml); 接下来，我们需要定义一个方法告诉浏览器应该要做什么，当浏览器节受到来自服务器的响应信息。这将通过设置 httpReqest 的属性 onreadystatechange得知来实现。 httpRequest.onreadystatechange = function() / do the thing ; 再接下来，我们要做的是向服务器发送请求。我们需要调用 HTTP 类中的ope

13、n()和 send()两个方法，如下： httpRequest.open(GET, http:/www.example.org/some.file, true); httpRequest.send(null); AJAX 技术在网页编程的实现 页 7/28 open()的第一个参数是 HTTP 请求方式 GET， POST 或任何服务器所支持的您想调用的方式。 按照 HTTP 规范，该参数要大写；否则，某些浏览器 (如Mozilla)可能无法处理请求。 第二个参数是请求页面的 URL。 第三个参数设置请求是否为异步模式。如果是 TRUE， JavaScript 函数将继续执行，而不等待服务器响

14、应。这就是 “ AJAX” 中的 “ A” 。 send()的参数是 QueryString。 第二步：处理服务器响应信息 用 JavaScript 来创建 XMLHttpRequest 类向服务器发送一个 HTTP 请求后，接下来要决定当收到服务器的响应 后，需要做什么。 在上面我们已经告诉了HTTP 由哪个 JavaScript 函数来处理服务器响应信息。下面我们将在该函数内说明要如何处理。 首先， 要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。 XMLHttpRequest 提供了 readyState 属性来对服务器响应进行判断。 readyState

15、的取值如下： 0 (未初始化 ) 1 (正在装载 ) 2 (装载完毕 ) 3 (交互中 ) 4 (完成 ) 所以只有当 readyState=4 时，一个完整的服务器响应已经收到了，函数才 可以处理该响应。具体代码如下： if (httpRequest.readyState = 4) / everything is good, the response is received else / still not ready AJAX 技术在网页编程的实现 页 8/28 当 readyState=4 时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP 服务器响应的状态值。完整的状态取值可

16、参见 W3C 文档。当 HTTP 服务器响应的值为 200 时，表示状态正常。 if (httpRequest.status = 200) / perfect! else / there was a problem with the request, / for example the response may be a 404 (Not Found) / or 500 (Internal Server Error) response codes 在检查完请求的状态值和响应的 HTTP 状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据： (1) 以文本字符串 的方式返回服务

17、器的响应 (2) 以 XMLDocument 对象方式返回响应 2.3. 为什么要使用 Ajax技术？ 在回答以上问题之前，我们将先了解 什么是“富客户端” ，之后可以使我们为什么用 Ajax 技术的解释更有说服力。 2.3.1. 什么是“富客户端”（ Rich Client）？ 大家都知道在桌面程序上做一些操作的时候， 程序给了我 们 反馈。移动鼠标的时候，光标改变了形状；当鼠标停在上面的时候，按钮变亮了； 按钮在鼠标移上去的时候会显示提示信息；工具栏上排列着各种丰富的控件； 选中的文字也AJAX 技术在网页编程的实现 页 9/28 改变了颜色。窗口或者对话框被选中的时候，也 和平常显得不一

18、样了，等等。这些就是所谓“富”的交互 。 客户端 是与另一个独立的进程相互通信的程序，后者通常运行在服务器上。一般来说，服务器总是要比客户端大一些，能力强一些，配置更好一些，因为在服务器上通常要存储浩如烟海的信息。客户端程序使得最终用户可以查看和修改这些信息，当多个客户端连接在同一个服务器上的时候，可以在它们之间共享这些信息。 综合来说 富客户端 就是“富有表现能力的可与远程服务器 相互通信的程序 ”。 Web 浏览器就是一个典型的客户端，它与 Web 服务器通信，请求需要的页面。浏览器有丰富的功能，但是当我们把 特定网站的 Web 页面看作是一个应用时，这些通用的浏览功能实际上和应用关系不大

19、 。一个 Web 应用可以包括一大堆通用信息和个性化信息的超链接。 但是由于 Web 浏览器使用基于文档的操作，即使其中的大连内容是一模一样， 每次发送新页面都必须要重新发送 整个文档 内容 。通常与服务器交互的方式已是点击那些超链接或填写一些表格。不然 Web浏览器 不能将我的列表从一个页面带到另一个页面，我要是想同时看到更多一些东西也不行，因为我无法改变页面上局部内容区域的大小。 传统的 Web 应用程序显然不能成为一个富客户端。 2.3.2. 谁 挡 了传统 Web 应用程序 的路？ 桌面程序可以实现操作的及时反馈，原因在于桌面程序进行的是本地调用，任何的读、写操作都在本地技术集中的内存

20、中进行。 （图 2.3.2-1） 本地过程调用的顺序图。 AJAX 技术在网页编程的实现 页 10/28 参与者很少，因为程序逻辑与数据模型都保存在本地内存中，并且彼此可以直接访问 远程调用和本地调用 不可同日而语， 在现有的技术水平之下，网络通信仍然是一件代价高昂的事情（也就是说，通常很慢，而且并不可靠）。而在有远程调用的情况下，位于网络两端的通信双方为了发送和接收数据在底层需要进行大量计算（图 2.3.2-2）。比起数据在线路上的往返，这些 计算需要消耗更多的时间。这就是大家说的网络延时。 （图 2.3.2-2）远程过程调用的顺序图。 一台机器的程序逻辑尝试操作另外一台机器上的数据模型 。 一个理想的用户界面 最起码的水平模拟我们在真实世界中的体验。交互的基本规则之一就是，当我们推一下、刺一下或者捅一下某个东西的时候，它立刻就会响应。响应的时间只要稍微拖长一点点，就会使人困惑，分散其注意力，把关注点从手头的任务转移到用户界面上。 网络延迟是导致实际应用的交互性糟糕的一个普遍原因 。