18.3.2　发送异步请求

上小节向读者介绍了实现AJAX应用的关键一步。之所以说它是关键一步，是因为，正是这个“伟大的”XMLHttpRequest对象将要向Web服务器发出请求。正是这一步实现了通过JavaScript和Web应用程序交互，而不是用户提交给Web服务器的那个HTML表单。

那么，到底如何使用XMLHttpRequest对象向服务器发出请求呢？首先就是要创建一个JavaScript函数，该函数由Web页面调用，比如用户输入数据或者在下拉列表中做了选择时，这个JavaScript函数内将使用XMLHttpRequest对象向服务器发出请求。在实现使用JavaScript向服务器发出请求之前，读者还需要进一步了解XMLHttpRequest对象的一些方法，它们在AJAX应用中发挥着至关重要的作用。读者有必要了解每一个方法，这些方法介绍如下。

❑open（）方法，该方法的基本用法是open（method,url[，async]）。open方法会使用method参数所指定的方式（GET或POST）打开（或设置）一个到参数url所指定的连接。可选参数async可以将请求设置为异步或同步，如果该参数值为true，则表示异步，反之为同步，默认参数async的值为true，即发起异步请求。该方法还有两个可选参数，因为在本书的实例中不会涉及，这里不再赘述。

❑setRequestHeader（）方法，该方法的用法是setRequestHeader（label,value）。它的作用就是在请求报头中增加一个“标签-值”对。

❑send（）方法，该方法的用法是send（content）。“伟大的”XMLHttpRequest对象将调用同样“伟大的”send（）方法向服务器发出请求，send（）方法是XMLHttpRequest对象的灵魂所在，就是在这个方法中，JavaScript将请求和数据向服务器发送出去，一切“生动的”应用从这个方法开始。

❑getAllResponseHeaders（）方法，该方法的用法是getAllResponseHeaders（），它获取服务器所有的HTTP响应报头，并将其作为一个字符串返回。这个字符串包含的信息有，活动状态的超时时间、内容类型、和服务器有关的信息和日期。

❑getReponseHeader（）方法，该方法的用法是getReponseHeader（label），它获取一个有参数label指定的HTTP响应报头。

❑abort（）方法，该方法的用法是abort（），它用来中止当前的请求。

在了解了XMLHttpRequest对象之后，还有必要认识一下该对象的属性，它在AJAX应用中同样是很重要的。下表列举了XMLHttpRequest对象的属性及其含义描述。

在熟悉XMLHttpRequest对象的方法和属性之后，接下来，就可以实现使用XMLHttpRequest对象向服务器发出请求的JavaScript函数了。该JavaScript函数假定某个Web页面的Form表单中有个名叫name的文本框，该函数获取该文本框中的数据，并将该数据提交一个名叫getUser-Name.php的服务器程序，这个程序将处理浏览器提交的数据。因为这里只是讲解AJAX如何通过JavaScript向服务发出请求，所以并没有实现服务器端的程序，读者在这里需要重点了解XMLHttpRequest对象方法的使用。该JavaScript函数的具体实现如代码18-2所示。

代码18-2　发出异步请求的JavaScript程序18-2.js

01 function sendRequest（）

02 {

03 //获取页面表单的文本框name的值

04 var user_name=document.getElementById（"name"）.value；

05

06 if（（user_name==null）||（user_name==""））

07 return；

08

09 xmlHttp=GetXmlHttpRequest（）；

10 if（xmlHttp==null）

11 {

12 alert（"浏览器不支持XmlHttpRequest！"）；

13 return；

14 }

15

16 var url="getUserName.php"；//构建请求的URL地址

17 url=url+"?name="+user_name；

18

19 xmlHttp.open（"GET"，url,true）；//使用GET方法打开一个到url的连接，为发出请求做准备

20 //设置一个函数，当服务器处理完请求后调用，该函数名为updatePage

21 xmlHttp.onreadystatechange=updatePage；

22 xmlHttp.send（null）；//发送请求

23 }

【代码解析】这段JavaScript函数完成向服务器发出请求的功能，其中的代码意义都很明确，并没有晦涩难懂的地方，这里做一些简要的解释。代码第4行，使用基本的JavaScript代码获取表单文本框元素name的值。在该值有效的情况下，调用18.3.1节的函数GetXmlHttpRequest（）完成XmlHttpRequest对象的创建。如果XmlHttpRequest对象创建成功，则构建一个url地址，这个地址由服务器端处理程序及其需要的参数拼接而成，该地址就是将来要向服务器发起请求的地址。

接着，在代码第19行调用XmlHttpRequest对象的open方法，打开此前建立的url地址，使用GET方法传送数据，并将请求设置为异步方式（open（）方法的第3个参数为true，表示异步请求）。在第19行代码中，是第1次使用XmlHttpRequest对象。

代码第21行使用了XmlHttpRequest对象的onreadystatechange属性，该属性的作用就是告诉服务器在请求处理完成之后做什么。因为是异步请求，在JavaScript发出请求后并没有等待服务器的响应，所以当服务器完成请求处理，向浏览器发出响应时，应该通知JavaScript，这就是onreadystatechange属性存在的意义。在这个示例中，当服务器完成请求处理，将触发一个名叫updatePage（）的JavaScript函数。

最后在代码第22行，XmlHttpRequest对象调用方法send（）将请求向服务器发出。

相信读者目前已经意识到AJAX并不是那么神秘，因为AJAX本身没有什么复杂的内容，一切都是按流程化的步骤进行。AJAX所实现的提交表单的办法和传统的方法使用的是相同的技术，不同之处是AJAX通过JavaScript向服务器发出请求并由JavaScript处理响应，还有就是在整个请求和响应过程中，页面一直保持着。

在本小节最后总结一下AJAX应用的基本流程，使读者对AJAX请求部分有更清楚的理解，总结如下所示。

❑创建XmlHttpRequest对象。

❑在JavaScript函数中获取表单数据。

❑建立要连接的URL地址。

❑打开到该URL所在服务器的连接。

❑设置服务器处理完请求后需要调用的函数。

❑发送请求。