版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
目录
基本概念
当我在某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>这里cb指向自己的函数，到时候就会调用！
程序运行截图如下：
