基于Web的办公室自动化（OA）系统的设计与实现1

1、 PAGE I PAGE 27摘 要办公自动化，英文Office Automation，简称OA，是办公信息处理的自动化，它利用先进的技术，使人的各种办公业务活动逐步由各种设备、各种人机信息系统来协助完成，达到充分利用信息，提高工作效率和工作质量，提高生产率的目的。该OA管理系统基于B/S模式，以EclipsePHP Studio2008作为开发环境，运用PHP语言进行研发；并以Microsoft SQL Server 2000作为后台数据库进行创建和维护。总体上，该系统实现了登录模块，撰写公文，审批及阅读公文，发布及查看公告，查看系统日志等功能。可以说，它是一个功能较全的自动化办公管理系统。

2、关键字 : OA管理系统；数据库；PHP；自动化办公 PAGE IIABSTRACTOffice automation,English Office Automation, abbreviated as OA, the automation of information processing that work , it utilizes advanced technology, makes various official working operational activities of peoples help to finish by various apparatus , vario

3、us man-machine information systems progressively , reach and fully utilize information, improve working efficiency and work quality , the purpose to boost Productivity . OA management system is based on the B / S model to EclipsePHP Studio2008 as a development environment, the use of PHP development

4、 language; and Microsoft SQL Server 2000 database as a background to create and maintain. In general, the system achieved a login module, written document, approved and read the document, publish and view the notice, view the system log functions. It can be said that it is a more full-function offic

5、e automation management system. KEY WORDS : OA Management System；Database；PHP；Office automation PAGE III目 录 HYPERLINK l _Toc230349984 1.引 言1 HYPERLINK l _Toc230349985 2.项目背景2 HYPERLINK l _Toc230349986 2.1 管理系统的研究2 HYPERLINK l _Toc230349987 2.2 管理系统的发展趋势2 HYPERLINK l _Toc230349988 3需求分析3 HYPERLINK l

6、_Toc230349989 3.1 理解需求3 HYPERLINK l _Toc230349990 3.2 功能需求3 HYPERLINK l _Toc230349991 4.系统的功能设计4 HYPERLINK l _Toc230349992 4.1 功能设计概述44.2 OA管理系统的基本功能模块4 HYPERLINK l _Toc230350011 5.系统的数据库设计5 HYPERLINK l _Toc230350012 5.1 E-R图5 HYPERLINK l _Toc230350013 5.2数据库的设计5 HYPERLINK l _Toc230350017 6.界面设计与部分代

7、码7 HYPERLINK l _Toc230350018 6.1界面设计8 HYPERLINK l _Toc230350019 6.2 部分代码8 HYPERLINK l _Toc230350020 7.系统测试报告13 HYPERLINK l _Toc230350021 7.1 测试方案13 HYPERLINK l _Toc230350022 7.2 测试目的13 HYPERLINK l _Toc230350025 8.结论14 HYPERLINK l _Toc230350026 参考文献15 HYPERLINK l _Toc230350025 致 谢16 PAGE 131.引 言随着信息技

8、术的发展和计算机普及率和国内信息技术应用水平的提高，在办公过程中，以传统的纸质为媒介的工作方式和审批模式已经难以满足现代大规模集成的工业化生产的新需求，实现这种以计算机为媒介的无纸化办公自动化已经是提高企业单位办公效率、规范化管理的必然趋势。随着企业的发展和扩大，其企业的各种事务信息和业务数据将会不断以几何级的方式扩大。但是，以传统纸质为媒体的办公方式将这样各种各样的资料及信息记录的纸上，这样当面对巨量的信息资料时不但使得处理资料信息时容易导致各种错误的发生，而且使得企业内部门内上下级之间的信息发送与反馈造成不便，也使得各个部门的数据信息流通变得非常困难。所以在图书馆的存书量和业务量庞大，仅仅

