解決瀏覽器跨域問(wèn)題的幾種方法
- flash
- 服務(wù)器代理中轉(zhuǎn)
- Jsonp
- document.domain(針對(duì)基礎(chǔ)域名相同的情況)
這篇博客主要介紹Jsonp
Josnp
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。由于同源策略，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的< script > 元素是一個(gè)例外。利用 < script > 元素的這個(gè)開放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。
Jsonp原理
Web頁(yè)面上用< script > 引入 js文件時(shí)則不受是否跨域的影響
（不僅如此，我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如< script >、< img >、< iframe >）于是我們把數(shù)據(jù)放到服務(wù)器上，并且數(shù)據(jù)為json形式（因?yàn)閖s可以輕松處理json數(shù)據(jù)）
因?yàn)槲覀儫o(wú)法監(jiān)控通過(guò)< script >的src屬性是否把數(shù)據(jù)獲取完成，所以我們需要做一個(gè)處理。
實(shí)現(xiàn)定義好處理跨域獲取數(shù)據(jù)的函數(shù)，如 function doJSON（data）{ }。
用src獲取數(shù)據(jù)的時(shí)候添加一個(gè)參數(shù)cb=‘doJSON’ (服務(wù)端會(huì)根據(jù)參數(shù)cb的值返回 對(duì)應(yīng)的內(nèi)容) 此內(nèi)容為以cb對(duì)應(yīng)的值doJSON為函數(shù)真實(shí)要傳遞的數(shù)據(jù)為函數(shù)的參數(shù)的一串字符 如 doJSON（’數(shù)據(jù)’）
百度搜索框
使用Jsonp做一個(gè)百度搜索框
完成效果:
這里寫圖片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索框</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
#box{
width: 400px;
margin: 50px auto;
}
#inp {
width: 400px;
height: 20px;
line-height: 20px;
}
ul{
display: none;
}
a{
color: red;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="inp">
<ul id="uu"></ul>
</div>
<script>
function xx (data) {
console.log(data);//看看傳回來(lái)的數(shù)據(jù)形式
ul.innerHTML='';
var arr = data.s;//發(fā)現(xiàn)s屬性是傳回來(lái)的數(shù)據(jù)
var df = document.createDocumentFragment();//創(chuàng)建文檔碎片
if(!data || !arr) {
ul.style.display = 'none';
}else {
ul.style.display = 'block';
arr.forEach(function (keyCode){//遍歷元素, 及插入節(jié)點(diǎn)
var oLi = document.createElement('li');
var oA = document.createElement('a');
oA.setAttribute('href', 'https://www.baidu.com/s?wd=' + keyCode);
oA.innerText = keyCode;
oLi.appendChild(oA);
df.appendChild(oLi);
})
ul.appendChild(df);
}
}
var ul = document.getElementById('uu');
var input = document.getElementById('inp');
input.onkeyup = function (){
if(input.value == '') {
ul.style.display = 'none';
}else{
var oScript = document.createElement('script');//通過(guò)script標(biāo)簽獲取數(shù)據(jù)
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + input.value + '&cb=xx';
document.body.appendChild(oScript);
oScript.remove();//獲取完數(shù)據(jù)將標(biāo)簽刪除
}
}
</script>
<!-- <script src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=beio&cb=xx'></script> -->
</body>
</html>
