第3章与服务器通信：发送请求和处理响应

1、2022-6-101 Ajax基础教程基础教程Ryan Asleson & Nathaniel T.Schutta 著金灵等译第第3章与服务器通信：发送章与服务器通信：发送请求和处理响应请求和处理响应 2022-6-103o上一章我们学习了如何创建上一章我们学习了如何创建XMLHttpRequest对象，本章将学习如何使用对象，本章将学习如何使用XMLHttpRequest对象向服务器发送请求，以及怎样用对象向服务器发送请求，以及怎样用javascript处理服务器响应。处理服务器响应。2022-6-1043.1 处理服务器响应处理服务器响应oXMLHttpRequest对象提供了两个

2、可以用来访问服务器对象提供了两个可以用来访问服务器响应的属性。第一个属性响应的属性。第一个属性responseText将响应提供为一将响应提供为一个串，第二个属性个串，第二个属性responseXML将响应提供为一个将响应提供为一个XML对象。一些简单的用例就很适合按简单文本来获取响应，对象。一些简单的用例就很适合按简单文本来获取响应，如将响应显示在警告框中，或者响应只是指示成功还是失如将响应显示在警告框中，或者响应只是指示成功还是失败的词。败的词。 o第第2章中的例子就使用了章中的例子就使用了responseText属性来访问服务属性来访问服务器响应，并将响应显示在警告框中。器响应，并将响应

3、显示在警告框中。2022-6-1053.1.1 使用使用innerHTML属性创建动态内容属性创建动态内容o结合使用结合使用HTML元素的元素的innerHTML属性，属性，responseText属性就会变得非常有用。属性就会变得非常有用。oinnerHTML属性是一个非标准的属性，最早在属性是一个非标准的属性，最早在IE中实现中实现，后来也为其他许多流行的浏览器所采用。这是一个简单，后来也为其他许多流行的浏览器所采用。这是一个简单的串，表示一组开始标记和结束标记之间的内容。的串，表示一组开始标记和结束标记之间的内容。o通过结合使用通过结合使用responseText和和innerHTML，

4、服务器就，服务器就能能“生产生产”或生成或生成HTML内容内容o实例：点击实例：点击search（搜索）按钮将在服务器上启动（搜索）按钮将在服务器上启动“搜索搜索”，服务器将生成一个结果表作为响应。代码清单，服务器将生成一个结果表作为响应。代码清单3-12022-6-1063.1.1 使用使用innerHTML属性创建动态内容属性创建动态内容o点击点击search按钮，调用按钮，调用startRequest函数，它先调用函数，它先调用createXMLHttpRequest函数来初始化函数来初始化XMLHttpRequest对象的一个新实例；对象的一个新实例； ostartRequest函数将

5、回调函数设置为函数将回调函数设置为handleStateChange函数；函数； ostartRequest函数使用函数使用open()方法来设置请求方法（方法来设置请求方法（GET）及请求目标，并且设置为异步地完成请求；及请求目标，并且设置为异步地完成请求； o使用使用XMLHttpRequest对象的对象的send()方法发送请求；方法发送请求； oXMLHttpRequest对象的内部状态每次有变化时，都会调用对象的内部状态每次有变化时，都会调用handleStateChange函数。一旦接收到响应（如果函数。一旦接收到响应（如果readyState属性的值为属性的值为4），），div元

6、素的元素的innerHTML属性就属性就将使用将使用XMLHttpRequest对象的对象的responseText属性设置。属性设置。2022-6-1073.1.2 将响应解析为将响应解析为XML o前面的例子中，服务器的响应只是简单的文本，这种方式前面的例子中，服务器的响应只是简单的文本，这种方式的灵活性不佳。的灵活性不佳。o服务器也可以将响应作为服务器也可以将响应作为XML发送，这可以发送大量的、发送，这可以发送大量的、复杂的、结构化的数据。复杂的、结构化的数据。o通过设置响应头通过设置响应头Content-Type的值，如果为的值，如果为“text/plain”，响应将作为简单文本发送

7、；如果设为，响应将作为简单文本发送；如果设为“ text/xml”，响应将作为，响应将作为XML发送。发送。o对于对于XML文档的处理，浏览器通过文档的处理，浏览器通过DOM提供了很好的支提供了很好的支持。持。 2022-6-1083.1.2 将响应解析为将响应解析为XML oW3C DOM和和JavaScript W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。

8、文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。 oDOM独立于具体的编程语言，通常通过独立于具体的编程语言，通常通过JavaScript访问访问DOM，不，不过并不严格要求这样。可以使用任何脚本语言来访问过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功，这要归功于其一致的于其一致的API。表。表3-1列出了列出了DOM元素的一些有用的属性，表元素的一些有用的属性，表3-2列出了一些有用的方法。列出了一些有用的方法。o有了有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能