9、靠传统的记账式管理是不可行的，传统的管理方法既浪费人力物力财力，又容易导致各种错误的发生。所以如何高效、方便、快捷、安全地处理各种办公事务以及传递和记录各种信息和资料。从而更大程度地提高工作人员的工作效率，成为一个突出的问题摆在现代化公司管理层的前面。因此，运用科学技术的成果，使企业公司的办公管理方式进入以计算机网络为媒介，以信息管理软件为基础实现联网协同化的办公管理环境，成为我们急需完成的首要任务。因而基于网络的自动化办公系统也因此应运而生。OA管理系统的产生，最大程度地提高员工办公的效率，实现了企业单位办公管理系统的智能化、系统化、信息化，这不仅解决了传统管理方式所带来的问题和满足了企业的

10、需求，同时也为企业在今后的扩展提供了有力的后备力量。在企业的长远发展中有着举足轻重的作用。本课题的基本内容是利用WEB及数据库技术创建一个办公自动化系统，提高办公效率和质量、辅助办公决策、实现无纸化办公。其中以PHP作为开发环境和以MSSQL作为数据库基础进行研发。预期研发出具有自己特色的自动化管理系统。高效完成包括信息采集、信息加工、信息传输、信息保存等任务。基于Web的办公室自动化(OA)系统的设计与实现 （学生姓名） （就读专业） （层次） （年级） （学号）2.项目背景2.1 管理系统的研究办公自动化于20世纪50年代提出, 在80年代至90年代得到了飞速的发展。办公自动化是以先进的科

11、学技术、信息技术、系统科学和行为科学为支柱的一门综合性技术。目前国内的OA系统在处于第二代OA系统阶段，从90年代中期开始的以网络技术和协同工作技术为主要特征，实现了工作流程自动化，即将收发文从传统的手工方式转向工作流自动化方式。第二代办公自动化系统，实现了不同职能部门间的工作流程自动化。不同部门及其工作人员工作间的协作大大加强，从而使政府/企业办公的效率得到较大的提高。而且，以Internet为基础，办公自动化系统实现了移动办公，资源的利用不再受通讯技术的限制，从而实现政府/企业内部的电子化和网络化办公。其中也存在一些问题如：1、开发手段单一，平台依赖性严重；2、为用户考虑得少，软件的柔性构

12、造功能较差；3、办公系统概念弱化，办公资源无法统一管理，办公信息孤岛化。而在一些发达国家里，图书馆管理系统的研究和发展比较早、比较好，所以他们的OA系统能体现出高智能、高便捷的优点。国外许多大公司投入了大量人力、物力，在语音、数字、文字图象、网络技术、人机工程等方面进行了深入细致的研究，并推出了影象处理设备、文字处理机、办公室助理机、袖珍组织机、笔记本计算机等现代办公设备。 2.2 管理系统的发展趋势目前，由于计算机网络和信息技术的飞速发展，管理系统也因此得到了迅速的发展和改变，它逐步实现了多方位的联机办公，办公文档的快速传送及处理。而更重要的是，管理系统逐渐地向多元化发展，比较先进的自动化办

13、公管理系统能够利用网络对语音、数字、文字图象、文档等等信息进行各种处理及传递。此外，随着 网络技术的应用的发展，一个完善的系统还应提供无缝接入影象处理设备、文字处理机、办公室助理机、袖珍组织机、笔记本计算机等现代办公设备。总之，OA管理系统正朝着智能化、现代化、综合化等方向不断地发展。3需求分析需求分析阶段是OA管理系统开发最重要的阶段。因为只有充分了解用户和系统本身的需求后，才能够设计出比较完善的系统。在此，我将需求分析分为两个部分。一是理解需求。二是功能需求。3.1 理解需求基于对OA管理系统的本身的理解，得到的需求规格说明以下：（1）系统为所有用户建立登录资料信息，所有的用户在进入系统前

14、都需要身份验证。用户证号和密码输入正确才能进入系统。（2）系统为不同的用户分配不同的访问权限。（3）在系统中，管理用户对系统的配置进行设置。（4）系统中，管理用户可以对用户的某些信息进行修改，增加，删除。（5）系统中，管理用户可以查看系统的运行日志。（6）系统需有较好的安全性和可扩展性，并提供简洁方便的图形用户界面。（7）用户根据自己的权限，可以访问拥有权限的文件及资源。并可以进行系统的操作。3.2 功能需求一个图书馆管理系统至少包括以下的功能：（1）登录模块主要功能是提供用户登录进入系统。并对用户的登录信息进行识别，包括用户的用户类型与权限。（2）撰写公文主要是实现对办公过程中的公文提交，以

