DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> 使用JavaScript和Ajax發出異步請求(二)
使用JavaScript和Ajax發出異步請求(二)
編輯:AJAX基礎知識     
   打開請求

  有了要連接的 URL 後就可以配置請求了。可以用 XMLHttpRequest 對象的 open() 方法來完成。該方法有五個參數:

  • request-type:發送請求的類型。典型的值是 GET 或 POST,但也可以發送 HEAD 請求。
  • url:要連接的 URL。
  • asynch:如果希望使用異步連接則為 true,否則為 false。該參數是可選的,默認為 true。
  • username:如果需要身份驗證,則可以在此指定用戶名。該可選參數沒有默認值。
  • password:如果需要身份驗證,則可以在此指定口令。該可選參數沒有默認值。

  通常使用其中的前三個參數。事實上,即使需要異步連接,也應該指定第三個參數為 “true”。這是默認值,但堅持明確指定請求是異步的還是同步的更容易理解。

  將這些結合起來,通常會得到 清單 9 所示的一行代碼。

  清單 9. 打開請求

   function getCustomerInfo() {
     var phone = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
     request.open("GET", url, true);
   }

  一旦設置好了 URL,其他就簡單了。多數請求使用 GET 就夠了(後面的文章中將看到需要使用 POST 的情況),再加上 URL,這就是使用 open() 方法需要的全部內容了。

  挑戰異步性

  本系列的後面一篇文章中,我將用很多時間編寫和使用異步代碼,但是您應該明白為什麼 open() 的最後一個參數這麼重要。在一般的請求/響應模型中,比如 Web 1.0,客戶機(浏覽器或者本地機器上運行的代碼)向服務器發出請求。該請求是同步的,換句話說,客戶機等待服務器的響應。當客戶機等待的時候,至少會用某種形式通知您在等待:

  • 沙漏(特別是 Windows 上)。
  • 旋轉的皮球(通常在 Mac 機器上)。
  • 應用程序基本上凍結了,然後過一段時間光標變化了。

  這正是 Web 應用程序讓人感到笨拙或緩慢的原因 —— 缺乏真正的交互性。按下按鈕時,應用程序實際上變得不能使用,直到剛剛觸發的請求得到響應。如果請求需要大量服務器處理,那麼等待的時間可能很長(至少在這個多處理器、DSL 沒有等待的世界中是如此)。

  而異步請求不 等待服務器響應。發送請求後應用程序繼續運行。用戶仍然可以在 Web 表單中輸入數據,甚至離開表單。沒有旋轉的皮球或者沙漏,應用程序也沒有明顯的凍結。服務器悄悄地響應請求,完成後告訴原來的請求者工作已經結束(具體的辦法很快就會看到)。結果是,應用程序感覺不 那麼遲鈍或者緩慢,而是響應迅速、交互性強,感覺快多了。這僅僅是 Web 2.0 的一部分,但它是很重要的一部分。所有老套的 GUI 組件和 Web 設計范型都不能克服緩慢、同步的請求/響應模型。

  發送請求

  一旦用 open() 配置好之後,就可以發送請求了。幸運的是,發送請求的方法的名稱要比 open() 適當,它就是 send()。

  send() 只有一個參數,就是要發送的內容。但是在考慮這個方法之前,回想一下前面已經通過 URL 本身發送過數據了:

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

  雖然可以使用 send() 發送數據,但也能通過 URL 本身發送數據。事實上,GET 請求(在典型的 Ajax 應用中大約占 80%)中,用 URL 發送數據要容易得多。如果需要發送安全信息或 XML,可能要考慮使用 send() 發送內容(本系列的後續文章中將討論安全數據和 XML 消息)。如果不需要通過 send() 傳遞數據,則只要傳遞 null 作為該方法的參數即可。因此您會發現在本文中的例子中只需要這樣發送請求(參見 清單 10)。

  清單 10. 發送請求

   function getCustomerInfo() {
     var phone = document.getElementById("phone").value;
     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
     request.open("GET", url, true);
     request.send(null);
   }

 

  指定回調方法

  現在我們所做的只有很少一點是新的、革命性的或異步的。必須承認,open() 方法中 “true” 這個小小的關鍵字建立了異步請求。但是除此之外,這些代碼與用 Java servlet 及 JSP、PHP 或 Perl 編程沒有什麼兩樣。那麼 Ajax 和 Web 2.0 最大的秘密是什麼呢?秘密就在於 XMLHttpRequest 的一個簡單屬性 onreadystatechange。

  首先一定要理解這些代碼中的流程(如果需要請回顧 清單 10)。建立其請求然後發出請求。此外,因為是異步請求,所以 JavaScript 方法(例子中的 getCustomerInfo())不會等待服務器。因此代碼將繼續執行,就是說,將退出該方法而把控制返回給表單。用戶可以繼續輸入信息,應用程序不會等待服務器。

  這就提出了一個有趣的問題:服務器完成了請求之後會發生什

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved