首頁 > web前端 > js教程 > 主體

詳解JavaScript中jQuery和Ajax以及JSONP的聯合使用_jquery

WBOY
發布: 2016-05-16 15:45:14
原創
1050 人瀏覽過

借助於 XMLHttpRequest,瀏覽器可以在整個頁面不刷新的情況下與服務端進行交互,這就是所謂的 Ajax(Asynchronous JavaScript and XML)。 Ajax 可以提供使用者更豐富的使用者體驗。

Ajax 請求由 JavaScript 驅動,透過 JavaScript 程式碼向 URL 傳送一個請求,待服務端有回應時會觸發一個回呼函數,可以在這裡回呼函數裡面處理服務端傳回的訊息。由於整個發送請求和回應的過程是非同步的,所以在此期間頁面中其它 Javascript 程式碼仍然繼續執行,不會中斷。

jQuery 對 Ajax 當然也提供了很好的支持,而且還抽象化了各種瀏覽器對於 Ajax 支援方面另人痛苦的差異。它不但提供了全功能的$.ajax() 方法,還有諸如$.get(),$.getScript(),$.getJSON(),$.post() 和$().load() 等更為簡便的方法。

儘管被命名為Ajax,但是很多Ajax 應用並沒有使用XML,特別是jQuery 方面的Ajax 應用,大多數都沒有使用XML;反而用得比較多的情況是:純文本、HTML 以及JSON(JavaScript Object Notation)。

一般情況下,由於同源策略(同協議,同域名,同端口)的限制,Ajax 並不能跨域執行請求,除非使用諸如JSONP(JSON with Padding) 之類的方案,才能實現一些受限的跨域功能。
關於 Ajax 的一些重要概念

GET vs POST,這是兩種最常用的向服務端發送請求的方法,正確理解這兩種方法的差異對於 Ajax 開發非常重要。

GET 方法通常用於執行一些非破壞性的操作(是說,只從服務端獲取信息,不修改服務端上的信息)。例如,搜尋查詢服務一般會使用 GET 請求。另外,GET 請求還可能會被瀏覽器緩存,這可能會導致一些不可預測的問題。一般情況下 GET 請求只能透過查詢字串的方式向服務端傳送資料。

POST 方法通常用於在服務端上執行一些破壞性的操作(是說,會修改服務端上的資料)。例如,當你發表一篇部落格的時候,用的應該就是 POST 請求。和 GET 請求不一樣,POST 請求不存在快取問題。 POST 請求中,查詢字串作為 URL 的一部分也能向服務端提交數據,但不建議此方法,所有資料應該跟 URL 分開單獨發送。

資料型,jQuery 通常要求指明服務端傳回的資料類型,某些情況寫入資料型別可能已經包含在方法名稱中了,如$.getJSON(),除此之外,它都會被當作一個可配置的物件的一部分,該物件最終會作為$.ajax() 方法的參數。資料類型通常有以下幾種:

  •     text :純文本,用於傳送簡單的字串。
  •     html :用於傳送一段 HTML。
  •     script :新增腳本到頁面中。
  •     json :傳送已格式化的 JSON 對象,它可以包含字串、陣列或物件。
  •     jsonp :用於傳輸從其他域下傳回的 JSON 資料。
  •     xml :用於傳輸自訂的 XML 格式資料。

非同步執行,Ajax 中的 A 指的是非同步(Asynchronous)。說到這裡可能很多 jQuery 初學者一下子很難理解什麼叫異步,因為預設情況下 Ajax 請求就是異步的,服務端傳回的資訊並非馬上就能取得。所有服務端傳回的資訊只能在一個回調函數中處理。例如以下這段程式碼,是錯誤的:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

登入後複製

正確的做法應該是在回調函數中處理服務端返回的數據,回調函數在 Ajax 請求成功完成時才被執行,這個時候才能獲取到來自服務端的數據:

$.get('foo.php', function(response) { console.log(response); });

登入後複製

同源策略及 JSONP,前面已经说过,一般情况下 Ajax 的请求会被限制在相同协议(http 或 https)、相同端口、相同域名下才能正确执行,但是 HTML 的

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板