JSON是一種輕量級的數據傳輸格式，被廣泛應用于當前Web應用中。JSON格式數據的編碼和解析基本在所有主流語言中都被實現，所以現在大部分前后端分離的架構都以JSON格式進行數據的傳輸。首先拋出瀏覽器同源策略這個概念，為了保證用戶訪問的安全，現代瀏覽器使用了同源策略，即不允許訪問非同源的頁面.
JSONP就是用來解決跨域請求問題的，那么具體是怎么實現的呢？
Ajax請求受同源策略影響，不允許進行跨域請求，而script標簽src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個特性，服務端不再返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。
JSONP具體實現
1.首先看下ajax中如果進行跨域請求會如何。 前端代碼在域www.newton.com下面，使用ajax發(fā)送了一個跨域的get請求
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); }</script><script type="text/Javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.newton_xt.com/student.php?id=1", type: "json", success : function(data) { jsonhandle(data); } }); });</script></body></html>12345678910111213141516171819202122232425262728291234567891011121314151617181920212223242526272829后端PHP代碼放在域www.newton_xt.com下，簡單的輸出一段json格式的數據
jsonhandle({ "age" : 15, "name": "John",})12341234當訪問前端代碼http://www.newton.com/gojsonp/index.html 時 Chrome報以下錯誤 
提示了不同源的URL禁止訪問
2.下面使用JSONP，將前端代碼中的ajax請求去掉，添加了一個script標簽，標簽的src指向了另一個域www.newton_xt.com下的remote.js腳本
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); }</script><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript" src="http://www.newton_xt.com/remote.js"></script></body></html>1234567891011121314151612345678910111213141516這里調用了跨域的remote.js腳本，remote.js代碼如下：
jsonhandle({ "age" : 15, "name": "John",})12341234也就是這段遠程的js代碼執(zhí)行了上面定義的函數，彈出了提示框 
3.將前端代碼再進行修改，代碼如下：
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); }</script><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ var url = "http://www.newton_xt.com/student.php?id=1&callback=jsonhandle"; var obj = $('<script><//script>'); obj.attr("src",url); $("body").append(obj); });</script></body></html>12345678910111213141516171819202122231234567891011121314151617181920212223這里動態(tài)的添加了一個script標簽，src指向跨域的一個php腳本，并且將上面的js函數名作為callback參數傳入，那么我們看下PHP代碼怎么寫的：
<?php$data = array( 'age' => 20, 'name' => '張三',);$callback = $_GET['callback'];echo $callback."(".json_encode($data).")";return;1234567891012345678910PHP代碼返回了一段JS語句，即
jsonhandle({ "age" : 15, "name": "張三",})12341234此時訪問頁面時，動態(tài)添加了一個script標簽，src指向PHP腳本，執(zhí)行返回的JS代碼，成功彈出提示框。 所以JSONP將訪問跨域請求變成了執(zhí)行遠程JS代碼，服務端不再返回JSON格式的數據，而是返回了一段將JSON數據作為傳入參數的函數執(zhí)行代碼。
4.最后jQuery提供了方便使用JSONP的方式，代碼如下：
<!DOCTYPE html><html><head> <title>GoJSONP</title></head><body><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $.ajax({ type : "get", async: false, url : "http://www.newton_xt.com/student.php?id=1", dataType: "jsonp", jsonp:"callback", //請求php的參數名 jsonpCallback: "jsonhandle",//要執(zhí)行的回調函數 success : function(data) { alert("age:" + data.age + "name:" + data.name); } }); });</script></body></html>
