用到jQuery的web2.0技术（译）

Web2.0中的jQuery和Ajax技术

 

原作者：Cornelia Györödi,  Robert Györödi, George Pecherle, Tamas Lorand,  Roșu Alin

原文连接：http://wenku.baidu.com/view/f53392a50029bd64783e2cec.html

翻译：Ansel（凌志鸿）

指导老师：杨金民

摘要：Web2.0的开发用到了jQuery和Ajax技术，本文即描述web2.0开发中的技术诸如PHP，jQuery和Ajax。早期的门户网站简单的用到了PHP和MySQL技术，但是不足以满足日益增长的用户交互多样性的需求，jQuery的出现改变了人们写JavaScript的方式，因为它使得代码变得更加紧凑和易读，谷歌、IBM、美国全国广播公司、亚马逊、博客系统等大部的公司都因为它的流行而使用了它。Ajax主要用增强了网页的反射灵敏性和互动性，使得一个页面实现部分数据交互，因此当需要实现部分数据加载时，不必加载整个页面。

关键词：门户网站、JavaScript、jQuery、Ajax、PHP、MySQL、HTML, CSS, DOM, XML

 

I、INTRODUCTION

Web2.0就像Pink Floyd lyrics所说的那样：“不同的人对待不同的事物，取决于他的内心所想”，因此，Web2.0对于一些人比如客户来说意味着反应更加敏捷，但是它的初衷确实是使得交互的人们得到更迅速的反应，那正是它出现的理由，为了各个模块间更好的协同交互。然而，事实上，也意味着它的标准沿袭了Web1.0，用着同样的文档模型库，HTML、SVG等等，它也沿用HTTP，建立的东西也是Web标准，加上JavaScript的内容。

            根据Tim O’Reilly的观点，“自有计算机以来，通过跨平台，Web 2.0 是一次业务上的产业革命，也是一个在新平上运作良好的尝试”。值得注意的是一些技术专家，比如Tim Berners-Lee，提出的是否需要制定一个统一的标准，因为自从万维网出现之后很多Web2.0的组件已经存在了。

一个网页就是一个通过网络提供单一功能的站点，门户网站的功能通常是作为一个点来连接万维网的信息。第一个门户网站仅仅是用PHP和MySQL写的，然而，对于大部分用户而言，整个网站的设想是需要可交互的和可及的。

这种可交互性可以通过非常简单和方便的方式实现，比如用jQuery，一个轻量级别的JavaScript库，它强调在JavaScript和HTML之间的可交互性。jQuery于2006年1月在BarCamp NYC由John Resig发布，并且是一个免费开源的软件。

jQuery跟Ajax紧密结合，主要特征是加载数据时可不用加载整个网页，好处是节省带宽的使用，数据的分离，格式化和样式化一些功能，一个弊端是对于每个网页都用Ajax进行了优化，这就不得不提供一个网页的布局图。

II、WEB2.0 AND THE RELATED TECHNOLOGIES

用户体验和Ajax是Web2.0的核心元素，简而言之就是“Wb2.0是由人类的思维构成的”，Web2.0关键的几个方面：

——网站本身和它的全部都是作为一个全球通用的跨平台连接，提供可重用的服务和数据；

——从所有的资源，尤其是用户产生的数据中消费并且重新合成 ；

——可以经常性的连续而且无缝的快速更新软件和数据；

——丰富的可交互用户界面；

——由用户参与的个性化自定义。

Ajax（AJAX-是“AsynchronousJavaScript and XML”的简称），是一种开发交互式网页应用的技术，它的意图是通过只跟后台交换少量数据来增强网页的响应性，因此每次当用户请求一些变化时整个页面不需要重新加载，这也达到了增强页面交互性、快速性和可用性的目的，更多关于Ajax的详细信息可以通过查找[6]、[7]或者[8]获得。XHR（XMLHttpRequest）对象是Ajax的核心引擎，这个对象使得在程序运行中不需要刷新浏览器就可以跟后台服务器获取数据或者推送请求。下图展示了AJAX网页应用和经典的网页应用分别是怎么工作的（Fig.2）：

        事实上jQuery是一个开源的JavaScript库，简化了HTML和JavaScript的关连，这种创意原型完全不会使得可读性差，用CSS布局功能，很容易就能做到模块间分离。Dava Methvin，PC Pitstop的首席执行官（一个著名的热衷于给人们提供计算机帮助的社会团体）说。jQuery的学习关注可以通过查找一些资料并且做一些相关的例子，下面是列举的一个在HTML下怎样使文本块淡入效果的例子。

