ajax 和 jsonp 區(qū)別如下:
jquery、ext、dojo 這類庫的實現(xiàn)手段其實大同小異,在同源策略下,在某個服務器下的頁面是無法獲取到該服務器以外的數(shù)據(jù)的,但 img、iframe、script 等標簽是個例外,這些標簽可以通過 src 屬性請求到其他服務器上的數(shù)據(jù)。利用 script 標簽的開放策略,我們可以實現(xiàn)跨域請求數(shù)據(jù),當然,也需要服務端的配合。一般的 ajax 是不能跨域請求的,因此需要使用一種特別的方式來實現(xiàn)跨域,其中的原理是利用 <script> 元素的這個開放策略。
這里有2個重要的參數(shù):
jsonpCallback:
為 jsonp 請求指定一個回調(diào)函數(shù)名。這個值將用來取代 jQuery 自動生成的隨機函數(shù)名。這主要用來讓 jQuery 生成一個獨特的函數(shù)名,這樣管理請求更容易,也能方便地提供回調(diào)函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候,指定這個回調(diào)函數(shù)名。從jQuery 1.5 開始,你也可以使用一個函數(shù)作為該參數(shù)設置,在這種情況下,該函數(shù)的返回值就是 jsonpCallback 的結(jié)果。
jsonp:
在一個 jsonp 請求中重寫回調(diào)函數(shù)的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給服務器。在 jQuery 1.5,設置 jsonp 選項為 false,阻止了 jQuery 從加入 "?callback" 字符串的 URL 或試圖使用 "=?" 轉(zhuǎn)換。在這種情況下,你也應該明確設置 jsonpCallback 設置。例如, { jsonp: false, jsonpCallback: "callbackName" }。
當我們正常地請求一個 JSON 數(shù)據(jù)的時候,服務端返回的是一串 JSON 類型的數(shù)據(jù),而我們使用 JSONP 模式來請求數(shù)據(jù)的時候,服務端返回的是一段可執(zhí)行的 JavaScript 代碼,所以我們可見服務器代碼最后一行。
$_GET['callback']).'('. json_encode(array('status'=>1,'info'=>'OK')) .')
就是執(zhí)行的 backfunc 方法,然后把數(shù)據(jù)通過回調(diào)的方式傳遞過。
OK,就是整個流程就是:
客戶端發(fā)送一個請求,規(guī)定一個可執(zhí)行的函數(shù)名(這里就是 jQuery 做了封裝的處理,自動幫你生成回調(diào)函數(shù)并把數(shù)據(jù)取出來供 success 屬性方法來調(diào)用,不是傳遞的一個回調(diào)句柄),服務端接受了這個 backfunc 函數(shù)名,然后把數(shù)據(jù)通過實參的形式發(fā)送出去
右邊偽代碼模擬了下 jsonp 的原理。
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報