1、AJAX 技术在网页编程的实现页 1/29摘要传统的因特网模型使用线性的设计，提供给用户一些选择（超链接、表单），然后用户发送选择结果给服务器。这种单一的模式不符合应用程序的灵活交互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的缺点包括页面打开缓慢和降低网络可用带宽。Ajax 是一种“富客户端”技术。它提供了灵活多样的界面控制元素，这些控制元素可以很好的与数据模型相结合。如果采用富客户界面，可以从以前的服务器响应影响整个界面，转移到只有收到请求的应用程序部分才会做出相应的变化。这本质上意味着界面被分解成许多独立的模块，这些模块都会对收到的信息做出相应的反应，有些会和服务器端进行交互，有
2、些是这些模块之间的通信。Ajax 应用可以仅向服务器发送并取回必需的数据，它使用 SOAP 或其它一些基于 XML 的 Web service 接口，并在客户端采用 JavaScript 处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，同时很多的处理工作可以在发出请求的客户端机器上完成，结果我们就能看到响应更快的应用。AJAX 技术在网页编程的实现页 2/29目录1. 引言 .32. AJAX 技术应用 32.1. 什么是 AJAX?.32.2. AJAX 的基本工作原理 .42.3. 为什么要使用 AJAX 技术？ 72.3.1. 什么是“富客户端” （Rich Clien
3、t）？ 72.3.2. 谁挡了传统 Web 应用程序的路？ .82.3.3. 程序员的解决方案 .102.3.4. Ajax 的一个简单例子 112.4. AJAX 技术在 MOKER 工程的应用 .152.4.1. Moker 目标要求 .152.4.2. 网站系统要求与开发环境 .162.4.3. Moker 工程的具体实现 .173. 结论 .254. 致谢 .265. 参考文献 .27AJAX 技术在网页编程的实现页 3/29Contents1. INTRODUCE 32. APPLICATION OF AJAX TECHNOLOGY .32.1. WHAT IS AJAX? .32.
4、2. THE BASIC PRINCIPLE OF AJAX 42.3. WHY WE USE AJAX？ 72.3.1. What is rich client?72.3.2. What blocks classic Web application？ 82.3.3. Programmers solution 102.3.4. A simple sample of Ajax.112.4. AJAX IN MOKER PORJECT 152.4.1. Mokers target .152.4.2. Web sites server system and develop environment .
5、162.4.3. The detail implement of Moker project 173. CONCLUSION .254. THANKS .265. REF 俄 RENCE.27AJAX 技术在网页编程的实现页 4/291. 引言一个理想的无形的用户界面应该是这样的：当用户需要时提供给用户所有功能，不需要时用户可以不受干扰地专注于手头的问题。然而，这样理想的用户界面是可遇而不可求的。当今用于显示文档内容的基本的 Web 浏览器技术显然不能满足实现一个理想的用户界面一个可以完成更高层次人物界面的要求。 Ajax (Asynchronous JavaScript + XML)由 Je
6、sse James Garrett 首先提出，一种创建交互式网页应用的网页开发技术。Ajax 采用一系列已有的甚至是老的技术，将这些技术锻造、延伸，超越其原有的概念，让我们可以应付 Web客户端程序所要面对的复杂情况。Ajax 将使实现一个理想的 Web 用户界面成为可能。2. Ajax 技术应用2.1. 什么是 Ajax?AJAX 全称为“Asynchronous JavaScript and XML” ， （异步 JavaScript 和XML） ，是指一种创建交互式网页应用的网页开发技术。其实 Ajax 严格意义上讲它不是一种技术，应该说是一种方法使用几种现有技术开发外观及操作类似桌面软
7、件的 Web 应用软件的方法。 主要包含了以下几种技术： 基于 Web 标准（standards-based presentation）XHTML+CSS 的表示； 使用 DOM（Document Object Model）进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； AJAX 技术在网页编程的实现页 5/29 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。实现 Ajax 的所有技术都已存在了许多年成熟技术。在 2005 年 2 月 Jesse James Garrett 这种动态 HTML“富客
8、户端”异步交互客户端服务（cross-browser-asynchronous-rich-client-dynamic-HTML-client-server）技术起了一个简洁的名字：Ajax 。2.2. Ajax 的基本工作原理Ajax 的工作原理相当于在用户和服务器之间加了个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP（Internet 服务提供者）的空间及带宽租用成本的目的。Ajax 使用非标准的对象 XMLHttpRequest 与服务器通信。它可以接受、发送多种形式的信息，
9、包括 XML、HTML 甚至文本文件。当基本上遵循以下几个基本步骤：第一步：创建一个向服务器发送 HTTP 请求的 XMLHttpRequest 对象在使用 JavaScript 向服务器发送 HTTP 请求之前，我们需要创建一个XMLHttpRequest 的对象。在 Internet Exploerer（IE ）浏览器内，我们可以从ActiveX 对象引入，被称为 XMLHTTP；在非 IE 浏览器例如Mozilla、Netscape 、Safari 则通过实现一个支持 Microsoft 的 ActiveX 的方法与属性的 XMLHttpRequest 类。var httpRequest
10、;if (window.XMLHttpRequest) / Mozilla, Safari, .httpRequest = new XMLHttpRequest();if (httpRequest.overrideMimeType) AJAX 技术在网页编程的实现页 6/29httpRequest.overrideMimeType(text/xml);/ See note below about this lineelse if (window.ActiveXObject) / IEtry httpRequest = new ActiveXObject(“Msxml2.XMLHTTP“);ca
11、tch (e)try httpRequest = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e) 如果没有指定从服务业相应的 XML MIME 类型，有一些版本的 Mozilla 浏览器可能不能正常运行。为了适应不同版本的浏览器，我们可以调用一个内部方法来覆盖服务器发送来的头部，已房改头部不是“text/xml”类型。httpRequest = new XMLHttpRequest();httpRequest.overrideMimeType(text/xml);接下来，我们需要定义一个方法告诉浏览器应该要做什么，当浏览器节受到来自服务器的响
12、应信息。这将通过设置 httpReqest 的属性 onreadystatechange得知来实现。httpRequest.onreadystatechange = function()/ do the thing;再接下来，我们要做的是向服务器发送请求。我们需要调用 HTTP 类中的open()和 send()两个方法，如下：httpRequest.open(GET, http:/www.example.org/some.file, true);AJAX 技术在网页编程的实现页 7/29httpRequest.send(null);open()的第一个参数是 HTTP 请求方式GET，POS
13、T 或任何服务器所支持的您想调用的方式。 按照 HTTP 规范，该参数要大写；否则，某些浏览器(如Mozilla)可能无法处理请求。 第二个参数是请求页面的 URL。 第三个参数设置请求是否为异步模式。如果是 TRUE，JavaScript 函数将继续执行，而不等待服务器响应。这就是“AJAX”中的“A” 。send()的参数是 QueryString。第二步：处理服务器响应信息用 JavaScript 来创建 XMLHttpRequest 类向服务器发送一个 HTTP 请求后，接下来要决定当收到服务器的响应后，需要做什么。在上面我们已经告诉了HTTP 由哪个 JavaScript 函数来处理
14、服务器响应信息。下面我们将在该函数内说明要如何处理。首先，要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了 readyState 属性来对服务器响应进行判断。 readyState 的取值如下： 0 (未初始化 ) 1 (正在装载 ) 2 (装载完毕 ) 3 (交互中 ) 4 (完成 ) 所以只有当 readyState=4 时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下： if (httpRequest.readyState = 4) / everything is good, the response
15、 is received else / still not ready AJAX 技术在网页编程的实现页 8/29当 readyState=4 时，一个完整的服务器响应已经收到了，接着，函数会检查 HTTP 服务器响应的状态值。完整的状态取值可参见 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)/ o
16、r 500 (Internal Server Error) response codes在检查完请求的状态值和响应的 HTTP 状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据： (1) 以文本字符串的方式返回服务器的响应 (2) 以 XMLDocument 对象方式返回响应2.3. 为什么要使用 Ajax 技术？在回答以上问题之前，我们将先了解什么是“富客户端” ，之后可以使我们为什么用 Ajax 技术的解释更有说服力。2.3.1. 什么是“富客户端” （Rich Client）？大家都知道在桌面程序上做一些操作的时候，程序给了我们反馈。移动鼠标的时候，光标改变了形状；当
17、鼠标停在上面的时候，按钮变亮了；按钮在鼠AJAX 技术在网页编程的实现页 9/29标移上去的时候会显示提示信息；工具栏上排列着各种丰富的控件；选中的文字也改变了颜色。窗口或者对话框被选中的时候，也和平常显得不一样了，等等。这些就是所谓“富”的交互。客户端是与另一个独立的进程相互通信的程序，后者通常运行在服务器上。一般来说，服务器总是要比客户端大一些，能力强一些，配置更好一些，因为在服务器上通常要存储浩如烟海的信息。客户端程序使得最终用户可以查看和修改这些信息，当多个客户端连接在同一个服务器上的时候，可以在它们之间共享这些信息。综合来说富客户端就是“富有表现能力的可与远程服务器相互通信的程序”
18、。Web 浏览器就是一个典型的客户端，它与 Web 服务器通信，请求需要的页面。浏览器有丰富的功能，但是当我们把特定网站的 Web 页面看作是一个应用时，这些通用的浏览功能实际上和应用关系不大。一个 Web 应用可以包括一大堆通用信息和个性化信息的超链接。但是由于 Web 浏览器使用基于文档的操作，即使其中的大连内容是一模一样，每次发送新页面都必须要重新发送整个文档内容。通常与服务器交互的方式已是点击那些超链接或填写一些表格。不然 Web 浏览器不能将我的列表从一个页面带到另一个页面，我要是想同时看到更多一些东西也不行，因为我无法改变页面上局部内容区域的大小。传统的Web 应用程序显然不能成为
19、一个富客户端。2.3.2. 谁挡了传统 Web 应用程序的路？桌面程序可以实现操作的及时反馈，原因在于桌面程序进行的是本地调用，任何的读、写操作都在本地技术集中的内存中进行。AJAX 技术在网页编程的实现页 10/29（图 2.3.2-1）本地过程调用的顺序图。参与者很少，因为程序逻辑与数据模型都保存在本地内存中，并且彼此可以直接访问远程调用和本地调用不可同日而语，在现有的技术水平之下，网络通信仍然是一件代价高昂的事情（也就是说，通常很慢，而且并不可靠） 。而在有远程调用的情况下，位于网络两端的通信双方为了发送和接收数据在底层需要进行大量计算（图 2.3.2-2） 。比起数据在线路上的往返，这
20、些计算需要消耗更多的时间。这就是大家说的网络延时。（图 2.3.2-2）远程过程调用的顺序图。一台机器的程序逻辑尝试操作另外一台机器上的数据模型。一个理想的用户界面最起码的水平模拟我们在真实世界中的体验。交互的基本规则之一就是，当我们推一下、刺一下或者捅一下某个东西的时候，它立刻就会响应。响应的时间只要稍微拖长一点点，就会使人困惑，分散其注意力，把关注点从手头的任务转移到用户界面上。网络延迟是导致实际应用的交互性糟糕的一个普遍原因。AJAX 技术在网页编程的实现页 11/292.3.3. 程序员的解决方案实际上，网络延迟问题和相关的解决方案由来已久。在老的 C/S 模式中，当设计不佳的客户端程
21、序碰上了高负载的服务器时，用户界面就会出现让人难以忍受的延迟。即便是在如今的因特网时代，当切换页面时，如果浏览器半天出不来东西，那么这种糟糕的情况很可能就是因为网络延迟造成的。在现有技术条件下，我们暂时还没有办法消除网络延迟，但是至少有一个对策，那就是采用异步方式处理远程调用。为什么异步交互处理能成为我们要的解决方案？这里我们将引用Ajax in Action一书中的例子加以说明。在我每天早上必做的事中，很重要的一项是叫醒我的孩子去上学。我可以站在床边把他们折腾醒，催着他们起床穿衣，但这是一种很耗费时间的方法，总要耗费我很多宝贵的早间时光（图 2.3.3-1） 。我要叫醒孩子，看看窗外，往往会
22、忽略了喂猫。孩子们起来之后会问我要早餐。就像服务器端的进程一样，孩子们起床总是慢吞吞的。如果我遵循同步交互模式，就要等他们老半天。不过，只要他们嘟囔一句“我醒了” ，我就可以先去干其他的事，需要时再回来看看他们。AJAX 技术在网页编程的实现页 12/29（图 2.3.3-1）同步处理（图 2.3.3-1）在我每日早晨必做的事中，以同步方式响应用户输入的顺序图。顺序图中纵向表示时间的流逝，其中的阴影区域表示了我被阻塞不能接受其他输入的时间长度。（图 2.3.3-2）异步处理（图 2.3.3-2）以异步方式响应用户输入的顺序图。如果遵循异步的输入模式，我可以让孩子们在醒来的时候通知我。在他们缓慢
23、的起床过程中，我可以继续从事其他活动，这使得我被阻塞的时间大大缩短。Ajax 正是一种 “富客户端 ”技术。Ajax 背后的技术有能力将 Web 页面转换成某种完全不同的新东西。Ajax 提供了灵活多样的界面控制元素，这些控制元素可以很好的与数据模型相结合。传统的因特网模型使用线性的设计，提供给用户一些选择然后用户发送选择结果给服务器，这种单一的模式不符合应用程序的灵活交互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的缺点包括页面打开缓慢和降低网络带宽。如果采用富客户界面，可以从以前的服务器响应影响整个界面，转移到只有收到请求的应用程序部分才会做出相应的变化。这本质上意味着界面被分解成
24、许多独立的模块，这些模块都会对收到的信息做出相应的反应，有些会和服务器端进行交互，有些是这些模块之间的AJAX 技术在网页编程的实现页 13/29通信。2.3.4. Ajax 的一个简单例子摩客电子杂志 Web 应用程序的基本是模式传统的 Web 应用，需要刷新整个页面，但是在一些需要信息及时反馈、页面局部更新、操作性强的地方都使用 Ajax 驱动的。只要经常在网络上游荡的朋友会发现一个很普遍的问题，那就是注册用户名才能使用网站的更多、更强大的功能。但是这个注册过程是最让人烦躁的。为什么？通常在一个网站注册一个用户名他要求的不仅仅是用户名和密码，还有很多相关个人信息。它也许会让你花费十分钟的时
25、间填一张表格，起始你会很开心地将整张表格填完然后提交。接下来你会很火，浏览器刷新出一个页面告诉你申请的用户名已经存在、两个密码不一致、表项漏填等等。然而事情并没有结束，当你在花十分钟时间重填表格仍然可能出错，特别在一个被很多人光顾的网站用户名申请重复的可能性是非常高的。下面是摩客电子杂志用户注册的例子，它将告示你王占注册再 Ajax 驱动下的与众不同。（图 2.4.1-1）用户注册界面遵照 MVC，视图有两个主要的责任：它必须为用户提供一个可视的界面，以便触发事件，事件用来与控制器对话；它也许要在模型改变时作出相应，更新自己，通常需要再次通过控制其进行通信。为了保持控制器和视图分离，我们采用变
26、成方式添加事件。给原素福家唯一的 ID，以每个元素为基础指定时间处理函数。AJAX 技术在网页编程的实现页 14/29再 HTML 试图代码中附加 ID：用户名：下面的代码存在于作为逻辑控制部分的 JavaScript（.JS）文件内，给定元素的相应函数：var username=document.getElementById(“username“);username.onkeyup=checkUsername;document.getElementById(“checkUsername“).onclick=checkUsername;function checkUsername()if(us
27、ername.value!=“) checkServer(username.value);function checkServer(username)ajaxHandler.sendRequest(“GET“,“checkUsername.php?username=“+username,true,null);function onreadystatechange_checkUsername(httpRequest)if (httpRequest.readyState = = 4) if (httpRequest.status = = 200) AJAX 技术在网页编程的实现页 15/29/ p
28、erfect!var returnValue=httpRequest.responseText;if(returnValue=“false“)document.getElementById(“usernameAccept“).className=“iconAccept“;elsedocument.getElementById(“usernameAccept“).className=“iconReject“; else httpRequest.responseText 表服务器相应返回的文本信息。当然返回的信息可以是 XML，其形式：xmldoc = httpRequest.responseXM
29、L;服务器端 PHP 代码：$isExist=“false“;/在数据库中查寻用户名是否存在，存在$isExist 置“true“echo $isExist;（图 2.4.1-2）没有被注册AJAX 技术在网页编程的实现页 16/29从（图 2.4.1-2）中可以看出在输入的同时输入框右边绿勾显示，表示“mingyu”还没有被注册使用。（图 2.4.1-3）用户名已经存在从（图 2.4.1-3）与（图 2.4.1-2）比较可以发现输入框右边变成红叉了，表示“mingyuan ”用户名已经存在。效果非常明显，在 Ajax 驱动下，在我们从键盘输入的同时我们能够看到输入的用户名有名有被占用，不用像
30、传统 Web 应用那样必须进入另一个页面才能显示结果，在同一个叶面不用刷新的情况下轻松的一服务器交互。当然，在本小节开头所的那种情况再也不可能发生。2.4. Ajax 技术在 Moker 工程的应用2.4.1. Moker 目标要求目标：网站主要定位是提供电子杂志浏览与下载，能够让用户使用网站上现有的或者其他用户上传的素材在线 DIY，然后将结果保存成作品并收藏或者发布。网站将提供一个良好的用户与网站交互、用户与用户交流的平台，在尽量提高网络资源利用率的前提下，保证行业资讯的时效性和专业性。网站使用者的角色包括：网站管理者和网站用户。管理者可对网站的所有信息进行浏览、发布、删除、编辑等操作，是
31、网站部分模块的主要信息资源提供者；网站用户除了基本的编辑个人基本信息外，还可以上传并管理自己的素AJAX 技术在网页编程的实现页 17/29材，并使用自己和其他用户上传的素材进行个性化的电子杂志设计，最终作为个人作品发布到网站上面与其他用户分享。用户还可以对杂志、作品、素材等进行点评和评分，参与网站部分信息的管理。特点：网站界面将以简洁、清爽为主要设计风格，在保证良好视觉效果的同时，也提高了用户的浏览速度。功能上在保证浏览速度的同时，将尽可能地提高用户与网站的交互性，激发用户的积极性和主动性。技术上我们将利用 Ajax 技术来实现比如表单提交、用户评分、用户登录、在线修改、在线点评等交互操作，
32、以改善用户体验。2.4.2. 网站系统要求与开发环境2.4.2.1. 网站系统该系统运行环境 Linux Apache PHP MYSQL说明：Linux:服务器运行操作系统为 Linux；Apache:Web 服务器软件 Apache HTTP Server；PHP:服务端脚本语言（“ PHP: Hypertext Preprocessor”，超文本预处理器） ；MYSQL:一款免费的数据库管理软件。2.4.2.2. 系统开发环境 Windows + Apache + PHP + MYSQL + IE + FireFox说明：网页在不同的浏览器上有一致的显示效果，在开发时要考虑浏览器兼容性。
33、网页要 w3c 的 xhtml 和 css 表现形式。IE 用来作开发测试，FireFox 用来兼容性测试（Firefox 浏览 w3c 标准较接近） 。开发环境设置：网上下载 Apache Http Server 2.2、PHP5、MYSQL 、Firefox, 安装各个软件。设置 Apache 内 httpd.conf 文件，使 Apache 加载 PHP5 模块以及设置服务AJAX 技术在网页编程的实现页 18/29器端网页放置的虚拟位置；设置 php5.ini，添加 PHP5 对 MYSQL 和一些相关功能的支持；在 http:/ 上为 Firefox 下载 Firebug 插件（Fi
34、rebug 是一个可以跟踪、调试 JavaScript 的插件） ；2.4.3. Moker 工程的具体实现Moker 电子杂志下载网站实现功能：实现功能 用户模块图片素材上传 图片素材浏览 电子杂志展示 电子杂志下载 电子杂志在线生成（图 2.4.3-1）Moker 电子杂志实现功能其中我们的学生小组主要任务是网站的 PHP 程序部分。包括用户模块、图片素材上传、图片素材浏览、电子杂志展示等部分。我在该项目实现的是用户系统的用户模块和图片素材管理模块。用户激活后即拥有图片素材上传、管理权限，登录后可在自己的用户目录下建立、管理目录，可新建、管理素材标签，可上传并管理自己的图片素材。此外用户还
35、将拥有一个图片素材收藏夹，用于收藏用户喜欢的图片素材，用户收藏夹下也可以新建、编辑标签操作。用户素材目录将不限制级数（即目录深度） ，素材标签与收藏夹标签级数为 1。2.4.3.1. 用户模块用户模块提供给用户的有三个功能：个人信息、修改信息、修改密码。用户注册激活后，注册用户通过该功能进行个人信息完善、查看以及密码修改。AJAX 技术在网页编程的实现页 19/29（图 2.4.3.1-1）个人信息查看（图 2.4.3.1-2）个人信息编辑AJAX 技术在网页编程的实现页 20/29（图 2.4.3.1-3）用户密码修改2.4.3.2. 图片素材管理模块 素材管理登录后可在自己的用户目录下建立
36、、管理目录，可新建、管理素材标签，可上传并管理自己的图片素材。这些素材将被用于用户自定义的电子杂志生成上面。在这一模块中，Ajax 技术肩背频繁的使用。用户无需在每一次操作是等待界面刷新和下一步操作。让服务器响应鼠标移动、拖拽或者键盘输入这样的用户事件，也就是说，服务器在用户身边为用户服务，而不是挡在用户前面，打断他的操作，以改善用户体验。AJAX 技术在网页编程的实现页 21/29（图 2.4.3.2-1）素材管理的文件夹显示效果。（图 2.4.3.2-2-a）素材管理的文件显示效果 a。（图 2.4.3.2-2-b）素材管理的文件显示效果 b。素材在管理上采用的是的可视人性化管理。在对以上
37、传的素材，用户可以像在 Windows 操作系统内一样浏览素材。如（图 2.4.3.2-1）显示的是文件夹，（图 2.4.3.2-2-a）显示的是文件夹里的素材文件。用户可以对自己的素材进行编辑和删除处理，只要用鼠标点击相应的功能。系统不用刷新马上显示效果，应为该任务在后台采用 Ajax 技术向服务器发出请求了。AJAX 技术在网页编程的实现页 22/29 素材上传Moker 电子杂志的素材来源主要有两方面：一是网站管理员上传；另一个是注册用户上传共享。后者是网站素材的主要来源。（图 2.4.3.2-3）素材上传素材上传时，用户可以选择素材存储文件夹目录（有关文件夹的管理下文件将给出） 、素材
38、类别（标签，一个素菜可以归类于多种标签）和填写素材简要说明。这些将是生成的电子杂志的内容。 标签管理标签使用户素材的归类，方便用户对素材的查询、管理。当用户在生成电子杂志需要大量的素材时，用户可以根据素材类型搜索其他用户共享在该网站上的素材。AJAX 技术在网页编程的实现页 23/29（图 2.4.3.2-4）标签管理 目录管理目录管理是本模块实现最难的一部分。目录要求无限级生成，并且要求服务器与客户端的文件夹结构实时同步。在设计上面，当用户注册激活后，服务器系统为该用户生成一个文件夹，该文件夹为该用户的根目录文件夹（文件夹名在用户数据库中与用户名关联，每个用户有一个与其他用户文件夹名不同的文
39、件夹） 。以后用户自定义生成的文件夹都存储位该文件夹的下级文件夹。文件夹的管理方法与硬盘的文件管理类似，但也有不同。相同的是文件夹的位置像硬盘记录文件位置记录在 Index 中而记录在数据库中。如（图 2.4.3.2-1）的文件位置“根目录 各地风情 中国 福建 ”记录在数据库为一条数据为“用户目录名各地风情中国福建” 。不同的是，如果用户将文件夹位置改变，服务器相应的将用户在服务器上的文件夹真实位置也改变了。这在操作系统中文件位置改变但在硬盘的位置不改变，改变的是 Index 关联信息是不同的。AJAX 技术在网页编程的实现页 24/29（图 2.4.3.2-5）目录管理目录删除时，客户端
40、Web 应用在用户点击删除操作室并确定时，会向服务器发送闪出某文件夹的 Ajax 请求。服务器接受请求后在数据库删除该目录纪录以及在服务器文件系统中的目录，当一切操作成功后返回给用户一个成功信号，让客户端隐藏被删除文件夹。（图 2.4.3.2-6）目录删除操作AJAX 技术在网页编程的实现页 25/29（图 2.4.3.2-7）目录删除后结果（图 2.4.3.2-8）目录添加操作AJAX 技术在网页编程的实现页 26/29（图 2.4.3.2-8）目录移动操作同样当目录移动、目录添加时，与目录删除有一样的操作流程。同样要同时在服务器数据库与服务器文件系统进行修改处里。AJAX 技术在网页编程的
41、实现页 27/293. 结论传统的Web应用允许用户填写表单(form)，当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 与此不同，Ajax应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的Web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就
42、能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。 Moker 电子杂志网站使用了 Ajax 技术之后，用户可以不用刷新页面对网页内容进行更新。由于 Ajax 在对网页内容更新时所下载的是需要更新部分的内容的数据，而其他的如界面布局和武官部分都在客户端被处理。所以，大大减少了从服务器到客户端的数据传送量，减少服务器负担、加快服务器对用户请求的响应，改善用户交互。AJAX 技术在网页编程的实现页 28/294. 致谢感谢林坤辉教授和厦门盛世集团姚总给以我论文写作的帮助和指点。感谢厦门盛世网络集团给我实习机会，让我的论文有技术支持，特别是
43、Jack（张朝辉）的无私帮助。在这里还要感谢各位同学在论文写作上提供提醒、帮助。 AJAX 技术在网页编程的实现页 29/295. 参考文献1 Dave CraneEric Pascarello with Darren James.Ajax in actionM. 209 Bruce Park Avenue Greenwich, CT 06830, USA: Manning Publications Co.,2006. 2 David Flanagan.JavaScript: The Definitive Guide, 5th EditionM. 1005 Gravenstein Highwa
44、y North, Sebastopol, CA 95472, USA: OReilly Media, Inc.,2006. 3 Keith Schengili-Roberts.Core CSS: Cascading Style Sheets, 2nd EditionM. One Lake StreetUpper Saddle River, New Jersey 07458,USA: Pearson Education, Inc.,2003. 4 Paul Hatcher and John Gosney.JavaScript Professional ProjectsM. 25 Thomson Place Boston, MA 02210， USA: Premier Press, 2002. 5 Julie C. Meloni.PHP 5 Fast & Easy Web DevelopmentM. 25 Thomson Place Boston, MA 02210,USA: Thomson Course Technology PTR,2004. 6 王沛,冯曼菲. 征服Ajax：Web2.0 开发技术详解M.北京: 人民邮电出版社,2006
