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

AJAX 技术在网页编程的实现 页 1/29 AJAXAJAX 技术在网页编程的实现技术在网页编程的实现 摘要摘要 传统的因特网模型使用线性的设计，提供给用户一些选择（超链接、表单） ，然后用户发送选择结果给服务器。这种单一的模式不符合应用程序的灵活交 互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的缺点包括页面 打开缓慢和降低网络可用带宽。 Ajax 是一种“富客户端”技术。它提供了灵活多样的界面控制元素，这些 控制元素可以很好的与数据模型相结合。如果采用富客户界面，可以从以前的 服务器响应影响整个界面，转移到只有收到请求的应用程序部分才会做出相应 的变化。这本质上意味着界面被分解成许多独立的模块，这些模块都会对收到 的信息做出相应的反应，有些会和服务器端进行交互，有些是这些模块之间的 通信。 Ajax 应用可以仅向服务器发送并取回必需的数据，它使用 SOAP 或其它一 些基于 XML 的 Web service 接口，并在客户端采用 JavaScript 处理来自服务器 的响应。因为在服务器和浏览器之间交换的数据大量减少，同时很多的处理工 作可以在发出请求的客户端机器上完成，结果我们就能看到响应更快的应用。 Summary The traditional internet model uses linear design pattern. It provides some choices, such as hyperlinks and forms to users. And then the users send their result to the server. This simple pattern doesnt conform to the applications nimble and interactive need and the users wish. The frequent request and reloading page result in many disadvantages, including slowing down the speed of opening a page and reducing the usable bandwidth. Ajax is a kind of rich-client technology. It provides users various and nimble user interface (UI) control elements, which can unify with the data model perfectly. Using rich client UI, It will be changed from the former state that the server response affects the entire UI to that just only part of application which receives request makes corresponding change. Some parts of the application will interactive with remote server, and some will communicate between modules. Ajax application can just only sends required data to the remote server or AJAX 技术在网页编程的实现 页 2/29 receives required date from the remote server. It uses SOAP (Simple Object Access Protocol) or any other XML base Web interfaces and JavaScript to handle the response from remote server. Because of the reducing of interactive between server and browser, and lots of jobs can be done at the local client, we can see that response is faster than before. 目录目录 1.引言.3 2.AJAX 技术应用3 2.1.什么是 AJAX?.3 2.2.AJAX的基本工作原理.4 2.3.为什么要使用 AJAX技术？7 2.3.1.什么是“富客户端” （Rich Client）？ 7 2.3.2.谁挡了传统 Web 应用程序的路？.8 2.3.3.程序员的解决方案.10 2.3.4.Ajax 的一个简单例子11 2.4.AJAX技术在 MOKER工程的应用.15 2.4.1.Moker 目标要求.15 2.4.2.网站系统要求与开发环境.16 2.4.3.Moker 工程的具体实现.17 3.结论.25 4.致谢.26 5.参考文献.27 AJAX 技术在网页编程的实现 页 3/29 Contents 1.INTRODUCE3 2.APPLICATION OF AJAX TECHNOLOGY .3 2.1.WHAT IS AJAX?.3 2.2.THE BASIC PRINCIPLE OF AJAX4 2.3.WHY WE USE AJAX？7 2.3.1.What is rich client?7 2.3.2.What blocks classic Web application？8 2.3.3.Programmers solution10 2.3.4.A simple sample of Ajax.11 2.4.AJAX IN MOKER PORJECT15 2.4.1.Mokers target.15 2.4.2.Web sites server system and develop environment.16 2.4.3.The detail implement of Moker project 17 3.CONCLUSION .25 4.THANKS.26 5.REF 俄 RENCE.27 AJAX 技术在网页编程的实现 页 4/29 1. 引言引言 一个理想的无形的用户界面应该是这样的：当用户需要时提供给用户所有 功能，不需要时用户可以不受干扰地专注于手头的问题。然而，这样理想的用 户界面是可遇而不可求的。当今用于显示文档内容的基本的 Web 浏览器技术显 然不能满足实现一个理想的用户界面一个可以完成更高层次人物界面的要 求。 Ajax (Asynchronous JavaScript + XML)由 Jesse James Garrett 首先提 出，一种创建交互式网页应用的网页开发技术。Ajax 采用一系列已有的甚至是 老的技术，将这些技术锻造、延伸，超越其原有的概念，让我们可以应付 Web 客户端程序所要面对的复杂情况。Ajax 将使实现一个理想的 Web 用户界面成为 可能。 2. Ajax 技术应用技术应用 2.1. 什么是 Ajax? AJAX 全称为“Asynchronous JavaScript and XML” ， （异步 JavaScript 和 XML） ，是指一种创建交互式网页应用的网页开发技术。其实 Ajax 严格意义上 讲它不是一种技术，应该说是一种方法使用几种现有技术开发外观及操作 类似桌面软件的 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“富客户端”异步交互客户端服务（cross- browser-asynchronous-rich-client-dynamic-HTML-client-server）技术起了一个简 洁的名字：Ajax。 2.2. Ajax 的基本工作原理 Ajax 的工作原理相当于在用户和服务器之间加了个中间层，使用户操作 与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利 于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约 ISP（Internet 服务提供者）的空间及带宽租用成本的目的。 Ajax 使用非标准的对象 XMLHttpRequest 与服务器通信。它可以接受、发 送多种形式的信息，包括 XML、HTML 甚至文本文件。当基本上遵循以下几个 基本步骤： 第一步：创建一个向服务器发送第一步：创建一个向服务器发送 HTTP 请求的请求的 XMLHttpRequest 对象对象 在使用 JavaScript 向服务器发送 HTTP 请求之前，我们需要创建一个 XMLHttpRequest 的对象。在 Internet Exploerer（IE）浏览器内，我们可以从 ActiveX 对象引入，被称为 XMLHTTP；在非 IE 浏览器例如 Mozilla、Netscape、Safari 则通过实现一个支持 Microsoft 的 ActiveX 的方法与 属性的 XMLHttpRequest 类。 var httpRequest; if (window.XMLHttpRequest) / Mozilla, Safari, . httpRequest = new XMLHttpRequest(); if (httpRequest.overrideMimeType) AJAX 技术在网页编程的实现 页 6/29 httpRequest.overrideMimeType(text/xml); / See note below about this line else if (window.ActiveXObject) / IE try httpRequest = new ActiveXObject(“Msxml2.XMLHTTP“); catch (e) try httpRequest = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e) 如果没有指定从服务业相应的 XML MIME 类型，有一些版本的 Mozilla 浏 览器可能不能正常运行。为了适应不同版本的浏览器，我们可以调用一个内部 方法来覆盖服务器发送来的头部，已房改头部不是“text/xml”类型。 httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType(text/xml); 接下来，我们需要定义一个方法告诉浏览器应该要做什么，当浏览器节受 到来自服务器的响应信息。这将通过设置 httpReqest 的属性 onreadystatechange 得知来实现。 httpRequest.onreadystatechange = function() / do the thing ; 再接下来，我们要做的是向服务器发送请求。我们需要调用 HTTP 类中的 open()和 send()两个方法，如下： httpRequest.open(GET, /some.file, true); AJAX 技术在网页编程的实现 页 7/29 httpRequest.send(null); open()的第一个参数是 HTTP 请求方式GET，POST 或任何服务器所支持 的您想调用的方式。 按照 HTTP 规范，该参数要大写；否则，某些浏览器(如 Mozilla)可能无法处理请求。 第二个参数是请求页面的 URL。 第三个参数设 置请求是否为异步模式。如果是 TRUE，JavaScript 函数将继续执行，而不等待 服务器响应。这就是“AJAX”中的“A” 。 send()的参数是 QueryString。 第二步：处理服务器响应信息第二步：处理服务器响应信息 用 JavaScript 来创建 XMLHttpRequest 类向服务器发送一个 HTTP 请求后， 接下来要决定当收到服务器的响应后，需要做什么。在上面我们已经告诉了 HTTP 由哪个 JavaScript 函数来处理服务器响应信息。下面我们将在该函数内说 明要如何处理。 首先，要检查请求的状态。只有当一个完整的服务器响应已经收到了，函 数才可以处理该响应。XMLHttpRequest 提供了 readyState 属性来对服务器响应 进行判断。 readyState 的取值如下： 0 (未初始化) 1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成) 所以只有当 readyState=4 时，一个完整的服务器响应已经收到了，函数才 可以处理该响应。具体代码如下： if (httpRequest.readyState = 4) / everything is good, the response 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) / or 500 (Internal Server Error) response codes 在检查完请求的状态值和响应的 HTTP 状态值后，就可以处理从服务器得 到的数据了。有两种方式可以得到这些数据： (1) 以文本字符串的方式返回服务器的响应 (2) 以 XMLDocument 对象方式返回响应 2.3. 为什么要使用 Ajax 技术？ 在回答以上问题之前，我们将先了解什么是“富客户端” ，之后可以使我 们为什么用 Ajax 技术的解释更有说服力。 2.3.1. 什么是“富客户端” （Rich Client）？ 大家都知道在桌面程序上做一些操作的时候，程序给了我们反馈。移动鼠 标的时候，光标改变了形状；当鼠标停在上面的时候，按钮变亮了；按钮在鼠 AJAX 技术在网页编程的实现 页 9/29 标移上去的时候会显示提示信息；工具栏上排列着各种丰富的控件；选中的文 字也改变了颜色。窗口或者对话框被选中的时候，也和平常显得不一样了，等 等。这些就是所谓“富”的交互。客户端是与另一个独立的进程相互通信的程 序，后者通常运行在服务器上。一般来说，服务器总是要比客户端大一些，能 力强一些，配置更好一些，因为在服务器上通常要存储浩如烟海的信息。客户 端程序使得最终用户可以查看和修改这些信息，当多个客户端连接在同一个服 务器上的时候，可以在它们之间共享这些信息。综合来说富客户端就是“富有 表现能力的可与远程服务器相互通信的程序” 。 Web 浏览器就是一个典型的客户端，它与 Web 服务器通信，请求需要的 页面。浏览器有丰富的功能，但是当我们把特定网站的 Web 页面看作是一个应 用时，这些通用的浏览功能实际上和应用关系不大。一个 Web 应用可以包括一 大堆通用信息和个性化信息的超链接。但是由于 Web 浏览器使用基于文档的操 作，即使其中的大连内容是一模一样，每次发送新页面都必须要重新发送整个 文档内容。通常与服务器交互的方式已是点击那些超链接或填写一些表格。不 然 Web 浏览器不能将我的列表从一个页面带到另一个页面，我要是想同时看到 更多一些东西也不行，因为我无法改变页面上局部内容区域的大小。传统的 Web 应用程序显然不能成为一个富客户端。 2.3.2. 谁挡了传统 Web 应用程序的路？ 桌面程序可以实现操作的及时反馈，原因在于桌面程序进行的是本地调用， 任何的读、写操作都在本地技术集中的内存中进行。 AJAX 技术在网页编程的实现 页 10/29 （图 2.3.2-1）本地过程调用的顺序图。 参与者很少，因为程序逻辑与数据模型都保存在本地内存中，并且彼此可 以直接访问 远程调用和本地调用不可同日而语，在现有的技术水平之下，网络通信仍 然是一件代价高昂的事情（也就是说，通常很慢，而且并不可靠） 。而在有远程 调用的情况下，位于网络两端的通信双方为了发送和接收数据在底层需要进行 大量计算（图 2.3.2-2） 。比起数据在线路上的往返，这些计算需要消耗更多的时 间。这就是大家说的网络延时。 （图 2.3.2-2）远程过程调用的顺序图。 一台机器的程序逻辑尝试操作另外一台机器上的数据模型。 一个理想的用户界面最起码的水平模拟我们在真实世界中的体验。交互的 基本规则之一就是，当我们推一下、刺一下或者捅一下某个东西的时候，它立 刻就会响应。响应的时间只要稍微拖长一点点，就会使人困惑，分散其注意力， 把关注点从手头的任务转移到用户界面上。网络延迟是导致实际应用的交互性 糟糕的一个普遍原因。 AJAX 技术在网页编程的实现 页 11/29 2.3.3. 程序员的解决方案 实际上，网络延迟问题和相关的解决方案由来已久。在老的 C/S 模式中， 当设计不佳的客户端程序碰上了高负载的服务器时，用户界面就会出现让人难 以忍受的延迟。即便是在如今的因特网时代，当切换页面时，如果浏览器半天 出不来东西，那么这种糟糕的情况很可能就是因为网络延迟造成的。在现有技 术条件下，我们暂时还没有办法消除网络延迟，但是至少有一个对策，那就是 采用异步方式处理远程调用。为什么异步交互处理能成为我们要的解决方案？ 这里我们将引用Ajax in Action一书中的例子加以说明。 在我每天早上必做的事中，很重要的一项是叫醒我的孩子去上学。我可以 站在床边把他们折腾醒，催着他们起床穿衣，但这是一种很耗费时间的方法， 总要耗费我很多宝贵的早间时光（图 2.3.3-1） 。我要叫醒孩子，看看窗外，往往 会忽略了喂猫。孩子们起来之后会问我要早餐。就像服务器端的进程一样，孩 子们起床总是慢吞吞的。如果我遵循同步交互模式，就要等他们老半天。不过， 只要他们嘟囔一句“我醒了” ，我就可以先去干其他的事，需要时再回来看看他 们。 AJAX 技术在网页编程的实现 页 12/29 （图 2.3.3-1）同步处理 （图 2.3.3-1）在我每日早晨必做的事中，以同步方式响应用户输入的顺序 图。顺序图中纵向表示时间的流逝，其中的阴影区域表示了我被阻塞不能接受 其他输入的时间长度。 （图 2.3.3-2）异步处理 （图 2.3.3-2）以异步方式响应用户输入的顺序图。如果遵循异步的输入模 式，我可以让孩子们在醒来的时候通知我。在他们缓慢的起床过程中，我可以 继续从事其他活动，这使得我被阻塞的时间大大缩短。 Ajax 正是一种“富客户端”技术。Ajax 背后的技术有能力将 Web 页面转 换成某种完全不同的新东西。Ajax 提供了灵活多样的界面控制元素，这些控制 元素可以很好的与数据模型相结合。传统的因特网模型使用线性的设计，提供 给用户一些选择然后用户发送选择结果给服务器，这种单一的模式不符合应用 程序的灵活交互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的 缺点包括页面打开缓慢和降低网络带宽。如果采用富客户界面，可以从以前的 服务器响应影响整个界面，转移到只有收到请求的应用程序部分才会做出相应 的变化。这本质上意味着界面被分解成许多独立的模块，这些模块都会对收到 的信息做出相应的反应，有些会和服务器端进行交互，有些是这些模块之间的 AJAX 技术在网页编程的实现 页 13/29 通信。 2.3.4. Ajax 的一个简单例子 摩客电子杂志 Web 应用程序的基本是模式传统的 Web 应用，需要刷新整 个页面，但是在一些需要信息及时反馈、页面局部更新、操作性强的地方都使 用 Ajax 驱动的。 只要经常在网络上游荡的朋友会发现一个很普遍的问题，那就是注册用户 名才能使用网站的更多、更强大的功能。但是这个注册过程是最让人烦躁的。 为什么？通常在一个网站注册一个用户名他要求的不仅仅是用户名和密码，还 有很多相关个人信息。它也许会让你花费十分钟的时间填一张表格，起始你会 很开心地将整张表格填完然后提交。接下来你会很火，浏览器刷新出一个页面 告诉你申请的用户名已经存在、两个密码不一致、表项漏填等等。然而事情并 没有结束，当你在花十分钟时间重填表格仍然可能出错，特别在一个被很多人 光顾的网站用户名申请重复的可能性是非常高的。下面是摩客电子杂志用户注 册的例子，它将告示你王占注册再 Ajax 驱动下的与众不同。 （图 2.4.1-1）用户注册界面 遵照 MVC，视图有两个主要的责任：它必须为用户提供一个可视的界面， 以便触发事件，事件用来与控制器对话；它也许要在模型改变时作出相应，更 新自己，通常需要再次通过控制其进行通信。为了保持控制器和视图分离，我 们采用变成方式添加事件。给原素福家唯一的 ID，以每个元素为基础指定时间 处理函数。 AJAX 技术在网页编程的实现 页 14/29 再 HTML 试图代码中附加 ID： 用户名： 下面的代码存在于作为逻辑控制部分的 JavaScript（.JS）文件内，给定元 素的相应函数： var username=document.getElementById(“username“); username.onkeyup=checkUsername; document.getElementById(“checkUsername“).onclick=checkUsername; function checkUsername() if(username.value!=“) checkServer(username.value); function checkServer(username) ajaxHandler.sendRequest(“GET“,“checkUsername.php?username=“+userna me,true,null); function onreadystatechange_checkUsername(httpRequest) if (httpRequest.readyState = = 4) if (httpRequest.status = = 200) AJAX 技术在网页编程的实现 页 15/29 / perfect! var returnValue=httpRequest.responseText; if(returnValue=“false“) document.getElementById(“usernameAccept“).className=“iconAccept “; else document.getElementById(“usernameAccept“).className=“iconReject“; else httpRequest.responseText 表服务器相应返回的文本信息。当然返回的信息可 以是 XML，其形式：xmldoc = httpRequest.responseXML; 服务器端 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 驱动下，在我们从键盘输入的同时我们能够看到 输入的用户名有名有被占用，不用像传统 Web 应用那样必须进入另一个页面才 能显示结果，在同一个叶面不用刷新的情况下轻松的一服务器交互。当然，在 本小节开头所的那种情况再也不可能发生。 2.4. Ajax 技术在 Moker 工程的应用 2.4.1. Moker 目标要求 目标： 网站主要定位是提供电子杂志浏览与下载，能够让用户使用网站上现有的 或者其他用户上传的素材在线 DIY，然后将结果保存成作品并收藏或者发布。 网站将提供一个良好的用户与网站交互、用户与用户交流的平台，在尽量提高 网络资源利用率的前提下，保证行业资讯的时效性和专业性。 网站使用者的角色包括：网站管理者和网站用户。管理者可对网站的所有 信息进行浏览、发布、删除、编辑等操作，是网站部分模块的主要信息资源提 供者；网站用户除了基本的编辑个人基本信息外，还可以上传并管理自己的素 AJAX 技术在网页编程的实现 页 17/29 材，并使用自己和其他用户上传的素材进行个性化的电子杂志设计，最终作为 个人作品发布到网站上面与其他用户分享。用户还可以对杂志、作品、素材等 进行点评和评分，参与网站部分信息的管理。 特点： 网站界面将以简洁、清爽为主要设计风格，在保证良好视觉效果的同时， 也提高了用户的浏览速度。功能上在保证浏览速度的同时，将尽可能地提高用 户与网站的交互性，激发用户的积极性和主动性。 技术上我们将利用 Ajax 技术来实现比如表单提交、用户评分、用户登录、 在线修改、在线点评等交互操作，以改善用户体验。 2.4.2. 网站系统要求与开发环境 . 网站系统 该系统运行环境 Linux Apache PHP MYSQL 说明： Linux:服务器运行操作系统为 Linux； Apache:Web 服务器软件 Apache HTTP Server； PHP:服务端脚本语言（“PHP: Hypertext Preprocessor” ，超文本预处理器） ； MYSQL:一款免费的数据库管理软件。 . 系统开发环境 Windows + Apache + PHP + MYSQL + IE + FireFox 说明：网页在不同的浏览器上有一致的显示效果，在开发时要考虑浏览器 兼容性。网页要 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 和一些相关功能的支持； 在 / 上为 Firefox 下载 Firebug 插件（Firebug 是一个 可以跟踪、调试 JavaScript 的插件） ； 2.4.3. Moker 工程的具体实现 Moker 电子杂志下载网站实现功能： 实现功能 用户模块 图片素材上传 图片素材浏览 电子杂志展示 电子杂志下载 电子杂志在线生成 （图 2.4.3-1）Moker 电子杂志实现功能 其中我们的学生小组主要任务是网站的 PHP 程序部分。包括用户模块、图 片素材上传、图片素材浏览、电子杂志展示等部分。我在该项目实现的是用户 系统的用户模块和图片素材管理模块。 用户激活后即拥有图片素材上传、管理权限，登录后可在自己的用户目录 下建立、管理目录，可新建、管理素材标签，可上传并管理自己的图片素材。 此外用户还将拥有一个图片素材收藏夹，用于收藏用户喜欢的图片素材，用户 收藏夹下也可以新建、编辑标签操作。用户素材目录将不限制级数（即目录深 度） ，素材标签与收藏夹标签级数为 1。 . 用户模块 用户模块提供给用户的有三个功能：个人信息、修改信息、修改密码。用 户注册激活后，注册用户通过该功能进行个人信息完善、查看以及密码修改。 AJAX 技术在网页编程的实现 页 19/29 （图 -1）个人信息查看 （图 -2）个人信息编辑 AJAX 技术在网页编程的实现 页 20/29 （图 -3）用户密码修改 . 图片素材管理模块 素材管理 登录后可在自己的用户目录下建立、管理目录，可新建、管理素材标签， 可上传并管理自己的图片素材。这些素材将被用于用户自定义的电子杂志生成 上面。在这一模块中，Ajax 技术肩背频繁的使用。用户无需在每一次操作是等 待界面刷新和下一步操作。让服务器响应鼠标移动、拖拽或者键盘输入这样的 用户事件，也就是说，服务器在用户身边为用户服务，而不是挡在用户前面， 打断他的操作，以改善用户体验。 AJAX 技术在网页编程的实现 页 21/29 （图 -1）素材管理的文件夹显示效果。 （图 -2-a）素材管理的文件显示效果 a。 （图 -2-b）素材管理的文件显示效果 b。 素材在管理上采用的是的可视人性化管理。在对以上传的素材，用户可以 像在 Windows 操作系统内一样浏览素材。如（图 -1）显示的是文件夹， （图 -2-a）显示的是文件夹里的素材文件。用户可以对自己的素材进行 编辑和删除处理，只要用鼠标点击相应的功能。系统不用刷新马上显示效果， 应为该任务在后台采用 Ajax 技术向服务器发出请求了。 AJAX 技术在网页编程的实现 页 22/29 素材上传 Moker 电子杂志的素材来源主要有两方面：一是网站管理员上传；另一个 是注册用户上传共享。后者是网站素材的主要来源。 （图 -3）素材上传 素材上传时，用户可以选择素材存储文件夹目录（有关文件夹的管理下文 件将给出） 、素材类别（标签，一个素菜可以归类于多种标签）和填写素材简要 说明。这些将是生成的电子杂志的内容。 标签管理 标签使用户素材的归类，方便用户对素材的查询、管理。当用户在生成电 子杂志需要大量的素材时，用户可以根据素材类型搜索其他用户共享在该网站 上的素材。 AJAX 技术在网页编程的实现 页 23/29 （图 -4）标签管理 目录管理 目录管理是本模块实现最难的一部分。目录要求无限级生成，并且要求服 务器与客户端的文件夹结构实时同步。在设计上面，当用户注册激活后，服务 器系统为该用户生成一个文件夹，该文件夹为该用户的根目录文件夹（文件夹 名在用户数据库中与用户名关联，每个用户有一个与其他用户文件夹名不同的 文件夹） 。以后用户自定义生成的文件夹都存储位该文件夹的下级文件夹。 文件夹的管理方法与硬盘的文件管理类似，但也有不同。相同的是文件夹 的位置像硬盘记录文件位置记录在 Index 中而记录在数据库中。如（图 - 1）的文件位置“根目录 各地风情 中国 福建 ”记录在数据库为一条 数据为“用户目录名各地风情中国福建” 。不同的是，如果用户将文件夹 位置改变，服务器相应的将用户在服务器上的文件夹真实位置也改变了。这在 操作系统中文件位置改变但在硬盘的位置不改变，改变的是 Index 关联信息是 不同的。 AJAX 技术在网页编程的实现 页 24/29 （图 -5）目录管理 目录删除时，客户端 Web 应用在用户点击删除操作室并确定时，会向服 务器发送闪出某文件夹的 Ajax 请求。服务器接受请求后在数据库删除该目录纪 录以及在服务器文件系统中的目录，当一切操作成功后返回给用户一个成功信 号，让客户端隐藏被删除文件夹。 （图 -6）目录删除操作 AJAX 技术在网页编程的实现 页 25/29 （图 -7）目录删除后结果 （图 -8）目录添加操作 AJAX 技术在网页编程的实现 页 26/29 （图 -8）目录移动操作 同样当目录移动、