2.1 剖析Ajax

第2章   深入Ajax应用程序

大海上的Ajax

自从1864年第一艘USS（United States Ship，美国军舰）下水以来，美国海军中的不少军舰都先后命名为Ajax。最近一艘USS Ajax是在二战和越南战争期间服过役的修理舰，该舰于1986年退役。

如果说到我讨厌什么，就那是在计算机图书中用前五章的篇幅介绍要讲述内容的基础知识。这样的书太多了，好像必须要在一开始讲一些面上的东西，而不是把注意力集中在要阐述的主题内容上。为此，本章只在开始时介绍一点基本的知识，然后就带你深入探索Ajax应用程序。如果你觉得有必要补一补HTML和CSS的课，或者想看一些JavaScript或XML的简明教程，那就先停下来，及时地复习一下相关的内容。免得在后面学习Ajax的时候还要回过头来学这些基本知识。

我并不打算把你吓跑，只是想激励你勇敢地深入到本书中那些令人兴奋的应用中，并学会如何构建这些应用。在本章结束时，你将完成自己的第一个具有完整功能的Ajax应用。不仅如此，你还能完全理解如何通过自定义这个应用程序，使它完成从未想到过的功能。听起来还真不错。即兴创造，就是这里的精神。
下列文件是本章的Booker应用程序中要用到的文件，位于本书Live Linux CD-ROM中的示例代码文件夹chap02内：

booker.html—主页面。
ajaxkit.js—Ajax工具箱中核心的Ajax函数。
domkit.js—Ajax工具箱中与DOM相关的函数。
book_alicewonderland.xml—Alice's Adventures in Wonderland（爱丽丝漫游奇境记）的XML电子书。
book_frankenstein.xml—Frankenstein（科学怪人）的XML电子书。
book_mobydick.xml—Moby Dick（白鲸记）的XML电子书。
book_warandpeace.xml—War and Peace（战争与和平）的XML电子书。
book_warofworlds—War of the Worlds（世界大战）的XML电子书。

2.1   剖析Ajax

大概你现在已经知道，Ajax并非一门独立的技术，而是基于其他技术的一种特殊应用。理解这些技术在Ajax应用的环境下如何相互结合，是理解如何构建以及修改你的Ajax应用的关键。所以，我们有必要探索一下组成Ajax的相关技术。图2-1展示了主要的Ajax技术是如何结合成为一个典型的Ajax应用的。

注意，在这幅插图中Ajax的请求/响应过程以一种有序的方式展开（如数字1到3所示）。请记住这幅图，以便在下面几节进一步学习不同的Ajax组件是如何相互结合时，以其作为形象化的参照。

HTML和CSS

如果不懂一点HTML是很难做出网页的，毕竟HTML是Web的基本语言。在Ajax应用中，HTML仍然用于编写页面的结构化部分（比如文本、图像、表单字段等等）。实际上，Ajax应用中大多数HTML代码并没有特殊之处—有意思的地方主要是JavaScript代码，这一点稍后介绍。

如果你过去曾经制作过网页，那么很可能对CSS（Cascading Style Sheets，层叠样式表）以及它在创建页面外观方面的重要性已经有了适当的认识。通过CSS可以清晰地把网页外观与结构分离开来，使得最终的页面不仅容易维护，而且也很美观。CSS在Ajax应用中提供了一种动态应用样式以改变HTML内容观感的手段。比如说，通过Ajax请求，基于数据库对数据验证之后，可以对包含无效数据的字段给予突出显示。而这种突出显示的效果就是

通过CSS来修改HTML表单元素的样式实现的。

JavaScript

JavaScript在Ajax中的任务是统筹应用部分的客户端的一切，其中包括必须由浏览器完成的所有业务逻辑。别忘了Ajax最基本的要点就是在客户端（浏览器）和服务器端（Web服务器）进行数据交换，因此在设计和构建Ajax应用的过程中，必须把客户端/服务器通信时刻铭记于心。在浏览器中运行的JavaScript代码，一是用来初始化和发送Ajax请求，二是处理由服务器返回的结果数据。

