第3章與服務(wù)器通信：發(fā)送請求和處理響應(yīng)

1、2022-6-101 Ajax基礎(chǔ)教程基礎(chǔ)教程Ryan Asleson & Nathaniel T.Schutta 著金靈等譯第第3章與服務(wù)器通信：發(fā)送章與服務(wù)器通信：發(fā)送請求和處理響應(yīng)請求和處理響應(yīng) 2022-6-103o上一章我們學(xué)習(xí)了如何創(chuàng)建上一章我們學(xué)習(xí)了如何創(chuàng)建XMLHttpRequest對象，本章將學(xué)習(xí)如何使用對象，本章將學(xué)習(xí)如何使用XMLHttpRequest對象向服務(wù)器發(fā)送請求，以及怎樣用對象向服務(wù)器發(fā)送請求，以及怎樣用javascript處理服務(wù)器響應(yīng)。處理服務(wù)器響應(yīng)。2022-6-1043.1 處理服務(wù)器響應(yīng)處理服務(wù)器響應(yīng)oXMLHttpRequest對象提供了兩個

2、可以用來訪問服務(wù)器對象提供了兩個可以用來訪問服務(wù)器響應(yīng)的屬性。第一個屬性響應(yīng)的屬性。第一個屬性responseText將響應(yīng)提供為一將響應(yīng)提供為一個串，第二個屬性個串，第二個屬性responseXML將響應(yīng)提供為一個將響應(yīng)提供為一個XML對象。一些簡單的用例就很適合按簡單文本來獲取響應(yīng)，對象。一些簡單的用例就很適合按簡單文本來獲取響應(yīng)，如將響應(yīng)顯示在警告框中，或者響應(yīng)只是指示成功還是失如將響應(yīng)顯示在警告框中，或者響應(yīng)只是指示成功還是失敗的詞。敗的詞。 o第第2章中的例子就使用了章中的例子就使用了responseText屬性來訪問服務(wù)屬性來訪問服務(wù)器響應(yīng)，并將響應(yīng)顯示在警告框中。器響應(yīng)，并將響應(yīng)

3、顯示在警告框中。2022-6-1053.1.1 使用使用innerHTML屬性創(chuàng)建動態(tài)內(nèi)容屬性創(chuàng)建動態(tài)內(nèi)容o結(jié)合使用結(jié)合使用HTML元素的元素的innerHTML屬性，屬性，responseText屬性就會變得非常有用。屬性就會變得非常有用。oinnerHTML屬性是一個非標準的屬性，最早在屬性是一個非標準的屬性，最早在IE中實現(xiàn)中實現(xiàn)，后來也為其他許多流行的瀏覽器所采用。這是一個簡單，后來也為其他許多流行的瀏覽器所采用。這是一個簡單的串，表示一組開始標記和結(jié)束標記之間的內(nèi)容。的串，表示一組開始標記和結(jié)束標記之間的內(nèi)容。o通過結(jié)合使用通過結(jié)合使用responseText和和innerHTML，

4、服務(wù)器就，服務(wù)器就能能“生產(chǎn)生產(chǎn)”或生成或生成HTML內(nèi)容內(nèi)容o實例：點擊實例：點擊search（搜索）按鈕將在服務(wù)器上啟動（搜索）按鈕將在服務(wù)器上啟動“搜索搜索”，服務(wù)器將生成一個結(jié)果表作為響應(yīng)。代碼清單，服務(wù)器將生成一個結(jié)果表作為響應(yīng)。代碼清單3-12022-6-1063.1.1 使用使用innerHTML屬性創(chuàng)建動態(tài)內(nèi)容屬性創(chuàng)建動態(tài)內(nèi)容o點擊點擊search按鈕，調(diào)用按鈕，調(diào)用startRequest函數(shù)，它先調(diào)用函數(shù)，它先調(diào)用createXMLHttpRequest函數(shù)來初始化函數(shù)來初始化XMLHttpRequest對象的一個新實例；對象的一個新實例； ostartRequest函數(shù)將