在计算机科学中，各种应用都是基于数据而展开的，从历史上看，这些应用都是采用各种各样的语言写的，对于数据而言，同样拥有多种多样的存储机制。随着时间的推移，计算机程序语言进化成一个本质上分层的模型（部分朝着面向对象方向发展）。相比较而言，大部分流行的数据存储合理格式是关系型数据库表、列和行模型。开发者开发系统通过桥接两个不同的领域按等级划分的编程语言和按照表格设计得关系数据库而收尾。

MySQL是一个管理分布式系统的数据库，由MySQL AB提供，MySQL AB是一个瑞典的商业公司，由MySQL的开发者创立，现在是Sun微系统公司下的子公司，MySQL是一个关系型数据库，也是一个开源的数据库，MySQL提供了许多吸引人的特征：快速、易用、支持查询语句、强大、易连接且安全、可移植、小巧、性价比高、开源的分布式代码等等。

客户端被嵌入到网页中，并且通过JavaScript解释器由浏览器建立执行，通过其他方式添加一些额外的功能到静态HTML网页中。JavaScript 是从一门由Netscape公司用于它们早期浏览其名叫LiveScript的语言发展而来的，当网页被显示的时候，JavaScript源代码是被嵌入在HTML代码中，并且被浏览其解释执行。HTML（Hypertex Markup Language）是一门标记语言通过浏览器实现实时的数据给用户，超文本是一个普通的文本但，是被赋予了额外的特征，例如格式化、图片、多媒体和一些文档的链接；标记是程序通过普通的文本和一些额外的符号，这些符号被称为标签，这些标签可以用来描述文本的外观或者布局，但是大多的内容描述和界面布局还是取决于浏览器。

CSS（Cascading Style Sheets）是一门被用来定义呈现给用户文档内容的语言，虽然CSS几乎被用在HTML和XHTML中，它其实能被用在任何种类的XML文档那个中，包括SVG（Scalable Vector Graphics）和XUL（XML User Interface Language）。它可以直接指定HTML元素、或者HTML文档头部、或者分离的表单样式，样式是由样式规则、每个样式指定给用户的元素或者多个元素组成。

样式规则可以直接修改我们要显示的HTML元素，这是通过用样式元素的属性来做到的，CSS规则也经常被定义在样元素里，比如嵌入在文档那个的头部。第三种方式我们可以在文档中包含CSS样式的是通过分离包含了链接的元素来实现的。

III、PRACTICAL PART

一个牙医管理中心系统应用和数据库的开发需要以下几点：

——丰富的应用；

——在客户端和服务器之间更少的阻塞

——只管明了的界面

——界面上的响应需要更及时

——为了不让用户在数据从客户端和后台传输时进行等待，必须实现异步交互

这个应用的交互结构图如下：

前端的网页应用是为了牙科医疗中心而设计，它可以分散在两个区域，一个是游客界面，一个是围绕医疗的界面。

        我们需要用到的技术：

开发技术：

            ——DOM-文档对象模型-一个平台和语言，独立于对象模型的标准；

            ——jQuery和AJAX

            ——PHP和MySQL-我们用PHP生成页面，只加载HTML代码特别的部分

开发语言：

            ——HTML – 标记语言

            ——CSS – 样式语言

            ——XML – 标记语言

            ——JavaScript和jQuery

            ——SQL—查询语言

设计原型是采用Ajax和浏览器来调用、很容易设置 需要发送的参数和要进行的操作（请求方法、内容类型、编码、头部），许多事件的回调函数要被触发。

用到的文件：

——index.html是唯一被用到的html文件，当它被访问时加载主页面，它所包的含分层标签有两种菜单（游客和药物）；游客的菜单层包含一些访问特殊页面所需要的分组的链接，并且瞄准了“mainFram”框架，这些链接是：

——“HomePage”-访问主界面（mainpage.html）；

——“Services”-给出医疗中心服务和价格列表信息，并且可动态滑动（services.html）；

——“Schedule”-从列表中选择一个医生 ，游客可以安排并约好去牙医中心的时间，时间可以被设置成从另一天，游客可以从一个动态的表中选择时间区间，一个时间区被游客选中之后，不能被其他游客选择（那个时间区间被设置成红色并且高亮），游客登记完之后，对应的医生会收到一封邮件（programming.php）；

——“Advices”-游客可以阅读关于如何保护牙齿的建议，该页面（advices.html）包含一个分离的内部框架，框架里包含书签建议页面（iframe.html）；

——“Contact”- 包含一些信息（contact.php）；

其它层标签初始化显示的登入界面如格式，通过AJAX动态的改变适当的层标签（牙医菜单、放射科菜单、管理员菜单等）。

