jsonp理解 一.jsonp是什麼？ jsonp是一種非官方的跨域請求協議，通俗的說就是數據交互的方法，他解決了ajax不能跨域請求的困境。他與json完全不是一回事，json是一種數據傳輸的格式，jsonp是傳輸的渠道 二.原理 1.我們在使用javascript的引入外部js文件時，<scri ...
jsonp理解
一.jsonp是什麼？
jsonp是一種非官方的跨域請求協議，通俗的說就是數據交互的方法，他解決了ajax不能跨域請求的困境。他與json完全不是一回事，json是一種數據傳輸的格式，jsonp是傳輸的渠道
二.原理
1.我們在使用javascript的引入外部js文件時，<script>標簽有個src的屬性，用於引入外部的.js文件。我們在使用的時候，這個src的文件路徑可以是本功能變數名稱下的，也可以是其他網站上的，這就為跨域創造條件。
2.javascript又可以創建元素，操作元素。這樣我們就可以使用js動態的創建<scrpit>標簽，然後添加src屬性，這樣他就會使用get方法請求路徑。利用這個請求原理，可以在客戶端定義一個帶參數函數，然後在伺服器端返回 調用客戶端函數的字元串，這樣數據就參數的形式被傳回了客戶端。
原理圖解：
3.原理代碼的簡單實現（摘自於：木子月）
<script>
創建並且插入script標簽
function createscript(reqUrl){
var Ocreatescript = document.createElement('script');
Ocreatescript .type = 'text/javascript';
Ocreatescript.src = reqUrl;
document.getElementsByTagName('head')[0].appendChild(Ocreatescript);
}
創建一個hello方法
function hello(res){
console.log(res);
}
createscript('http://loveme.com/index.php?callback=hello ');
請求回來的內容：
hello({ 'hi': 'nihao' }); //調用了上面的hello方法
</script>
服務端：index.php
<?php
$a=$_GET["callback"];
echo $a.'({ 'hi': 'nihao' })'
?>
4.jquery實現：（摘於：隨它去吧）
<!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>
