您的位置：首页 > Web前端 > JavaScript

实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）

2018-03-26 17:08 806 查看

JSONP：是JSON with padding（填充式JSON或参数式JSON）的简写，它由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的，而数据就是传入回调函数中的JSON数据
jsonp原理：在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情，然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把这个数据当作这个函数的参数传进去
下面是使用jsonp跨域请求百度数据接口，实现百度搜索下拉菜单的功能。嗯、直接上代码<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
<script>
function leo(data) {//回调函数

var oUl = document.getElementById('ul1');
var html = '';
if (data.s.length) {//判断是否有数据
oUl.style.display = 'block';//有数据让下拉菜单显示出来
for (var i=0; i<data.s.length; i++) {
html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
}
oUl.innerHTML = html;
} else {
oUl.style.display = 'none';//没有则不显示
}

}
window.onload = function() {

var oQ = document.getElementById('q');
var oUl = document.getElementById('ul1');

oQ.onkeyup = function() {

if ( this.value != '' ) {
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=leo';//this.value是我们在输入框中输入的内容。leo是我们定义的回调函数的名称
document.body.appendChild(oScript);
} else {
oUl.style.display = 'none';
}

}

}
</script>
</head>

<body>
<input type="text" id="q" />
<ul id="ul1"></ul>
</body>
</html>嗯，先就这么多
然后聊聊jsonp的缺点（参考js高级程序设计这本书上的说法）
1、首先JSONP是从其他域中加载代码执行，如果其他域不安全，很可能会在响应中夹带一些恶意的代码，而此时除了完全放弃jsonp调用之外，没有办法追究。因此在使用不是你自己运维的web服务时，一定要保证它安全可靠
2、要确定JSONP请求是否是被并不容易，开发人员需要使用计时器检测指定时间内是否接受到了响应，但是毕竟每个用户上网的速度和宽带都不一样，所以这种方法也并不理想。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsonp

相关文章推荐

新的分享

章节导航