以前直接用jQuery的$.ajax({dataType:"jsonp"})方法做跨域请求，没有深入研究why和how。直到最近遇到了如下问题：一个jsonp请求发送成功，数据也返回来了，但是直接进入了$.ajax()的error方法，报错为
Uncaught SyntaxError: Unexpected token :
百度了一上午，把这个问题搞清楚了。
1.jsonp的原理
浏览器安全策略等等的就按下不表，简要的说就是一个<script src=""></script>标签可以不受浏览器同源策略的限制，它可以去请求不同域上的js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="remote.js"></script>
</head>
<body>
</body>
</html>
这是页面上引入js文件的方法。像这样引入一个remote.js文件，当这个文件下载好后会立即执行里面的代码。这样，对代码进行一下修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function jsonpCallback(data){
console.log(data.data_number)
}
</script>
<script src="remote.js"></script>
//remote.js 内容：jsonpCallback({"data_number":"123"})
</head>
<body>
</body>
</html>
当remote.js下载好后，会立即执行jsonpCallback({"data_number":"123"})，而这个函数定义在上一个<script>中，控制台输出123。123这个数据来自哪里呢？写在jsonpCallback这个函数调用时传递的参数中。
可以看到：
-
<script>标签可以请求不同域上的js文件 - 请求的js文件下载好后会立即执行，可以调用本地写好的任何方法，就像在本地直接写在
<script>中一样。
所以，当需要跨域请求时，在服务器端可以把需要返回的数据拼接为一个json对象，放在函数的参数位置，然后将这个函数写在一个js文件中，最后返回给客户端这个js文件。这个函数的函数名服务器怎么知道呢？在客户端的请求中带过来，服务器解析后创建一个同名函数即可。
2.具体步骤
//客户端
//1.定义回调函数
function jsonpCallback(data){
console.log(data)
}
//2.动态创建一个script标签
var JSONP = document.createElement("script");
JSONP.setAttribute("src","请求的地址+回调函数的名称(这里是jsonpCallback)+其他请求参数");
//3.插入页面，开始下载文件
document.body.appendChild(JSONP);
//4.下载完成，立即执行获取的js文件中的jsonpCallback({...})方法，数据已成功获取并控制台输出
//服务器端
//1.接收到客户端请求
//2.解析请求中的回调函数名和参数，并准备数据
//3.拼接回调函数与数据，并返回。如jsonpCallback({...数据})
3.jQuery中的使用方法
$.ajax({
url: "请求地址",
type: "post",
data: "请求参数",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"jsonpCallback",
beforeSend:function(){
addLoading('努力查询中，请稍后');
},
success: function (data) {
removeLoading();
console.log(data);
},
error: function () {
removeLoading();
alert("系统错误")
}
});
在这个请求中，jsonp属性是jsonp回调函数名的参数名，jsonpCallback是回调函数的函数名。也就是前面的例子中所说，需要告诉服务器该拼接个什么名字的函数。如果我们不写这个函数名，也可以执行成功。
我自己猜测是jQuery会自动生成一个随机函数名，并在这个方法中直接调用success方法
randomNameJsonpCallBack(data){
success(data);
}
这样执行的就是success中方法，用起来真正的ajax方法没有区别
4.回头看报错
Uncaught SyntaxError: Unexpected token :这个报错，是因为服务器端没有按照jsonp的要求将数据拼接到回调函数的参数中，而是直接返回一个json。
网友评论