解决浏览器跨域问题的几种方法
- flash
- 服务器代理中转
- Jsonp
- document.domain(针对基础域名相同的情况)
这篇博客主要介绍Jsonp
Josnp
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的< script > 元素是一个例外。利用 < script > 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
Jsonp原理
Web页面上用< script > 引入 js文件时则不受是否跨域的影响
（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如< script >、< img >、< iframe >）于是我们把数据放到服务器上，并且数据为json形式（因为js可以轻松处理json数据）
因为我们无法监控通过< script >的src属性是否把数据获取完成，所以我们需要做一个处理。
实现定义好处理跨域获取数据的函数，如 function doJSON（data）{ }。
用src获取数据的时候添加一个参数cb=‘doJSON’ (服务端会根据参数cb的值返回 对应的内容) 此内容为以cb对应的值doJSON为函数真实要传递的数据为函数的参数的一串字符 如 doJSON（’数据’）
百度搜索框
使用Jsonp做一个百度搜索框
完成效果:
这里写图片描述
<!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);//看看传回来的数据形式
ul.innerHTML='';
var arr = data.s;//发现s属性是传回来的数据
var df = document.createDocumentFragment();//创建文档碎片
if(!data || !arr) {
ul.style.display = 'none';
}else {
ul.style.display = 'block';
arr.forEach(function (keyCode){//遍历元素, 及插入节点
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');//通过script标签获取数据
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + input.value + '&cb=xx';
document.body.appendChild(oScript);
oScript.remove();//获取完数据将标签删除
}
}
</script>
<!-- <script src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=beio&cb=xx'></script> -->
</body>
</html>