5、回調(diào)函數(shù)設(shè)置為函數(shù)將回調(diào)函數(shù)設(shè)置為handleStateChange函數(shù)；函數(shù)； ostartRequest函數(shù)使用函數(shù)使用open()方法來設(shè)置請求方法（方法來設(shè)置請求方法（GET）及請求目標，并且設(shè)置為異步地完成請求；及請求目標，并且設(shè)置為異步地完成請求； o使用使用XMLHttpRequest對象的對象的send()方法發(fā)送請求；方法發(fā)送請求； oXMLHttpRequest對象的內(nèi)部狀態(tài)每次有變化時，都會調(diào)用對象的內(nèi)部狀態(tài)每次有變化時，都會調(diào)用handleStateChange函數(shù)。一旦接收到響應(yīng)（如果函數(shù)。一旦接收到響應(yīng)（如果readyState屬性的值為屬性的值為4），），div元

6、素的元素的innerHTML屬性就屬性就將使用將使用XMLHttpRequest對象的對象的responseText屬性設(shè)置。屬性設(shè)置。2022-6-1073.1.2 將響應(yīng)解析為將響應(yīng)解析為XML o前面的例子中，服務(wù)器的響應(yīng)只是簡單的文本，這種方式前面的例子中，服務(wù)器的響應(yīng)只是簡單的文本，這種方式的靈活性不佳。的靈活性不佳。o服務(wù)器也可以將響應(yīng)作為服務(wù)器也可以將響應(yīng)作為XML發(fā)送，這可以發(fā)送大量的、發(fā)送，這可以發(fā)送大量的、復(fù)雜的、結(jié)構(gòu)化的數(shù)據(jù)。復(fù)雜的、結(jié)構(gòu)化的數(shù)據(jù)。o通過設(shè)置響應(yīng)頭通過設(shè)置響應(yīng)頭Content-Type的值，如果為的值，如果為“text/plain”，響應(yīng)將作為簡單文本發(fā)送

7、；如果設(shè)為，響應(yīng)將作為簡單文本發(fā)送；如果設(shè)為“ text/xml”，響應(yīng)將作為，響應(yīng)將作為XML發(fā)送。發(fā)送。o對于對于XML文檔的處理，瀏覽器通過文檔的處理，瀏覽器通過DOM提供了很好的支提供了很好的支持。持。 2022-6-1083.1.2 將響應(yīng)解析為將響應(yīng)解析為XML oW3C DOM和和JavaScript W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文檔的API，為文檔提供了結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)。JavaScript則是用于訪問和處理DOM的語言。如果沒有DOM，JavaScript根本沒有Web頁面和構(gòu)成頁面元素的概念。

8、文檔中的每個元素都是DOM的一部分，這就使得JavaScript可以訪問元素的屬性和方法。 oDOM獨立于具體的編程語言，通常通過獨立于具體的編程語言，通常通過JavaScript訪問訪問DOM，不，不過并不嚴格要求這樣?？梢允褂萌魏文_本語言來訪問過并不嚴格要求這樣。可以使用任何腳本語言來訪問DOM，這要歸功，這要歸功于其一致的于其一致的API。表。表3-1列出了列出了DOM元素的一些有用的屬性，表元素的一些有用的屬性，表3-2列出了一些有用的方法。列出了一些有用的方法。o有了有了W3C DOM，就能編寫簡單的跨瀏覽器腳本，從而充分利用，就能編寫簡單的跨瀏覽器腳本，從而充分利用XML的強大功能

9、和靈活性，將的強大功能和靈活性，將XML作為瀏覽器和服務(wù)器之間的通信介質(zhì)。作為瀏覽器和服務(wù)器之間的通信介質(zhì)。2022-6-1093.1.2 將響應(yīng)解析為將響應(yīng)解析為XML o表表3-1 用于處理用于處理XML文檔的文檔的DOM元素屬性元素屬性o表表3-2 用于遍歷用于遍歷XML文檔的文檔的DOM元素方法元素方法2022-6-10103.1.2 將響應(yīng)解析為將響應(yīng)解析為XML o代碼清單代碼清單3-3 服務(wù)器返回的美國州名列表服務(wù)器返回的美國州名列表parseXML.xml o代碼清單代碼清單3-4 parseXML.html 2022-6-10113.1.3 使用使用W3C DOM動態(tài)編輯頁面

