2.3 了解Ajax工具箱
目前，我已经多次提到本书CD-ROM中所提供的Ajax工具箱。现在，我们就来看看它到底是什么以及如何使用它。如果你基本上靠自己完成Ajax开发，最终将会发现，没有几百个也会有数十个Ajax库是专为更加简单有效地使用Ajax而设计的。而且，这些库中的大部分都达到了它们的目标。但问题是，要学会使用其中很多库，都必须像学习Ajax一样，需要下一番不小的功夫。这可不是件轻松的事，除非你打算构建一个大型的而且非常花哨的Ajax应用。但如果真是那样的话，你大概就想要建立自己的Ajax库。
为了尽可能保持简单和直观，我选择为本书建立自己定制的Ajax库，这个库也将作为你把Ajax特性整合到自己网页中去的一个起点。在很多情况下，你都可以原封不动地使用我提供的代码取得立杆见影的效果。除此之外，你也可以运用自己的JavaScript和XML知识把我的代码提升到更高层次。无论怎样，我的Ajax工具箱都是一个进行Ajax Web应用开发的便利出发点，而且掌握它的用法也不需要太多时间。
我的Ajax魔法工具箱由几个JavaScript文件组成，其中每个文件都包含一些JavaScript函数和辅助代码：
ajaxkit.js—核心Ajax。 |
我用“辅助代码”的作用是，在这些文件中提供了预置代码，能够显著简化完成某些任务的过程。但并不是在你开发的每个Ajax驱动的网页中都需要包含所有这些文件。举例来说，下面就是将前两个文件导入到一个页面中的代码，而且这两行代码必须放在页面的<head>元素中：
<script type="text/javascript" src="ajaxkit.js"> </script> |
当把这些行代码添加到页面中之后，你就可以自由地使用Ajax工具箱中的相应文件所提供的功能了。
接下来的几节会更详细地介绍Ajax工具箱的不同部分。虽然我会逐一解释每个工具箱文件中不同的JavaScript函数，但能否记住它们甚至完全理解它们的角色和作用并不重要。目前只需从一般意义上知道工具箱中都包含哪些部件即可，本书其余的章节将在遇到每个问题时更详细地讲解这个工具箱的用法。
ajaxkit.js
工具箱中的ajaxkit.js文件中包含两个JavaScript函数，这两个函数分别用于提交Ajax请求和更新Ajax诊断栏：
|
如果你不熟悉JavaScript函数，只需要知道它们是能够完成特定任务的、可重用的代码块就可以了。在这里，ajaxSendRequest()函数用于根据提供给它的五个参数，向服务器发送一个Ajax请求。同样，现在能否理解什么是函数的参数也不重要，等到在实际的示例应用程序中使用ajaxSendRequest()函数时，你就会知道它们的用途了。目前，只需要知道这五个参数对应着Ajax请求的类型（GET或POST）、处理请求的服务器端程序地址、你提供的用于处理服务器响应的自定义函数，以及可选的数据类型和数据（在请求类型为POST时提供）。
注意
Ajax请求的类型（GET或POST）直接与Ajax请求就是HTTP请求这个事实有关。如果你曾经使用过HTML中的表单，就应该对GET和POST请求比较熟悉。大致来说，如果你想从服务器获得信息就使用GET请求，而使用POST则表示要向服务器传递信息。展示一下如何使用ajaxSendRequest()函数并不是什么非常困难的事，下面就是在Booker电子图书阅读器示例中实际使用的Ajax请求：
ajaxSendRequest("GET", "book_" + title + ".txt", handleRequest);
|
即使没有多少JavaScript经验，也不难看出第一个参数表示这是一个GET请求，第二个参数是一本书的文件名（格式如book_alicewonderland.txt），而最后一个参数则是自定义处理函数的名称。在本章稍后我们还会再看到这行代码。
ajaxUpdateState()函数用于更新你在图 2-2和2-3中所看到的Ajax诊断栏。你会在自己创建的、用于处理服务器响应的函数中调用这个函数，像下面这样：
ajaxUpdateState(); |
调用一个JavaScript函数，简单地说就是告诉这个函数去执行设计好的任务。而处理函数也是一个普通的函数，它会在某些情况发生时被调用。比如，鼠标单击事件处理函数会在鼠标单击事件发生时被调用。类似地，每个Ajax应用都有一个自定义的请求处理函数，当请求的状态发生变化时会调用这个函数。这就是为什么理解本章前面介绍的请求状态非常重要的原因所在。我们会在2.4节中重新回顾请求的状态，并搞清楚在Ajax工具箱中如何利用它们。
domkit.js
再看看Ajax工具箱中的另一个文件—domkit.js，这个文件由一些完成不同DOM任务的函数组成。例如，replaceText()函数负责改变页面中一个元素的文本内容：
replaceText(elem, text) |
replaceText(firstName, "Michael"); |
你将发现在本书的示例中经常会用到这个函数。同样，只要你在页面中导入了domkit.js文件，就可以随意地使用其中的函数。别担心，当我们逐一讲解每个示例时，你会看到如何导入文件和使用replaceText()函数，因此现在不用完全理解这些内容。
与replaceText()类似的是getText()函数，这个函数使用DOM方法解析一个HTML元素的内容：
getText(elem); |
getClientWidth() |
getCookieData(cookieName) |
modalimgkit.js |
initModal() |
在第8章中，我们将学习有关模态图像的方方面面。不过，其基本的思想就是让你通过缩略图来以实际大小查看图像，而不必在浏览器中加载一个新页面。与应用程序窗口中出现的“关于”对话框类似，模态图像会以弹出方式出现在当前网页的上方。
validatekit.js
工具箱中的validatekit.js文件为验证不同类型的用户输入提供了一些有价值的函数：
validateNonEmpty(inputControl, helpControl) |
这些函数分别与验证特定类型的数据相关联，能在表单中碰到的最常见的数据类型都包含在其中了。这些函数接受的两个参数，分别是要验证的输入控件和当发现验证问题时显示帮助信息的输出元素。
infowinkit.js
工具箱中的infowinkit.js文件包含的函数，用于向页面中添加Ajax驱动的弹出式信息窗口
initInfoWindow(width, height) |
ratingkit.js |
initRatings() |
| 回书目 上一节 下一节 |
相关文章
