我的书签
添加书签
移除书签11.2.2 和Web服务器通信
Ajax程序的核心是XMLHttpRequest对象。XMLHttpRequest对象有时候简称为XHR，它是构建到当前Web浏览器中的一种功能，允许JavaScript向Web服务器发送信息并反过来从Web服务器接收信息。包括5个基本步骤，都可以使用JavaScript来完成。
1.创建XMLHttpRequest对象的一个实例。
第一个步骤只是告诉We b服务器：“嗨，我想要向We b服务器发送一些消息，所以请准备好”。按照最为基本的形式，用J a v a S c r i p t创建一个XMLHttpRequest对象的方法如下所示：
var newXHR=new XMLHttpRequest（）；
遗憾的是，使用Ajax有很多跨浏览器的问题，因此，使用JavaScript库（例如jQuery）来发送Ajax请求更好。我们将在11.3节学习使用jQuery的方式。
2.使用XHR的open（）方法指定要发送何种数据以及数据去往何处。
可以用两种方式发送数据，使用GET方法或POST方法，这和HTML表单所使用的选项相同。GET方法向Web服务器发送作为URL一部分的任何信息，例如，shop.php?productID=34。在这个例子中，数据是跟在?：后面的信息，即productID=34，它表示一个名/值对，而productID是名字，34是值。把这个名字看做一个表单上字段的名字，而值就是访问者在改字段输入的内容。
注意：我们为open（）方法指定的URL必须和发出请求的页面在同一个Web站点上。为了安全起见，Web浏览器不允许对其他的域发出Ajax请求。
POST方法发送独立于URL的数据。通常，我们使用GET方法来从服务器取回数据，并且使用POST方法来更新服务器上的信息（例如，添加、更新或删除一条数据库记录）。我们将在11.3.3节学习如何使用这两种方法。
我们还使用了open（）方法来指定数据发送到服务器上的哪个页面。这通常是Web服务器上的一个页面，它使用一种服务器端脚本语言（例如PHP）来从数据库获取数据或执行一些其他的编程任务，并且我们通过其URL指向它，例如，如下的代码告诉XHR对象使用哪个方法（GET）以及请求服务器上的哪个页面：
newXHR.open（'GET'，'shop.php?productID=34'）；
3.创建函数操作结果。
当Web服务器返回一个结果，例如新的数据库信息、表单在处理中的一个确认，或者只是一条简单的文本消息时，我们通常想要对结果做一些事情。这可能是简单地显示“表单提交成功”之类的消息，或者使用带有记录的一个新表格来替代整个数据库记录的表格。在任何情况下，都需要编写一个JavaScript函数来处理这些结果，这个函数（叫做回调函数）通常是程序的主要部分。
通常，这个函数将通过删除元素（例如，使用Ajax删除刚刚提交的一个表单）、添加元素（一条“表单提交成功”的消息，或者是数据库记录的一个新HTML表格），或者改变元素（例如，突出显示访问者单击来评价一个产品的星级数目），来操作页面的内容（也就是说，改变页面的DOM）。
这里还包括一些其他的步骤，但是，我们将使用jQuery来处理这些细节，因此，关于回调函数，我们只需要理解其JavaScript代码是用来处理服务器响应的。
4.发送请求。
要真正向Web服务器发送请求，我们可以使用XHR对象的send（）方法。此前的所有步骤还都只是准备，而这个步骤则告诉Web浏览器：“我们准备好了，发送请求吧！”如果要使用GET方法，这个步骤就像下面这样简单：
newXHR.send（null）；
null部分表示我们不打算发送任何附加数据（别忘了，当使用GET方法时，数据像search.php?q=javascript这样放在URL中发送，而q=javascript才是数据）。另外，使用POST方法，数据则要和send（）方法一起提供：
newXHR.send（'q=javascript'）；
再次，不要关心这里的细节，从下一节开始，我们将看到jQuery如何极大地简化这一过程。
一旦发送了请求，JavaScript程序不需要停止。Ajax中的“A”表示异步，这意味着一旦发送了请求，JavaScript程序可以继续做其他的事情。Web浏览器不会只是坐等服务器的响应。
5.接收响应。
在服务器处理了请求之后，它会向Web浏览器送回一个响应。实际上，我们在步骤3中创建的回调函数就是处理这个响应的，但是，当Web服务器响应的时候，XHR对象同时接收到多段信息，包括请求的状态、文本响应以及可能的一个XML响应。
状态响应是一个数字，表示服务器如何响应请求：我们可能已经熟悉了状态号404，它表示没有找到文件。如果一切按照计划进行，我们将得到一个200或者可能是304的状态。如果在处理页面的时候有一个错误，将会得到一个500“Internal Server Error”的状态报告，并且，如果请求的文件受到密码保护，我们将会得到一个403“Access Forbidden”错误。
此外，大多数时候，我们会接收到一条文本响应，它存储在X H R对象的responseText属性中。这个响应可能是一段HTML、一条简单的文本消息或者是一组复杂的JSON数据（参见11.4节）。最后，如果服务器用一个XML文件来响应，它会存储到XHR对象的responseXML属性中。尽管XML仍然在使用，但是，编程服务器页面返回文本、HTML或JSON数据的情况更为常见，因此，我们可能不需要处理一个XML响应。
不管服务器返回何种数据，它都可以供回调函数用来更新Web页面。一旦回调函数完成，整个Ajax周期也就结束了（然而，我们可能还会同时发送多个Ajax请求）。
