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

最新推荐文章于 2022-08-13 14:57:30 发布

冰雪为融

最新推荐文章于 2022-08-13 14:57:30 发布

阅读量1.5k

点赞数

分类专栏： js学习笔记整理文章标签： jsonp

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79700082

版权

js学习笔记整理专栏收录该内容

56 篇文章 7 订阅

订阅专栏

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请求是否是被并不容易，开发人员需要使用计时器检测指定时间内是否接受到了响应，但是毕竟每个用户上网的速度和宽带都不一样，所以这种方法也并不理想。

冰雪为融

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）

JSONP：是JSON with padding（填充式JSON或参数式JSON）的简写，它由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的，而数据就是传入回调函数中的JSON数据jsonp原理：在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情，然后需要的时候通过script标签加载对应远...
复制链接

扫一扫