也就是说，我们要使用JavaScript打包用户数据并发送给服务器，然后接收到服务器的响应并将返回的数据以适当方式展示给用户。当然，这也意味着Ajax应用的JavaScript代码里会有相当比例的HTML和CSS成份，因为JavaScript经常会利用DOM（Document Object Model，文档对象模型）根据Ajax响应动态地修改HTML元素。图 2-1中的虚线箭头表示JavaScript具有使用DOM动态修改HTML和CSS代码的能力。

注意

我们并不要求你理解如何使用JavaScript编程才能在自己的网页中重用本书的例子。然而，如果一点也不涉及JavaScript代码是不可能讲明白Ajax的。所以，如果你打算在不同的层次上利用本书中的示例代码，那么对JavaScript有一个大致的了解还是非常重要的。

XML和Ajax数据

现在你知道了Ajax应用中的网页是由HTML和CSS构成的，它们会由JavaScript代码动态地生成或修改，而那些巧妙的JavaScript代码还负责控制Ajax的请求和响应。但是，我并没有解释当Ajax的请求/响应发生时，在客户端和服务器之间所传送的数据类型。其中部分原因是Ajax应用中的数据格式并不是唯一不变的。你可以根据每种应用的具体需求来自由决定使用哪种数据格式。换句话说，必须要仔细地选择适合每种Ajax应用的数据表示方式。

利用XML数据标准就是使用Ajax的一个最主要原因。XML为组织信息提供了一种高度结构化的手段，同时它也特别适合表现以其他方式难以表现的复杂数据，比如带有几层嵌套数据的层次式数据库。Ajax完全支持在请求/响应模型的任何一端使用XML，也就是说可以发送和（或）接收XML格式的数据。

虽然XML是非常好的选择，但它也不是适合所有Ajax应用的唯一格式。事实上，将纯文本数据作为Ajax数据交换的格式也是相当令人满意的，而且在很多情况下也是非常理想的格式。例如，在向服务器发送数据时采用在URL中常见的、简单的名/值对形式就非常简洁，像：

 fname=Michael&lname=Morrison

<fname>Michael</fname>
<lname>Morrison</lname>

相对而言，这种情况下使用URL式的名/值对更加有效，因为它最简单。

最终在Ajax应用中往返穿梭的数据格式，还是要视具体的应用需求而定。而在本书中，你将会看到使用几种不同数据类型的应用，包括纯文本、XML以及另一种被称为JSON（JavaScrfipt Object Notation，JavaScript对象表示法）的数据类型。

PHP与服务器

新手经常会对Ajax完全依赖于服务器端程序接受请求并以某种方式响应的过程有所误解。在你经常看到的与Ajax有关的术语中，特别是在耳熟能详的异步JavaScript+XML中，服务器端程序则是一个被隐含的因素。在实践层面上，这意味着只用一些JavaScript代码拼凑一个网页并不能算是一个Ajax应用程序，还必须要有服务器端的组件响应来自客户端的请求。

服务器端程序的角色完全是与具体的Ajax应用一对一的，但一般来说，你会发现大多数Ajax服务器端程序都负责查询某些信息，并将查询结果返回给客户端。例如，Ajax员工目录应用程序可能会向服务器传递一个员工ID号，然后服务器端程序就会根据这个ID号在相应的数据库中进行查询，最后返回这个员工的姓名和联系信息。或者，如我们在前一章那个例子中所用到的，将有关要运送货物的信息传递到服务器，之后服务器查询运费比率并返回该数据。

与Ajax应用的客户端程序专用JavaScript不同，服务器端程序则可以使用多种不同的编程语言来创建。幸运的是，其中一些流行的语言能够得到广泛支持并相对容易修改和使用。其中一种语言就是PHP，它是非常流行的服务器端脚本语言，用于创建Ajax应用程序也非常方便。与运行于浏览器中的JavaScript代码相似，PHP代码运行于服务器中。再参考一下图 2-1，你会看到其中服务器端的PHP程序是如何取得来自浏览器的请求（由JavaScript发送），然后又在处理请求之后返回结果的。

PHP代码以及所有提供同样功能的服务器端脚本，最终都要向客户端回传数据。当使用PHP时，必须要牢记的是，无论做什么，最终都是为了向浏览器返回数据服务的。在Ajax应用中，PHP脚本是向Ajax请求返回数据。