文章目錄
一、什么是jsonp?
二、原生js中jsonp的使用
三、jquery中jsonp的使用
四、總結
一、什么是jsonp?
簡單點,jsonp其實就是一個跨域解決方案，當然它和json沒有半毛錢關系!
瀏覽器處于安全考慮,制定了同源策略,即同協議、同主機名、同埠，其中有任何一項不同即為不同源，
舉幾個栗子:
- http://www.baidu.com和http://www.baidu.com:8080,埠不同
- 10.0.13.1和10.0.13.2,主機名不同
- http://~~和https://,協議不同
因為同源策略的存在,所以Js跨域請求資料是不可以的!
但是:
可以把要請求的資料封裝成一個js陳述句，做一個方法的呼叫，
跨域請求js腳本可以得到此腳本，得到js腳本之后會立即執行，
可以把資料做為引數傳遞到方法中，就可以獲得資料，從而解決跨域問題，
jsonp原理:
瀏覽器在js請求中，是允許通過script標簽的src跨域請求，可以在請求的結果中添加回呼方法名，在請求頁面中定義方法，既可獲取到跨域請求的資料,通常用于解決ajax無法跨域請求的問題，
也許文字不太清楚我們看案例，
二、原生js中jsonp的使用
應用:做一個百度搜索的搜索提示
準備:拿百度搜索的介面,既然是百度的,那肯定是不同源了，
f12(審查元素)→Network→狂輸內容(最好是辨識度高的)，
仔細看會看見請求的變化,這樣就能拿到介面了,我拿到了一條
https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=wise_web&sugsid=1421,21122,28767,28721,28558,28584,26350,28519,28625,28606&wd=111111111&req=2&bs=1111&pbs=1111&csor=9&pwd=11111111&cb=jQuery1102021011196630534612_1554366585119&_=1554366585135那么到底是不是呢,我們丟瀏覽器驗證一下：
拿到了這么多的資料,對比上一張圖,可見沒拿錯,這個介面好像有點長,我們來剪短一點,去掉多余的(wd)，
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1111111&cb=縮短成這樣(主要兩個東西wd(關鍵字),cb(回呼函式))，
再我們來使用,就不一步一步來了,直接上代碼,代碼上有步驟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// jsonp 和 json 沒有半毛錢關系
// jsonp 是一種非官方又廣泛被使用的 跨域請求解決方案
// 用于解決ajax無法實作跨域請求(同源策略的限制)的問題
// src 屬性 不受同源策略限制 script img iframe
// jsonp如何實作跨域
// 1. 動態的創建script元素
// 2. 將訪問介面寫入script元素的src屬性
// 3. 設定引數和回呼函式
// 4. 將script元素加入頁面
// tips: jsonp 是 get 請求
function abc(data) { //3.設定引數和回呼函式
var result = data.s;
var list = document.querySelector('#list');
list.innerHTML = ""; //清空ul內的元素
result.forEach(function(elm, i) {
var tempLi = document.createElement('li');
tempLi.innerHTML = elm;
tempLi.onclick = function() {
location.href = "https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=" + this.innerHTML; //設定跳轉
}
list.appendChild(tempLi); //動態添加元素
});
}
window.onload = function() {
var baidu = document.querySelector('#baidu');
baidu.onkeyup = function() {
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=abc";
var script = document.createElement('script'); //1.動態創建script標簽
script.src = url; //2.將訪問介面寫入script元素的src屬性
document.body.appendChild(script); //4.將script元素加入頁面
}
}
</script>
</head>
<body>
<input type="text" id="baidu">
<ul id="list"></ul>
</body>
</html>原生js的jsonp大致就分為這幾個步驟了，
三、jquery中jsonp的使用
在jquery中并沒有單獨提供jsonp的使用方法,只有ajax的使用,但是jquery非常友好的給我們開了個小灶,只要將datatype值改為jsonp就可以了，
我們來做個簡單的資料接收：
<script>
$.ajax({
type: "get",
url: "http://web-yyb.top/city.php?string", //城市介面
data: "data",
dataType: "jsonp", //這里改為jsonp即可跨域使用
success: function(response) {
console.log(response)
}
});
</script>列印結果如下：
四、總結
以上這就是jsonp在原生js中和jq中的使用了,非常簡單，
假如你在團隊中已經成為一名有一定話語權的前端了，我希望你永遠不要去配置跨域，請讓后端去做（4行代碼就能搞定的事）！這種事情不要去妥協！
如果你對瀏覽器同源策略的解決方案有興趣的話可以看下面這篇文章：
地址：待補充 （后面補上）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299361.html
標籤：其他