jsonp 實現跨域
阿新 • • 發佈：2019-01-03
為什麼會出現跨域問題
跨域的安全限制都是對瀏覽器端來說的，伺服器端是不存在跨域安全限制的。
瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。
如果協議，埠和主機對於兩個頁面是相同的，則兩個頁面具有相同的源，否則就是不同源的。
解決跨域問題的方法:
1 flash (已經淘汰)
2 伺服器代理中轉
3 jsonp 是資料交換的協議
4 document.domain(針對基礎域名相同的情況)
如
bj.58.com document.domain = 58.com
tj.58.com document.domain = 58.com
針對jsonp 解決跨域問題:
原理:
1 web頁面中擁有"src"屬性的標籤都擁有跨域的能力,比如<script> <image><iframe>
2 所以,我們將資料放到伺服器上,並且資料為json格式,(因為js 可以輕鬆處理json資料)
3因為我們無法監控通過script 的src屬性是否把資料獲取完成,所以需要做一個處理
4實現定義好處理跨域獲取資料的函式,如function doJSON(data){};
5用src獲取資料的時候新增一個引數cb='doJSON'(服務端會根據引數cb的值返回對應的內容)
此內容為以cb對應的值doJSON為函式真實要傳遞的資料為函式的引數的一串字元 如doJSON('資料');
最簡單的原理,例如:
var oScript= document.createElement('script'); oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=Anderson_An&cb=fn'; document.body.appendChild(oScript); //宣告請求資料成功後執行的函式 function fn(data){ console.log(data); }
ajax 與jsonp 的區別以及本質區別?
ajax 實現資料請求不能跨域,jsonp可以實現跨域獲取資料
本質區別是兩者實現的原理不同:ajax 是通過建立xmlHTTPRequest 來獲取內容,
而jsonp 的實現原理是通過,動態的新增script標籤,利用src屬性呼叫js 指令碼實現;
一個小栗子實現跨域獲取百度智慧輸入提示的功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#box {
margin: 100px;
}
#wd{
width: 400px;
height: 40px;
}
#list{
display: none;
width: 400px;
border: 1px solid #ccc;
}
li{
list-style: none;
padding: 5px;
}
a{
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="wd">
<ul id="list"></ul>
</div>
<script>
var wd = document.getElementById('wd');
var oUl = document.getElementById('list');
wd.oninput = debounce(getUserAction, 100, false);//給輸入繫結一個防抖事件
function debounce(func, wait, immediate) {
var timer = null;
var result;
var debounced = function () {
var _this = this;
var argu = arguments;
clearTimeout(timer);
if(immediate) {
if(!timer) func.apply(_this, argu);
timer = setTimeout(function () {
timer = null;
}, wait)
}else {
timer = setTimeout(function () {
func.apply(_this, argu);
}, wait)
}
return result;
}
debounced.cancel = function () {
clearTimeout(timer);
timer = null;
}
return debounced;
}
function getUserAction() {
if(wd.value) {
var oScript = document.createElement('script');//建立一個script標籤
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd.value +'&cb=doJson';
document.body.appendChild(oScript);
document.body.removeChild(oScript);
}else {
oUl.style.display = 'none';
}
}
function doJson(data) {
var dataList = data.s;//因為百度的提示字元儲存在s下
oUl.innerHTML = '';
if(dataList.length == 0) {
oUl.style.display = 'none';
}else {
dataList.forEach(function(item, index) {
var oLi = document.createElement('li');
var oA = document.createElement('a');
oA.href = 'https://www.baidu.com/s?wd=' + item;
oA.innerText = item;
oLi.appendChild(oA);
oUl.appendChild(oLi);
oUl.style.display = 'block';
})
}
}
</script>
</body>
</html>