JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script>元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP.
步骤：
1,在document中动态创建<script>
2,给<script> 的属性src添加url(你的资源访问路径)
3,在url中添加calback|cb(回调函数)
4,写回调函数(处理数据你接收的数据).
百度搜索Demo:
Html:
<body>
<input type="text" />
<ul>
<li><a href="###">fsaef</a></li>
</ul>
</body>
Css:
<style>
*{
margin:0;
padding:0;
}
body{
padding:100px;
}
ul{
width:150px;
background-color:#EEEEEE;
display:none;
}
ulli{
list-style:none;
}
ullia{
display:block;
width:150px;
height:30px;
line-height:30px;
}
ullia:hover{
background-color:#AAA;
color: skyblue;
}
</style>
JS:
<script type="text/javascript">
var oInput=document.querySelector('input');
var oUl=document.querySelector('ul');
var aUlLis=document.querySelector('ul li');
var oHead=document.getElementById('head');
oInput.onkeyup=function(){
var aOldScript=document.getElementsByClassName('num1');
if(aOldScript.length>=1){
oHead.removeChild(aOldScript[0]);//删除动态生成的旧的<script>
}
var oScript=document.createElement('script');//创建<script>节点
oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+oInput.value+'&cb=fn'//给oScript添加资源路径和回调函数
oScript.className="num1";
oHead.appendChild(oScript);//在文档尾端添加节点
oUl.style.display='block';
}
function fn(data){//编写回调函数（处理返回的数据）
var arr=data.s;
var str='';
for(var i=0;i<arr.length;i++){
str+='<li><a href="###">'+arr[i]+'</a></li>';
oUl.innerHTML=str;
var aUlLias=document.querySelectorAll('ul li a');
for(var i=0;i<aUlLias.length;i++){
(function(i){
aUlLias[i].onclick=function(){
oInput.value=this.innerText;
oUl.style.display='none';
window.open('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=0&rsv_idx=1&tn=baidu&wd='+this.innerText);
}
})(i);
}
}
}
</script>
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