15、及公文的流通传送保存等。比如工作总结的上交上级管理人员、工作任务的下发等公文传送。（3）审批及阅读公文主要实现公文的处理。例如公文在上交后，上级对公文的进行审批及发回审批结果等公文处理任务。（5）发布及查看公告主要实现用户在许可权限的情况下向系统发布和查看公开的公告信息。使得每一个权限达到查看要求的成员都可以看得到。（6）查看系统日志为了保证系统的良好动作。该模块主要是提供给系统管理人员查看系统的操作日志，方便其了解系统的运行状态。4.系统的功能设计4.1 功能设计概述OA自动化办公管理系统的主要目的是有效提高办公效率和质量、辅助办公决策、实现无纸化办公。为了解决问题，满足用户的需求，该系统项

16、目将从实际、方便的角度出发，分别设置面向三种类型的用户，包括普通用户、部门主管、管理用户。其中，（1）普通用户：这部门用户为部门中的普遍员工。（2）部门主管：主要是指各个部门的负责人，他们主要是负责管理部门的事务，管理员工，处理员工提交的各种文档。（3）管理用户：该用户拥有完全地使用OA管理系统的权力，并对用户及部门的基本信息、用户登录管理、系统的显示设置等等进行维护。所以，基于以上三种不同类型的用户，该系统给予分配不同的权限，系统会根据用户的不同权限进行判断是否可以访问的某页面，并且提供不同的系统菜单。它们都是基于在同一个数据库上所进行的操作，所以它们之间也相互联系，相互影响。4.2 OA管

17、理系统的基本功能模块OA管理系统包括如下的功能（如图4.2所示），其中每个功能模块都由若干相关联的子功能模块组成。图4.2 OA管理系统的基本功能模块用户日志OA管理系统办公文档文件管理快捷消息工作便笺讨论组联系人登录管理我的办公后台管理前台系统管理人员 HYPERLINK /oa/admin/adminaddworker.php t right 添加用户发布通知上传共享系统参数用户信息管理部门系统日志发送的文档通知全体共享文件部门共享文件我的私人文件增加修改删除全体日志5.1 E-R图 E-R图，即实体-联系图，它描述现实世界的概念模型，提供了表示实体集、属性和联系的方法。而OA管理系统中的

18、概念模型也比较多。以下列出了本系统中的主要E-R模型如图5.1至图5.4所示。Worker_class_idworker_nameworkerwork_textlogin_idlogin_namelogin_passLogin_last_timeworker_job处理发送1n1n图5.1 用户发送及处理办公文档的E-R图worker_emailhandphonehomephonehome_addother_connjuriworker所属访问class_list所属worker_filemm1mnmn图5.2 用户与部门与共享文件之间的E-R图worker发送quickmegmeg_idme

19、g_titlemeg_tomeg_fromn11图5.3 用户发送快捷消息的E-R图meg_textmeg_timemeg_is_newmeg_read_timemeg_recallworker处理notbook1n图5.4 用户与工作便笺之间的E-R图5.2数据库的设计本系统所用到的数据库是用Microsoft SQL Server2000中的“企业管理器”直接建立数据库和数据表的，当然也可能用“查询分析器”来实现。6.界面设计与部分代码本系统是以EclipsePHP Studio 2008加PHP的smarty插件作为开发环境，运用PHP语言进行编程设计。EclipsePHP Studio

20、 2008 是一个大型项目开发编译器，给予Eclipse修改而来，并且集成了JDK,免除处了安装配置的麻烦，一次安装即可使用无需配置。此编译器为PHP编译器，辅助PHP代码的开发和调试，集成了代码高亮，函数跟踪，时时纠错等功能。同时还增加了协作开发版本服务器功能： SVN , CVS 。 内嵌浏览器可以在调试简单代码时时时浏览。这也是我之所以选择EclipsePHP Studio 2008作为本系统开发语言工具的原因之一。6.1界面设计在原始的PHP语言中并没有完美的MVC三层开发的概念，所以在开发本系统时，加入了PHP和smarty框架插件。以smartyr 提供的开发模式，将PHP的数据层

