1.jsonp原理 通過動態創建script標簽,利用script標簽的src屬性可以獲取任何域下的js腳本,通過這個特性, 伺服器端不在返回json格式,而是返回一段某個函數的js代碼的調用，實現了跨域。 創建一個回調函數，然後在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調 ...
1.jsonp原理
通過動態創建script標簽,利用script標簽的src屬性可以獲取任何域下的js腳本,通過這個特性,
服務器端不在返回json格式,而是返回一段某個函數的js代碼的調用，實現了跨域。
創建一個回調函數，然後在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。
將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義吧。
2.具體實現
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> // 得到航班信息查詢結果後的回調函數 var flightHandler = function(data){ alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '餘票 ' + data.tickets + ' 張。'); }; // 提供jsonp服務的url地址（不管是什麼類型的地址，最終生成的返回值都是一段javascript代碼） var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 創建script標簽，設置其屬性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script標簽加入head，此時調用開始 document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> </body> </html>
調用的url中傳遞了一個code參數，告訴伺服器我要查的是CA1998次航班的信息，而callback參數則告訴伺服器，我的本地回調函數叫做flightHandler，所以請把查詢結果傳入這個函數中進行調用。
OK，伺服器很聰明，這個叫做flightResult.aspx的頁面生成了一段這樣的代碼提供給jsonp.html
flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });
傳遞給flightHandler函數的是一個json，它描述了航班的基本信息
3.jquery實現jsonp調用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//傳遞給請求處理程式或頁面的，用以獲得jsonp回調函數名的參數名(一般預設為:callback) jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，預設為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據 success: function(json){ alert('您查詢到航班信息：票價： ' + json.price + ' 元，餘票： ' + json.tickets + ' 張。'); }, error: function(){ alert('fail'); } }); }); </script> </head> <body> </body> </html>
為什麼我這次沒有寫flightHandler這個函數呢？因為jquery在處理jsonp類型的ajax時，自動幫你生成回調函數並把數據取出來供success屬性方法來調用。