10、動態(tài)編輯頁面 o隨著最終用戶越來越習(xí)慣于使用基于隨著最終用戶越來越習(xí)慣于使用基于Web的應(yīng)用，他們開的應(yīng)用，他們開始有了新的要求，需要一種更豐富的用戶體驗。用戶不再始有了新的要求，需要一種更豐富的用戶體驗。用戶不再滿足于完全頁面刷新，即每次在頁面上編輯一些數(shù)據(jù)時頁滿足于完全頁面刷新，即每次在頁面上編輯一些數(shù)據(jù)時頁面都會完全刷新。他們想立即看到結(jié)果，而不是坐等與服面都會完全刷新。他們想立即看到結(jié)果，而不是坐等與服務(wù)器完成完整的往返通信。務(wù)器完成完整的往返通信。 o我們已經(jīng)看到解析服務(wù)器發(fā)送的我們已經(jīng)看到解析服務(wù)器發(fā)送的XML消息是多么容易。消息是多么容易。W3C DOM提供了一些屬性和方法，使你

11、能輕松地遍歷提供了一些屬性和方法，使你能輕松地遍歷XML結(jié)構(gòu)，并抽取所需的數(shù)據(jù)。結(jié)構(gòu)，并抽取所需的數(shù)據(jù)。 o前面的例子對于服務(wù)器發(fā)送的前面的例子對于服務(wù)器發(fā)送的XML響應(yīng)并沒有做多少有用響應(yīng)并沒有做多少有用的事情。最好的解決辦法是根據(jù)需要修改頁面上已有的內(nèi)的事情。最好的解決辦法是根據(jù)需要修改頁面上已有的內(nèi)容。如果頁面上大多數(shù)數(shù)據(jù)沒有改變，則不應(yīng)刷新整個頁容。如果頁面上大多數(shù)數(shù)據(jù)沒有改變，則不應(yīng)刷新整個頁面，只需要修改頁面中信息有變化的部分。面，只需要修改頁面中信息有變化的部分。 o前面的例子對于服務(wù)器發(fā)送的前面的例子對于服務(wù)器發(fā)送的XML 響應(yīng)并沒有做多少有用響應(yīng)并沒有做多少有用的事情。在警告

12、框中顯示的事情。在警告框中顯示XML 文檔的值沒有太大的實際意文檔的值沒有太大的實際意義。你真正想做到的是讓用戶享有豐富的客戶體驗，不再義。你真正想做到的是讓用戶享有豐富的客戶體驗，不再遭遇一般遭遇一般Web應(yīng)用中常見的連續(xù)頁面刷新問題。頁面連續(xù)應(yīng)用中常見的連續(xù)頁面刷新問題。頁面連續(xù)刷新不僅使用戶不滿意，還會浪費服務(wù)器上寶貴的處理器刷新不僅使用戶不滿意，還會浪費服務(wù)器上寶貴的處理器時間，因為頁面刷新需要重新構(gòu)建整個頁面的內(nèi)容，而且時間，因為頁面刷新需要重新構(gòu)建整個頁面的內(nèi)容，而且會不必要地使用網(wǎng)絡(luò)帶寬來傳送刷新的頁面。會不必要地使用網(wǎng)絡(luò)帶寬來傳送刷新的頁面。o以往，在以往，在Web瀏覽器的限制

13、之下，這一點很難做到。瀏覽瀏覽器的限制之下，這一點很難做到。瀏覽器只是一個工具，它解釋特殊的標記（器只是一個工具，它解釋特殊的標記（HTML），并根據(jù)），并根據(jù)一組預(yù)定的規(guī)則顯示這些標記。一組預(yù)定的規(guī)則顯示這些標記。Web以及以及Web瀏覽器原瀏覽器原來只是為了顯示靜態(tài)的信息，如果不以新頁面的形式從服來只是為了顯示靜態(tài)的信息，如果不以新頁面的形式從服務(wù)器請求新的數(shù)據(jù)，這些信息不會改變。務(wù)器請求新的數(shù)據(jù)，這些信息不會改變。2022-6-10133.1.2 將響應(yīng)解析為將響應(yīng)解析為XML o當(dāng)前的瀏覽器都使用當(dāng)前的瀏覽器都使用W3C DOM來表示來表示W(wǎng)eb頁面的內(nèi)容。頁面的內(nèi)容。Web瀏覽瀏覽器