21、、模型层及视图层进行分离。本系统共设计了16个功能模块。部分功能模块也设计了下级功能模块，对上级模块进行合理的分解。其中，前台的功能是所有用户正常登录后都可以进行访问的，而后台的界面中，系统会自动根据用户的权限进行选择用户界面进行显示。6.2 部分代码该图书馆管理系统是运用PHP5.0 语言进行开发。由于考虑到本系统是基于WEB运行环境，所以在登录时，系统会利用SESSION将用户信息保存有服务器上，而没有通过COOKIE保存在客户端。下面是系统的登录代码的。assign(title,欢迎使用OA自动化办公系统);if($_POSTname)$name=$_POSTname;if($_POST

22、pass)$pass=MD5($_POSTpass);/md5摘要$name = ltrim($name);$name=rtrim($name);$sql=select * from worker where login_name=$name;$res=mssql_query($sql,$link);$row=mssql_fetch_array($res);if($pass=$rowlogin_pass)/注册session保存各种用户信息session_register(login_id);/保存用户ID$_SESSIONlogin_id=$rowlogin_id;session_regis

23、ter(worker_class_id);/保存用户所在部门ID$_SESSIONworker_class_id=$rowworker_class_id;$juri=$rowjuri;/保存用户的权限session_register(juri);$_SESSIONjuri=$juri;/更新用户登录时间信息date_default_timezone_set(Asia/Shanghai);/重新设置时区$newtime=date(Y-m-d H:i:s);$sql=update worker set login_last_time=$newtime where login_name=$name;

24、mssql_query($sql,$link);$logid=$rowlogin_id;/保存用户ID/获得系统的设置$sql=select * from systemset;$res=mssql_query($sql,$link);$row=mssql_fetch_array($res);session_register(topm);$_SESSIONtopm=$rowtopm;session_register(pm);$_SESSIONpm=$rowpm;session_register(filesize);$_SESSIONfilesize=$rowfilesize;session_re

25、gister(chatm);$_SESSIONchatm=$rowchatm;session_register(chatn);$_SESSIONchatn=$rowchatn;/写入系统日志$logmeg=$name.登录成功;logbook($logid,$logmeg,$link);$tpl-assign(login,1);/登录成功$tpl-assign(meg,欢迎 .$name. !,登录成功.现在跳转页面.);else/写入系统日志$logmeg=$name.登录失败;logbook(-1,$logmeg,$link);$tpl-assign(login,0);/用户或密码错误$t

26、pl-assign(meg,用户或密码错误.请重新登录,现在跳转页面.);else/写入系统日志$logmeg=$name.登录失败;logbook($rowlogin_id,$logmeg,$link);$tpl-assign(login,0);/用户或密码错误$tpl-assign(meg,用户或密码错误.请重新登录,现在跳转页面.);elseif ($_GETexi=1) /注销/写入系统日志$logid=$_SESSIONlogin_id;$logmeg=ID:.$logid.进行注销操作;logbook($logid,$logmeg,$link);session_unregister

27、(login_id);session_unregister(worker_class_id);session_unregister(juri);session_unregister(topm);session_unregister(pm);session_unregister(filesize);session_unregister(chatm);session_unregister(chatn);$tpl-assign(login,-1);/没有登录$tpl-display(index.html);?因为本系统是利用SMARTY进行MVC模式开发的，以上代码是登录页面的数据层的代码，而通过$

