溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是淺談JSONP的原理、理解與實例，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
1.什么是jsonp
1.1 同源策略
瀏覽器同源策略的限制，XmlHttpRequest只允許請求當前源（相同域名、協議、端口）的資源。
-1）jsonp只支持get請求
-2）不受同源策略限制 ，兼容性好 不需要XMLHttpRequest（ActiveX）支持,通過js回調函數返回結果
-3）不能解決 不同域的兩個頁面之間js調用的問題
2. jsonp 原理
動態添加一個script標簽，get鏈接上發送回調函數名稱 傳給服務器 服務器獲取回調函數名稱 返回這個函數名稱的JS函數（拼裝函數） json數據作為函數的實際參數傳入 返回的數據是js函數 在前端調用回調函數（ json數據傳入） 執行回調函數
3.實例
先來說說 服務端應該返回的數據形式 如下所示 用的php thinphp框架編寫的 訪問URL 是
http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback callback后面的名字要傳給服務器的 后端拼裝成一個js回調函數 這樣前臺json數據就作為回調函數的參數傳入 獲取到數據了
public function testJsonP(){
$jsonname =I('get.callback');//獲取URL上的callback名稱 也就是獲取jsonpCallback
$a = [name=>'張三',sex=>'男',msg=>'返回成功！'];// 一個數組數據
$json = json_encode($a);// 轉成json數據
echo $jsonname.'('.$json.');';//正確的格式應該是這樣 jsonpCallback({"name":"\u5f20\u4e09","sex":"\u7537","msg":"\u8fd4\u56de\u6210\u529f\uff01"}); 不要忘記分號; 這樣返回的才是一個js函數 前臺肯定有這個函數名字才行
}tip:關聯數組 上面例子 $a = array( "msg" => "返回成功！")
前臺 訪問URL http://localhost:63343/H5/jsonP.html 動態添加一個script標簽 src里 調用回調函數 jsonpCallback() . ?callback=jsonpCallback名字隨便起 后端獲取的就是jsonpCallback這個名字而已
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function jsonpCallback(date){
console.log(date);
alert(date);
alert(date.msg);
}
var script =document.createElement('script');
script.src='http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback=jsonpCallback';
document.body.insertBefore(script,document.body.firstChild);
</script>
</body>
</html>我們可以在瀏覽器里 這里我用的谷歌直接查看 數據是否訪問正確 切換到Network標簽下 可以看到生成的訪問地址 點擊然后
這下面的圖 點擊一下左側鏈接 切換到Response就可以看到響應的數據了 跟前端寫的函數名要一致 里面的json數據就是 那個函數的參數 傳入 別忘記有分號;
前端我們已經console.log 數據了 也可以查看 切換到Console標簽下
看完這篇關于淺談JSONP的原理、理解與實例的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