14、的器的W3C DOM和和JavaScript實現(xiàn)越來越成熟，這大大簡化了在瀏實現(xiàn)越來越成熟，這大大簡化了在瀏覽器上動態(tài)創(chuàng)建內(nèi)容的任務(wù)。表覽器上動態(tài)創(chuàng)建內(nèi)容的任務(wù)。表3-3列出了用于動態(tài)創(chuàng)建內(nèi)容的列出了用于動態(tài)創(chuàng)建內(nèi)容的DOM屬性和方法。屬性和方法。 2022-6-10143.2 發(fā)送請求參數(shù)發(fā)送請求參數(shù) o要想充分發(fā)揮要想充分發(fā)揮Ajax技術(shù)的強大功能，這要求你向服務(wù)器發(fā)技術(shù)的強大功能，這要求你向服務(wù)器發(fā)送一些上下文數(shù)據(jù)。送一些上下文數(shù)據(jù)。oXMLHttpRequest對象的工作與你以往慣用的對象的工作與你以往慣用的HTTP技技術(shù)（術(shù)（GET和和POST）是一樣的。）是一樣的。 o采用采用GE

15、T方式發(fā)送參數(shù)：方式發(fā)送參數(shù)：http:/localhost/yourApp?firstName=Adam&middleName=Christopher o采用采用POST方法向服務(wù)器發(fā)送命名參數(shù)時，與采用方法向服務(wù)器發(fā)送命名參數(shù)時，與采用GET方方法幾乎是一樣的。類似于法幾乎是一樣的。類似于GET方法，方法，POST方法會把參數(shù)方法會把參數(shù)編碼為名編碼為名/值對，形式為值對，形式為name=value，每個名，每個名/值對之值對之間也用與號（間也用與號（&）分隔。這兩種方法的主要區(qū)別在于，）分隔。這兩種方法的主要區(qū)別在于，POST方法將參數(shù)串放在請求體中發(fā)送，而方法將參數(shù)串放

16、在請求體中發(fā)送，而GET方法是將方法是將參數(shù)追加到參數(shù)追加到URL中發(fā)送。中發(fā)送。 2022-6-10153.2 發(fā)送請求參數(shù)發(fā)送請求參數(shù) o每個方法都有各自特有的優(yōu)點。由于每個方法都有各自特有的優(yōu)點。由于GET請求的參數(shù)編碼請求的參數(shù)編碼到請求到請求URL中，所以可以在瀏覽器中為該中，所以可以在瀏覽器中為該URL建立書簽，建立書簽，以后就能很容易地重新請求。不過，如果是異步請求就沒以后就能很容易地重新請求。不過，如果是異步請求就沒有什么用。從發(fā)送到服務(wù)器的數(shù)據(jù)量來講，有什么用。從發(fā)送到服務(wù)器的數(shù)據(jù)量來講，POST方法更方法更為靈活。使用為靈活。使用GET請求所能發(fā)送的數(shù)據(jù)量通常是固定的，請求

17、所能發(fā)送的數(shù)據(jù)量通常是固定的，因瀏覽器不同而有所差異，而因瀏覽器不同而有所差異，而POST方法可以發(fā)送任意量方法可以發(fā)送任意量的數(shù)據(jù)。的數(shù)據(jù)。2022-6-10163.2 發(fā)送請求參數(shù)發(fā)送請求參數(shù) oHTML form元素允許通過將元素允許通過將form元素的元素的method屬性屬性設(shè)置為設(shè)置為GET或或POST來指定所需的方法。在提交表單時，來指定所需的方法。在提交表單時，form元素自動根據(jù)其元素自動根據(jù)其method屬性的規(guī)則對屬性的規(guī)則對input元素的元素的數(shù)據(jù)進行編碼。數(shù)據(jù)進行編碼。XMLHttpRequest對象沒有這種內(nèi)置行對象沒有這種內(nèi)置行為。相反，要由開發(fā)人員使用為。相反