28、tpl-display(index.html);进行指定该数据层的视图层的地址。由于该系统实现的功能比较全面，从而其程序代码也相应比较多，所以不可能在此一一地介绍所有的代码，下面只是选取文件列表功能的部分代码以作点评之用。若读者想浏览所有的原代码，详见该系统程序。文件列表功能部分原代码：assign(mod,$mod);$tpl-assign(type,$type);$foor=showp($pm,$p,$url,1);$tpl-assign(foor,$foor);$tpl-assign(work_file,$work_file);$tpl-display(showworkerfile.ht

29、ml);?系统测试报告系统测试的方法和技术是多种多样的，从是否需要执行被测软件的角度来看，可分为静态测试和动态测试；从测试是否针对系统的内部结构和具体实现算法的角度来看，可分为白盒测试和黑盒测试。7.1 测试方案本系统采用动态测试方法，但是由于条件的有限，本系统并没有穷举输入数据来进行黑盒或白盒测试，而是采用输入大量数据（包括合法或非法）和运用等价类技划分与边界值分析而进行测试。7.2 测试目的测试系统能否按设计的流程或目的运行，同时防止一些非法性操作和不必要错误的发生，以达到增强系统的可行性、有效性、广泛性的目的。 PAGE 14结 论可以说，该系统是一个功能较全，运行速度快的信息管理系统。

30、当然，该系统在一定程度上也存在着不足性，对系统的功能模块设计不够完善、美工不够等等。以下分别对该系统的优点与不足之处进行详细的分析。（1）优点该系统的设计界面较好，功能也较全。而且在设计开发过程中，也充分地考虑到现实的因素。在系统的运行速度上，利用SMARTY的页面缓存技术，通过预先进行编译，使得对于相同内容的页面，系统自动对编译进行显示，提高系统的运行速度。同时也对出现大量数据的页面进行分页显示处理，减少对数据的大量读取。在系统安全性方面，对某些特殊页面进行了权限管理。不够权限的用户不能够访问。同时对也资源的非法访问也作了一定的处理，防止用户通过URL进行资源的非法访问。在用户密码的保存上使

31、用了MD5对密码进行摘要处理。所以，总体来说，该系统的开发性较好。（2）不足之处该系统也有一定的局限性和可扩展性。如系统功能模块还有不完善的地方，有些办公的功能模块没有增加到系统中。系统的美工还没有进行比较完善的美工。使得用户处理时感觉不太友好。系统在编写过程中没有利用到OOP技术进行编程，使得系统的代码重用性不高。 PAGE 15参考文献1 信达工作室 译.PHP开发人员手册M.北京：人民邮电出版社.2001.62 徐锋 陈绍继 译.AJAX与PHP基础教程M.北京：人民邮电出版社.2007.93 王俊杰 编著.精通JavaScript动态网页编程M.北京：人民邮电出版社.2007.24 王

32、石 杨英娜 编著.精通PHPMYSQL 应用开发M.北京：人民邮电出版社.2006.75 苗雪兰 刘瑞新 宋歌 编著.数据库系统原理及应用教程M.北京：机械工业出版社.2007.106 飞思科技产品研发中心 编著. PHP & MySQL网站设计与实现M. 北京：电子工业出版社.2001.47 (加) Lee Babin 等 著；林琪, 荆涛等译. PHP 5范例代码查询辞典M.北北京：人民邮电出版社.2007.28 陈军编著. PHP+MySQL经典案例剖析M. 北京：清华大学出版社.20089 清源计算机工作室编著. PHP动态网站设计与制作M. 北京：机械工业出版社.2001.1 PAG

33、E 27致 谢在本论文的写作过程中，我的导师蒋老师倾注了大量的心血，从选题到开题报告，从写作提纲，到一遍又一遍地指出每稿中的具体问题，严格把关，循循善诱，在此我表示衷心感谢。同时我还要感谢在我学习期间给我极大关心和支持的各位老师以及关心我的同学和朋友。写作毕业论文是一次再系统学习的过程，毕业论文的完成，同样也意味着新的学习生活的开始。附录资料：从 XML 生成可与 Ajax 共同使用的 JSON时下，非常流行使用 JavaScript 代码为数据驱动的 Web 应用程序添加互动性。若能将数据编码成 JavaScript Object Notation（JSON）的格式，您就可以更轻松地通过 J

34、avaScript 语言使用它。通过本文，发掘使用 XSLT V2 从 XML 数据生成 JSON 的几种不同方法。几年前，许多开发人员很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于标记的语言。现在，Asynchronous JavaScript and XML（AJAX）成了新的热点，人们又将目光转向了使用 JavaScript 代码的数据驱动的富 Internet 应用程序。但是开发人员是否已经消除了 XML 和这一新技术之间的鸿沟呢？当然，您可以在 Web 客户机中使用 XML 解析器来读取数据，但这种做法会带来两个问题。第一，出于安全方面的原因，

