jQuery ajax() 函數是最低級別的抽象
jQuery ajax() 函數是可用于 XMLHttpRequest(又名 AJAX)的最低抽象級別。所有其他 jQuery AJAX 函數(例如 load())都利用 ajax() 函數。使用 ajax() 函數為 XMLHttpRequests 提供了最強大的功能。 jQuery 還提供了其他更高級別的抽象來執行非常特定類型的 XMLHttpRequests。這些函數本質上是 ajax() 方法的快捷方式。
這些快捷方法是:
- 加載()
- get()
- getJSON()
- getScript()
- post()
需要注意的是,雖然快捷方式有時很好,但它們都在幕后使用 ajax() 。而且,當您需要 jQuery 在 AJAX 方面提供的所有功能和自定義功能時,您應該使用 ajax() 方法。
注意:默認情況下,ajax() 和 load() AJAX 函數均使用 GET HTTP 協議。
jQuery 支持跨域 JSONP
帶有填充的 JSON (JSONP) 是一種技術,允許 HTTP 請求(返回 JSON)的發送者為使用 JSON 對象作為函數參數進行調用的函數提供名稱。該技術不使用 XHR。它使用腳本元素,因此可以將數據從任何站點拉入任何站點。目的是為了規避XMLHttpRequest的同源策略限制。
使用 getJSON() jQuery 函數,當 URL 中添加 JSONP 回調函數時,您可以從另一個域加載 JSON 數據。作為示例,以下是使用 Flickr API 的 URL 請求的樣子。
http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=?
? 值用作快捷方式,告訴 jQuery 調用作為 getJSON() 函數的參數傳遞的函數。如果您不想使用此快捷方式,可以將 ? 替換為另一個函數的名稱。
下面,我使用 Flickr JSONP API 拉入一個網頁,其中包含帶有“resig”標簽的最新照片。請注意,我使用的是 ? 快捷方式,因此 jQuery 將簡單地調用我提供的 getJSON() 函數的回調函數。傳遞給回調函數的參數是請求的JSON數據。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script> (function($){ $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=?", // Using ? just means call the callback function provided function (data) { // Data is the JSON object from Flickr $.each(data.items, function (i, item) { $('@@##@@').attr("src", item.media.m).appendTo('body'); if (i == 30) return false; }); }); })(jQuery); </script>
注意:請確保檢查您所使用的服務的 API 以便正確使用回調。例如,Flickr 使用名稱 jsoncallback=?,而 Yahoo!和 Digg 使用名稱 callback=?。
停止瀏覽器緩存 XHR 請求
執行 XHR 請求時,Internet Explorer 將緩存響應。如果響應包含具有較長保質期的靜態內容,則緩存可能是一件好事。但是,如果請求的內容是動態的并且可能隨時發生變化,您將需要確保瀏覽器不會緩存該請求。一種可能的解決方案是將唯一的查詢字符串值附加到 URL 的末尾。這將確保瀏覽器對于每個請求請求唯一的 URL。
// Add unique query string at end of the URL url: 'some?nocache='+(newDate()).getTime()
另一個解決方案(更多的是全局解決方案)是默認設置所有 AJAX 請求以包含我們剛才討論的無緩存邏輯。為此,請使用 ajaxSetup 函數全局關閉緩存。
$.ajaxSetup({ cache: false // True by default. False means caching is off. });
現在,為了用單獨的 XHR 請求覆蓋此全局設置,您只需在使用 ajax() 函數時更改緩存選項即可。下面是使用 ajax() 函數執行 XHR 請求的代碼示例,該函數將覆蓋全局設置并緩存請求。
$.ajaxSetup ({ cache: false // True by default. False means caching is off. }); jQuery.ajax({ cache: true, url: 'some', type: 'POST' } );