医疗部分更加复杂，登入的时候需要一个用户名和一个密码，急于用户的类型，一个特殊的菜单需要被访问，菜单上有三种类型：牙医、放射科医生和管理员。牙医和放射科医生有很多管理患者的功能，管理员有权限修改并保存医务人员的信息，以及改变整个医疗中心的时间表和在线操纵医务人员事件作息，管理员可以查看医务人员的活动（通过打印日志），并且也可以管理IP地址。

医务人员有三种类型的菜单：

——医生的菜单（这个菜单跟牙医的和放射科的有些不同，放射科医生没有权限访问用户的注册信息，因此那些链接将被隐藏）；

——“Schedules”-（Schedules.php）：医生可以添加、查看、修改或者删除患者的预定，一旦被访问，PHP脚本寻找在“Timetable”表的用户ID，显示当前的用户时间轴，然后可以在“Schedule”表中动态的寻找ID，并且更新预定安排。亮绿色单元格表示这个医生在上班，因此这些单元格可以被点击选择，红色的意味着已经有一个任务预约，灰色的表示医生不在医疗中心。当绿色的被点击之后，系统动态的将患者的信息和时间戳保存在“Schedule”表中，鼠标移动到红色的格子上显示谁已经注册了那个时间戳，并且鼠标的点击事件可以删除那个预约任务。

——“Patient Administration” 动态的显示一个小菜单来管理患者，这些是牙医可以查看并且添加患者到注册表中，只有牙医可以管理注册的患者，并且可以作月报。当访问“Registry”菜单时，“Registry.PHP”将加载进“mainFram”，并且显示注册，在拥有所有医生都保存注册输入信息的“Registry”表中寻找id，患者编号对于所有医生而言是分离的。在registry.php文件中，有一个医生的注册表，并且有个输框，用来输入姓名以便查找患者，在姓名输入框之后按键，一个AJAX函数将会被查询条件所调用，通过选择一个用户的建议，表格将会过滤掉信息，只显示该用户的。

当访问“Add to registry”菜单时，“Addreg.php”文件将会被访问，并且以小弹窗的形式显示，在这里你将会看到用户的信息域集，第一个输入框，也是为了已经被列在建议表的用户而设计的，当一个用户从建议列表中被选中，所有的数据将会自动的进入表格，并且医生必须填写治疗文本域中填写，价格域中依据治疗代码自动填写。如果患者是18岁以下并且没有注册，将会确认提示是否加入患者列表，如果问题的回答是积极的，花费将会被价格列表替代，并且会被加入患者注册表中。然后一个新的弹窗将会出现，需要填写新的患者注册信息，新的弹窗有两个层标签，一个是为了重要的注册信息，另一个是填写关于患者的牙齿信息，医生可以进入获取更多关于患者的信息，当弹窗出现之后，其它窗口不可以编辑。

……

一些可能的有用操作：

View——数据从服务端抓取并转成JSON数组，一个过滤表将会被对应数据创建，首先，一个列名先被生成，然后把符合记录的每行数据加入到数据库中，从数据库表中来的主键将会被用来唯一指定每行的区别；

Add——一个过滤表将会加载数据库表中的数据，对于增添一条记录，组合框或者文本框将会被用来：如果目标表格没有外键，组件将会用文本框，否则，两个表之间的连接将会先加载组合框的键值对。

Delete——从服务器来的数据已经被加载进了过滤表并且在之下一个空的表将会被创建，要被删除的那一行，分别对应相应的记录将会被拖拽到表的底部，使用另一个JavaScript库中名叫Dojo的拖放过滤器。如果管理员想突然要改变他的想法，不想再删除那条刚刚被拖拽的纪录 ，他可以拖动相应的回滚到原表，在所需的行数前拖动，删除按钮可以使用，并且当删除成功的确认信息产生之后，记录将会从数据库中被删除。

Edit——当管理员从被初始加载过的过滤表中选择一行，该行的数据将会填充组合框分别对应到对应的文本框，然后他可以编辑文本，或者在组合框中选择其它操作，毕竟它可以保存它作出的修改。

IV、CONCLUSION

这个入门的例子给了一个很好的示范，说明了Ajax和jQuery的优点，我们可能已经会用一个经典的方式，不用Web2.0来建立网页，在经典的方式中，每次客户端作出反应的时候几乎需要加载全部数据，这会导致客户端和服务器的高阻塞效果，也影响了用户体验。也意味着对于快速开发、没有冗余代码的高质量网站是一个实用的指导。这个技术和模型目前只是一个简单的实例，对于想要开始开发这种类型的系统，是一个新的、容易上手、并且有好处的网站程序技术和语言。