35、XML 数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素，但它的确会引起部署方面的问题，还会阻碍 DHTML 小部件的创建。第二，读取和解析 XML 会非常慢。另一种做法是让服务器执行 XML 的解析工作，方法是设置服务器，使之向浏览器发送以 JavaScript 代码或时下流行的 JavaScript Object Notation（JSON）编码的数据。本文将展示如下三种使用 XSLT V2 语言和 Saxon XSLT V2 处理器从 XML 数据生成 JSON 的技巧： 简单编码 通过函数调用加载数据 编码对象 JSON 简介要学习如何将数据编码成 JSON（它只是 J

36、avaScript 的一个子集），最好的方法是从数据开始。清单 1 显示了书籍列表的一个示例 XML 数据集。清单 1. 基本的图形化图书馆 Code Generation in Action JackHerrington Manning PHP Hacks JackHerrington OReilly Podcasting Hacks JackHerrington OReilly 这个数据集很简单，只包含三本书，每本书都具有惟一的 ID、书名、作者姓名及出版商的名字。（没错，我只选择了我自己的书作为数据集，但能怨我吗？这些书实在是不可多得的节日和生日礼物。）清单 2 显示了这些数据在 JSO

37、N 中的效果。清单 2. JSON 中的示例数据集 id: 1, title: Code Generation in Action, first: Jack, last: Herrington, publisher: Manning , . 方括号 () 表明这是一个数组。大括号 () 则表明这是一个散列表，该散列表由一组名称和值对组成。在本例中，我创建了一个散列表的数组 用来存储这类结构式数据的一种常见方法。另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以，如果我想用单引号编码 OReilly，我就必须使用反斜杠对它进行转义：OReilly。 这让我编写的这个 XSLT 样式表更

38、为有趣了一些。我并未在本例中放上任何日期，但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串，该字符串必须在后面被解析。第二种方法是将日期作为一个对象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )这段代码将 publishdate 的值设置为6/16/2006 5:45:00 p.m.。简单编码接下来我将陆续介绍 JSON 编码的几种技巧。第一种也是其中最简单的一种，此样式表如 清单 3 所示。清单 3. simple.xsl 样式表 var g_books = 1, id: ,name: ,first: ,last: ,

39、publisher: ;要理解此样式表，不妨先来看一下 清单 4 所示的输出。清单 4. simple.xsl 的输出var g_books = id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher:

40、OReilly;这里，我将名为 g_books 的变量设置为一个包含三个散列表的数组，每个散列表包含关于该书的信息。再回过头来看看 清单 3，您会发现第一个模板匹配 / 路径，它也是首先应用到输入数据集的模板，该模板使用 for-each 循环来遍历每本书。之后，它使用 标记来将文本从该数据输出到 JavaScript 输出代码。对于字符串，我使用名为 js:escape() 的定制函数，它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。最后一个重要的元素是 标记，它告知处理器要输出的是文本而不是 XML。要检验此过程是否可以正常工作，我加入了一个 sim

41、ple .html 文件，该文件引用我在 simple.js 保存的 XSL 样式表的输出。这个 HTML 文件如 清单 5 所示。清单 5. simple.html 文件Simple JS loaderdocument.write( Found +g_books.length+ books );.html 文件使用 标记简单地加载已编码了的 JavaScript 代码。之后，第二个 标记将数组的长度写出到浏览器页面，如 图 1 所示。图 1. simple.html 的输出好了！数据文件包含三本书，相应的 JavaScript 文件也包含三本书。它真的可以工作！通过函数加载上述第一个示例很简

42、单，而且在大多数情况下可以发挥其作用，但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的，这不成问题。但是如果页面动态创建了一个 标记来按需加载数据，那么就很有必要知道 标记是何时完成的。实现此功能的最好的方法是让编码了的数据调用一个 JavaScript 函数，而不是只设置数据。这个概念很重要，所以我将花一些时间来介绍一下为什么您必须要通过动态生成的 标记来加载数据。页面加载后，从服务器获得数据是 Web 2.0 的核心功能。一种方法是使用 AJAX 机制通过到服务器的调用来加载 XML。然而，出于安全性的原因，AJAX 机制只限于从单一域获取数据