9、和灵活性，将的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。作为浏览器和服务器之间的通信介质。2022-6-1093.1.2 将响应解析为将响应解析为XML o表表3-1 用于处理用于处理XML文档的文档的DOM元素属性元素属性o表表3-2 用于遍历用于遍历XML文档的文档的DOM元素方法元素方法2022-6-10103.1.2 将响应解析为将响应解析为XML o代码清单代码清单3-3 服务器返回的美国州名列表服务器返回的美国州名列表parseXML.xml o代码清单代码清单3-4 parseXML.html 2022-6-10113.1.3 使用使用W3C DOM动态编辑页面

10、动态编辑页面 o随着最终用户越来越习惯于使用基于随着最终用户越来越习惯于使用基于Web的应用，他们开的应用，他们开始有了新的要求，需要一种更丰富的用户体验。用户不再始有了新的要求，需要一种更丰富的用户体验。用户不再满足于完全页面刷新，即每次在页面上编辑一些数据时页满足于完全页面刷新，即每次在页面上编辑一些数据时页面都会完全刷新。他们想立即看到结果，而不是坐等与服面都会完全刷新。他们想立即看到结果，而不是坐等与服务器完成完整的往返通信。务器完成完整的往返通信。 o我们已经看到解析服务器发送的我们已经看到解析服务器发送的XML消息是多么容易。消息是多么容易。W3C DOM提供了一些属性和方法，使你

11、能轻松地遍历提供了一些属性和方法，使你能轻松地遍历XML结构，并抽取所需的数据。结构，并抽取所需的数据。 o前面的例子对于服务器发送的前面的例子对于服务器发送的XML响应并没有做多少有用响应并没有做多少有用的事情。最好的解决办法是根据需要修改页面上已有的内的事情。最好的解决办法是根据需要修改页面上已有的内容。如果页面上大多数数据没有改变，则不应刷新整个页容。如果页面上大多数数据没有改变，则不应刷新整个页面，只需要修改页面中信息有变化的部分。面，只需要修改页面中信息有变化的部分。 o前面的例子对于服务器发送的前面的例子对于服务器发送的XML 响应并没有做多少有用响应并没有做多少有用的事情。在警告

12、框中显示的事情。在警告框中显示XML 文档的值没有太大的实际意文档的值没有太大的实际意义。你真正想做到的是让用户享有丰富的客户体验，不再义。你真正想做到的是让用户享有丰富的客户体验，不再遭遇一般遭遇一般Web应用中常见的连续页面刷新问题。页面连续应用中常见的连续页面刷新问题。页面连续刷新不仅使用户不满意，还会浪费服务器上宝贵的处理器刷新不仅使用户不满意，还会浪费服务器上宝贵的处理器时间，因为页面刷新需要重新构建整个页面的内容，而且时间，因为页面刷新需要重新构建整个页面的内容，而且会不必要地使用网络带宽来传送刷新的页面。会不必要地使用网络带宽来传送刷新的页面。o以往，在以往，在Web浏览器的限制

13、之下，这一点很难做到。浏览浏览器的限制之下，这一点很难做到。浏览器只是一个工具，它解释特殊的标记（器只是一个工具，它解释特殊的标记（HTML），并根据），并根据一组预定的规则显示这些标记。一组预定的规则显示这些标记。Web以及以及Web浏览器原浏览器原来只是为了显示静态的信息，如果不以新页面的形式从服来只是为了显示静态的信息，如果不以新页面的形式从服务器请求新的数据，这些信息不会改变。务器请求新的数据，这些信息不会改变。2022-6-10133.1.2 将响应解析为将响应解析为XML o当前的浏览器都使用当前的浏览器都使用W3C DOM来表示来表示Web页面的内容。页面的内容。Web浏览浏览器

14、的器的W3C DOM和和JavaScript实现越来越成熟，这大大简化了在浏实现越来越成熟，这大大简化了在浏览器上动态创建内容的任务。表览器上动态创建内容的任务。表3-3列出了用于动态创建内容的列出了用于动态创建内容的DOM属性和方法。属性和方法。 2022-6-10143.2 发送请求参数发送请求参数 o要想充分发挥要想充分发挥Ajax技术的强大功能，这要求你向服务器发技术的强大功能，这要求你向服务器发送一些上下文数据。送一些上下文数据。oXMLHttpRequest对象的工作与你以往惯用的对象的工作与你以往惯用的HTTP技技术（术（GET和和POST）是一样的。）是一样的。 o采用采用GE

