基本概念

当我在某web站点，这个站点里面发出了像其他站点的请求（不同链接，或者同一链接的不同端口），是会失败的，因为是浏览器的安全检测问题，当然，这个只是主流浏览器的功能，如果开发者自己开发的浏览器那么CROS就看开发者自己怎么处理了，这里以Chorm浏览器为例。

这里安装插件，允许跨站即可：

Allow-Control-Allow-Origin: *

这样就可以解决跨域的问题，但是还有一种方式，那就是jsonp，这个主要是在script中，发起请求，这样浏览器是不会连接的（百度的搜索引擎下拉关键字，QQ英语等都是用了这样的技术），下面来演示下。

代码与实例

这里这C/C++里面的回调差不多。写一个URL，指定一个函数，即可进行回调，如下代码：


<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
 
<body>
	<script>
		function getData(data){
			
			console.log(data);
		}
		var script = document.createElement("script");
		//script.id = 'jsonp';
		script.src = './jsonp.js';
		document.body.appendChild(script);
	</script>
</body>
 
</html>

这里来看看jsonp.js文件：


getData({
	name: '呵呵哒',
	value1: '呵呵'
})

程序运行截图如下：

下面是百度的下拉框首先来分析下：

这里的wd就是只就是浏览器输入的，看看里面的内容：

看看源码：


<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
 
<body>
	<input type="text" />
	<ul></ul>
	<script>
		function getData(data){
			
			console.log(data);
			var script = document.querySelector('#jsonp');
			$('ul').html('');
			for(var i = 0; i < data.g.length; i++){
			
				$('<li>' + data.g[i].q + '</li>').appendTo('ul');
			}
		}
		
		function getList(wd){
		
			var script = document.createElement("script");
			script.id = 'jsonp';
			script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1430,21123,29523,29721,29567,29220&req=2&csor=5&pwd=123&cb=getData&wd=' + wd;
			document.body.appendChild(script);
		}
		
		$('input').keyup(function(){
		
			var wd = $(this).val();
			getList(wd);
		})
	</script>
</body>
 
</html>