11.2　Ajax基础知识

综合来考虑，Ajax背后的技术确实很复杂。它们包括JavaScript、服务器端编程以及Web浏览器的协同工作。然而，基本的概念很容易理解，只要你理解了所涉及的所有步骤。图11-2展示了传统的HTML Web页面和使用Ajax与Web服务器通信的Web页面之间的不同。

图　11-2　传统方式下，Web浏览器和服务器的通信（上图所示）包括从服务器请求一个文件，并且接收一个返回的Web页面。这是Web页面的一个常规的载入和重新载入的过程。使用Ajax, Web浏览器只是请求信息。服务器返回请求的数据，并且Web页面的内容和显示更新（当然，在JavaScript的帮助下）

11.2.1　拼图块

Ajax不是一种单一的技术，它混合了几种不同的技术一起工作，来产生一种更有效率的用户体验。实际上，Ajax把3种组件结合到了一起：

·Web浏览器。显然，我们需要通过b浏览器来浏览W e b页面并运行JavaScript，但是，还有一个秘密的组成部分构建到了大多数Web浏览器中，它使得Ajax成为可能，这就是XMLHttpRequest对象。这个听起来有些奇怪的术语就是使得JavaScript能够和Web服务器通信并接收响应信息的东西。

XMLHttpRequest对象实际上是多年前在Internet Explorer 5中引入的，目前，它已经逐渐进入所有主流Web浏览器中。我们将在11.2.2节学习其更多的内容。

·JavaScript承担了Ajax中的大部分体力活。它向Web服务器发送请求，等待响应，处理响应，并且（通常）通过添加新的内容或者以某种方式改变页面的显示来更新页面。根据我们希望自己的程序做什么，可能让JavaScript从表单发送信息、请求其他的数据库记录，或者直接发送单独一段数据（例如，访问者刚刚给一本书的评级）。在数据发送给服务器之后，JavaScript程序将等待来自服务器的响应，例如，其他的数据库记录或者只是像“你的投票已经统计”一样的一条简单的文本消息。

有了这些信息，JavaScript将更新Web页面，例如，显示新的数据库记录，或者通知访问者已经成功登录。更新一个Web页面涉及操作页面的DOM（文档对象模型，参见4.5节的讨论）来添加、修改或删除HTML标签和内容。实际上，这就是我们在本书大部分内容中所做的事情：使用JavaScript修改页面的内容和外观。

·Web服务器接收来自Web浏览器的信息，并且把信息发送给Web浏览器。服务器可能只是返回一些HTML或纯文本，或者它可能返回一个XML文档（参见11.3.7节的“高级用户提示：接收来自服务器的XML”部分）或者JSON数据（参见11.4节的介绍）。例如，如果Web服务器接收来自表单的信息，那么，它可能会向数据库添加信息或者把“添加记录”这样的一条确认消息发送回来。或者，JavaScript程序可能向数据库发送查找下10条记录的请求，并且Web服务器将送回下10条记录的信息。

这个过程的Web服务器部分有点难度。它通常涉及几种不同类型的技术，包括一个Web服务器、一个应用程序服务器和一个数据库服务器。Web服务器真正是一个壮观的文件柜：它存储文档，并且当Web浏览器请求一个文件的时候，Web服务器会发送它。要完成更为复杂的任务，例如，把来自一个表单的数据放入一个数据库中，我们还需要一个应用程序服务器和一个数据库服务器。应用程序服务器理解一种服务器端编程语言，例如PHP、Java、C#、Ruby或Code Fusion标记语言，并且允许我们执行仅用HTML页面不可能完成的任务，例如发送邮件、在Amazon查询图书价格或者在数据库中存储信息。数据库服务器允许我们保存客户的名字和地址、销售的产品的细节或收藏的购物单的存档等信息。常见的数据库服务器包括MySQL、PostgreSQL和SQL Server。

注意：这里的术语服务器可以指硬件或者软件。在本书中，术语应用程序、Web服务器和数据库服务器都是指可能（并且经常）在同一机器上运行的软件。

Web服务器、应用程序服务器和数据库服务器有很多种不同的组合。例如，可以使用Microsoft的IIS Web服务器，以及ASP.NET（应用程序服务器）和SQL Server（数据库服务器）。或者，可以使用Apache（Web服务器）、PHP（应用程序服务器）和MySQL（数据库服务器）。

注意：Apache、PHP和MySQL的组合（通常简写为AMP）是免费的而且非常普及。我们会看到很多Web托管公司提供这些服务器。本书的示例也是使用AMP（参见后面的介绍）。

快速熟悉安装一个Web服务器

Ajax和Web服务器一起工作，毕竟，它的主要目的是让JavaScript向服务器发送信息并从服务器获取信息。尽管本章以及下一章中的教程都将在没有Web服务器的本地计算机上运行，但如果想要进一步探索Ajax的世界，则可能需要访问一个Web服务器。如果已经知道了Internet上的一个Web站点，一个选择是通过把文件移动到Web服务器上来测试Ajax程序。遗憾的是，这种技术很麻烦，我们必须在自己的计算机上创建页面，然后使用一个FTP程序将其移动到Web服务器上来看它能否工作。

更好的方法是设置一个开发服务器，这包括在桌面计算机上安装一个Web服务器，以便可以直接在自己的机器上编程并测试Ajax页面。这个任务听上去可能有些可怕，但是，有众多的免费程序使得安装必备的组件变得只是双击一个文件那么简单。

在Windows上，我们可以使用WAMP（www.wampserver.com/en/）来安装Apache、PHP和M ySQL。WAMP是一个免费的安装程序，它安装了模拟寄存在I nte r ne t上的一个真实的

Web站点所需的所有元素。我们可以在http：//uptospeedguides.com/wamp/找到完整的视频安装说明。

对于Mac用户，MAMP（www.mamp.info/en）提供了一个容易使用的程序，其中包含了Apache、PHP和MySQL。它也是免费的。可以在http：//uptospeedguides.com/mamp找到MAMP的视频安装说明。

本书11.3.7节的教程需要AMP。因此，如果想要跟着学习教程，需要使用上述的两种程序中的一个在自己的计算机上安装AMP。如果已经有了使用不同的Web服务器（例如Microsoft的IIS）的一个Web站点，并且计划创建一个想要在自己的真实Web站点上使用的Ajax应用程序，我们可能要在自己的计算机上安装该Web服务器。有很多资料介绍如何安装IIS。如果想要在Vista上安装IIS，访问http：//learn.iis.net/page.aspx/85/installing-iis7/。XP用户可以访问www.webwiz.co.uk/kb/asp-tutorials/installing-iis-winXP-pro.asp。