15、T方式发送参数：方式发送参数：http:/localhost/yourApp?firstName=Adam&middleName=Christopher o采用采用POST方法向服务器发送命名参数时，与采用方法向服务器发送命名参数时，与采用GET方方法几乎是一样的。类似于法几乎是一样的。类似于GET方法，方法，POST方法会把参数方法会把参数编码为名编码为名/值对，形式为值对，形式为name=value，每个名，每个名/值对之值对之间也用与号（间也用与号（&）分隔。这两种方法的主要区别在于，）分隔。这两种方法的主要区别在于，POST方法将参数串放在请求体中发送，而方法将参数串放

16、在请求体中发送，而GET方法是将方法是将参数追加到参数追加到URL中发送。中发送。 2022-6-10153.2 发送请求参数发送请求参数 o每个方法都有各自特有的优点。由于每个方法都有各自特有的优点。由于GET请求的参数编码请求的参数编码到请求到请求URL中，所以可以在浏览器中为该中，所以可以在浏览器中为该URL建立书签，建立书签，以后就能很容易地重新请求。不过，如果是异步请求就没以后就能很容易地重新请求。不过，如果是异步请求就没有什么用。从发送到服务器的数据量来讲，有什么用。从发送到服务器的数据量来讲，POST方法更方法更为灵活。使用为灵活。使用GET请求所能发送的数据量通常是固定的，请求

17、所能发送的数据量通常是固定的，因浏览器不同而有所差异，而因浏览器不同而有所差异，而POST方法可以发送任意量方法可以发送任意量的数据。的数据。2022-6-10163.2 发送请求参数发送请求参数 oHTML form元素允许通过将元素允许通过将form元素的元素的method属性属性设置为设置为GET或或POST来指定所需的方法。在提交表单时，来指定所需的方法。在提交表单时，form元素自动根据其元素自动根据其method属性的规则对属性的规则对input元素的元素的数据进行编码。数据进行编码。XMLHttpRequest对象没有这种内置行对象没有这种内置行为。相反，要由开发人员使用为。相反

18、，要由开发人员使用JavaScript创建查询串，其创建查询串，其中包含的数据要作为请求的一部分发送给服务器。不论使中包含的数据要作为请求的一部分发送给服务器。不论使用的是用的是GET请求还是请求还是POST请求，创建查询串的技术是一请求，创建查询串的技术是一样的。惟一的区别是，当使用样的。惟一的区别是，当使用GET发送请求时，查询串会发送请求时，查询串会追加到请求追加到请求URL中，而使用中，而使用POST方法时，则在调用方法时，则在调用XMLHttpRequest对象的对象的send()方法时发送查询串。方法时发送查询串。 2022-6-10173.2 发送请求参数发送请求参数 o实例：使

19、用实例：使用GET或或POST方法发送输入数据，服务器回显方法发送输入数据，服务器回显输入数据作为响应输入数据作为响应 o代码清单代码清单3-7 getAndPostExample.htmlo代码清单代码清单3-8 向浏览器回显名、姓和生日向浏览器回显名、姓和生日2022-6-10183.2.1 请求参数作为请求参数作为XML发送发送 o如果只是使用一个包含名如果只是使用一个包含名/值对的简单查询串，这可能不够值对的简单查询串，这可能不够健壮，不足以向服务器传递大量复杂的数据。更好的解决健壮，不足以向服务器传递大量复杂的数据。更好的解决方案是将模型的变化作为方案是将模型的变化作为XML发送到服

20、务器。发送到服务器。o可以把可以把XML作为请求体的一部分发送到服务器，这与作为请求体的一部分发送到服务器，这与POST请求中将查询串作为请求体的一部分进行发送异曲请求中将查询串作为请求体的一部分进行发送异曲同工。服务器可以从请求体读到同工。服务器可以从请求体读到XML，并加以处理。，并加以处理。 o实例：向服务器发送实例：向服务器发送XMLo代码清单代码清单3-9 postingXML.html o代码清单代码清单3-10 PostingXMLExample.java 2022-6-10193.2.2 使用使用JSON向服务器发送数据向服务器发送数据oXML的一个替代方法是的一个替代方法是J

21、SONo构得到众多编程语言的支持，所以构得到众多编程语言的支持，所以JSON是一个理想的选是一个理想的选择，可以作为异构系统之间的一种数据互换格式。择，可以作为异构系统之间的一种数据互换格式。oSON有一点很引以为豪，这就是它是一个轻量级的数据互有一点很引以为豪，这就是它是一个轻量级的数据互换格式。换格式。oJSON编码比编码比XML编码简短。编码简短。JSON编码比较小，所以如编码比较小，所以如果在网络上发送大量数据，可能会带来显著的性能差异。果在网络上发送大量数据，可能会带来显著的性能差异。o实例：使用实例：使用JSON的示例的示例o代码清单代码清单3-11 jsonExample.html o代码清单代码清单3-12 JSONExample.java2022-6-1020小结小结o本章介绍了本章介绍了XMLHttpRe