18、，要由開發(fā)人員使用JavaScript創(chuàng)建查詢串，其創(chuàng)建查詢串，其中包含的數(shù)據(jù)要作為請求的一部分發(fā)送給服務(wù)器。不論使中包含的數(shù)據(jù)要作為請求的一部分發(fā)送給服務(wù)器。不論使用的是用的是GET請求還是請求還是POST請求，創(chuàng)建查詢串的技術(shù)是一請求，創(chuàng)建查詢串的技術(shù)是一樣的。惟一的區(qū)別是，當(dāng)使用樣的。惟一的區(qū)別是，當(dāng)使用GET發(fā)送請求時，查詢串會發(fā)送請求時，查詢串會追加到請求追加到請求URL中，而使用中，而使用POST方法時，則在調(diào)用方法時，則在調(diào)用XMLHttpRequest對象的對象的send()方法時發(fā)送查詢串。方法時發(fā)送查詢串。 2022-6-10173.2 發(fā)送請求參數(shù)發(fā)送請求參數(shù) o實例：使

19、用實例：使用GET或或POST方法發(fā)送輸入數(shù)據(jù)，服務(wù)器回顯方法發(fā)送輸入數(shù)據(jù)，服務(wù)器回顯輸入數(shù)據(jù)作為響應(yīng)輸入數(shù)據(jù)作為響應(yīng) o代碼清單代碼清單3-7 getAndPostExample.htmlo代碼清單代碼清單3-8 向瀏覽器回顯名、姓和生日向瀏覽器回顯名、姓和生日2022-6-10183.2.1 請求參數(shù)作為請求參數(shù)作為XML發(fā)送發(fā)送 o如果只是使用一個包含名如果只是使用一個包含名/值對的簡單查詢串，這可能不夠值對的簡單查詢串，這可能不夠健壯，不足以向服務(wù)器傳遞大量復(fù)雜的數(shù)據(jù)。更好的解決健壯，不足以向服務(wù)器傳遞大量復(fù)雜的數(shù)據(jù)。更好的解決方案是將模型的變化作為方案是將模型的變化作為XML發(fā)送到服

20、務(wù)器。發(fā)送到服務(wù)器。o可以把可以把XML作為請求體的一部分發(fā)送到服務(wù)器，這與作為請求體的一部分發(fā)送到服務(wù)器，這與POST請求中將查詢串作為請求體的一部分進行發(fā)送異曲請求中將查詢串作為請求體的一部分進行發(fā)送異曲同工。服務(wù)器可以從請求體讀到同工。服務(wù)器可以從請求體讀到XML，并加以處理。，并加以處理。 o實例：向服務(wù)器發(fā)送實例：向服務(wù)器發(fā)送XMLo代碼清單代碼清單3-9 postingXML.html o代碼清單代碼清單3-10 PostingXMLExample.java 2022-6-10193.2.2 使用使用JSON向服務(wù)器發(fā)送數(shù)據(jù)向服務(wù)器發(fā)送數(shù)據(jù)oXML的一個替代方法是的一個替代方法是J

21、SONo構(gòu)得到眾多編程語言的支持，所以構(gòu)得到眾多編程語言的支持，所以JSON是一個理想的選是一個理想的選擇，可以作為異構(gòu)系統(tǒng)之間的一種數(shù)據(jù)互換格式。擇，可以作為異構(gòu)系統(tǒng)之間的一種數(shù)據(jù)互換格式。oSON有一點很引以為豪，這就是它是一個輕量級的數(shù)據(jù)互有一點很引以為豪，這就是它是一個輕量級的數(shù)據(jù)互換格式。換格式。oJSON編碼比編碼比XML編碼簡短。編碼簡短。JSON編碼比較小，所以如編碼比較小，所以如果在網(wǎng)絡(luò)上發(fā)送大量數(shù)據(jù)，可能會帶來顯著的性能差異。果在網(wǎng)絡(luò)上發(fā)送大量數(shù)據(jù)，可能會帶來顯著的性能差異。o實例：使用實例：使用JSON的示例的示例o代碼清單代碼清單3-11 jsonExample.html o代碼清單代碼清單3-12 JSONExample.java2022-6-1020小結(jié)小結(jié)o本章介紹了本章介紹了XMLHttpRe