一、什么是 jsonp?
简单点，jsonp 其实就是一个跨域解决方案。它和 json 没有半毛钱关系!
浏览器处于安全考虑，制定了同源策略，即同协议、同主机名、同端口。其中有任何一项不同即为不同源。
举几个栗子:
http://www.baidu.com 和 http://www.baidu.com:8080，端口不同
10.0.13.1 和 10.0.13.2，主机名不同
http://~~和 https://，协议不同
因为同源策略的存在，所以 Js 跨域请求数据是不可以的!
但是：
可以把要请求的数据封装成一个 js 语句，做一个方法的调用。
跨域请求 js 脚本可以得到此脚本。得到 js 脚本之后会立即执行。
可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
拿到了这么多的数据，对比上一张图，可见没拿错，这个接口好像有点长，我们来剪短一点，去掉多余的(wd)。
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1111111&cb=
缩短成这样(主要两个东西 wd(关键字)，cb(回调函数))。
再我们来使用，就不一步一步来了，直接上代码，代码上有步骤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// jsonp 和 json 没有半毛钱关系
// jsonp 是一种非官方又广泛被使用的 跨域请求解决方案
// 用于解决 ajax 无法实现跨域请求(同源策略的限制)的问题
// src 属性 不受同源策略限制 script img iframe
// jsonp 如何实现跨域
// 1. 动态的创建 script 元素
// 2. 将访问接口写入 script 元素的 src 属性
// 3. 设置参数和回调函数
// 4. 将 script 元素加入页面
// tips: jsonp 是 get 请求
function abc(data) { //3.设置参数和回调函数
var result = data.s;
var list = document.querySelector('#list');
list.innerHTML = ""; //清空 ul 内的元素
result.forEach(function(elm, i) {
var tempLi = document.createElement('li');
tempLi.innerHTML = elm;
tempLi.onclick = function() {
location.href = "https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=" + this.innerHTML; //设置跳转
}
list.appendChild(tempLi); //动态添加元素
});
}
window.onload = function() {
var baidu = document.querySelector('#baidu');
baidu.onkeyup = function() {
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=abc";
var script = document.createElement('script'); //1.动态创建 script 标签
script.src = url; //2.将访问接口写入 script 元素的 src 属性
document.body.appendChild(script); //4.将 script 元素加入页面
}
}
</script>
</head>
<body>
<input type="text" id="baidu">
<ul id="list"></ul>
</body>
</html>
原生 js 的 jsonp 大致就分为这几个步骤了。
三、jquery 中 jsonp 的使用
在 jquery 中并没有单独提供jsonp的使用方法，只有 ajax 的使用，但是 jquery 非常友好的给我们开了个小灶，只要将datatype值改为jsonp就可以了。
我们来做个简单的数据接收：
$.ajax({
type: "get",
url: "http://接口/city.php?string",
data: "data",
dataType: "jsonp", //这里改为 jsonp 即可跨域使用
success: function(response) {
console.log(response)
}
});
四、总结
以上这就是jsonp在原生 js 中和 jq 中的使用了,非常简单。
假如你在团队中已经成为一名有一定话语权的前端了，我希望你永远不要去配置跨域，请让后端去做（4 行代码就能搞定的事）！这种事情不要去妥协！