43、。这在大多数情况下都没有问题，但有时，您可能需要 JavaScript 代码运行在他人的页面上（例如，Google Maps）。在这种情况下从服务器获得数据的惟一方法是通过动态加载 标记。获悉 标记何时加载的最好的方法是让 标记返回的脚本调用函数而不是简单地加载数据。清单 6 显示了在函数调用中编码的数据。清单 6. Function1.jsAddBooks( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP Hacks,first: Ja

44、ck,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly );清单 7 给出了相应的 .html 文件。清单 7. Function1.htmlFunction 1 JS loadervar g_books = ;function AddBooks( books ) g_books = books; drawbooks( g_books );稍后将详细介绍 drawbooks 函数。这里重要的是了解一下页面如何定义 Ad

45、dBooks 函数，该函数随后会由 function1.js 文件中的脚本调用。该 AddBooks 函数负责处理数据。而且被调用的 AddBooks 函数会向页面指示 标记被正确加载，并已加载完成。要创建 function1.js 文件，我只对样式表稍微做了一点修改，如 清单 8 所示。清单 8. function1.xsl 样式表AddBooks( 1, id: ,name: ,first: ,last: ,publisher: );这里，我调用了一个函数，而不是简单地设置一个变量。这就是我所做的惟一更改。回到页面，我使用了 drawbooks 函数来构建书的表格，这样我就能够确认数据被正

46、确编码和正确显示。此函数是在 drawbooks.js 内定义的，如 清单 9 所示。清单 9. Drawbooks.jsfunction drawbooks( books ) var elTable = document.createElement( table ); for( var b in books ) var elTR = elTable.insertRow( -1 ); var elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( booksb.id ) ); var elTD2 =

47、elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode( ) ); var elTD3 = elTR.insertCell( -1 ); elTD3.appendChild( document.createTextNode( booksb.first ) ); var elTD4 = elTR.insertCell( -1 ); elTD4.appendChild( document.createTextNode( booksb.last ) ); var elTD5 = elTR.insert

48、Cell( -1 ); elTD5.appendChild( document.createTextNode( booksb.publisher ) ); document.body.appendChild( elTable );这个简单函数创建了一个表格节点，然后循环访问书的列表并为每本书创建一行，为每个数据元素分配一个单元格。此页面上的代码的结果如 图 2 所示。图 2. function1.html 的结果现在我就可以查看一下此页面的输出并确认来自原始 .xml 文件的一切均已被正确转换成 JavaScript 代码，且数据被发送到 AddData 函数并被正确添加到页面。细化函数调用技

49、术我很喜欢函数调用这一技术，但我并不赞同将所有图书数据都放入一个块中。另一种方式是为每条记录采用一个调用，如 清单 10 所示。清单 10. Function2.jsAddBook( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning );AddBook( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReilly );.对 .html 页面只需做少许修改，如 清单 11 所示。清单 11. Fu

50、nction2.html.var g_books = ;function AddBook( book ) g_books.push( book ); .这里更改了 XSLT，以使函数调用驻留在 for-each 循环体内。清单 12 显示了更新后的样式表。清单 12. function2.xsl.AddBook( id: ,name: ,first: ,last: ,publisher: );.对这个给定示例来说，这种更改看起来有些随意。但如果原始的 XML 数据集有多种数据类型，要为每种类型分配一个单独的函数调用会使 XSL 和页面上的 JavaScript 代码更为简单、更易于维护。编码对

51、象对小的页面来讲，使用 JavaScript 函数没有问题。但对于大型项目，就需要使用 JavaScript 语言的一些面向对象特性。是的，JavaScript 语言可以处理对象而且可以处理得很好。清单 13 显示了如何创建带有数据的对象。清单 13. Object1.jsg_books.push( new Book( id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning ) );g_books.push( new Book( id: 2,name: PHP Hacks,first: Jack,last: Herrington,publisher: OReill