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

Dear 丶 2022-05-28 00:28 187阅读 0赞

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