jsonp 指南

jsonp 的本质就是在页面创建一个 script 标签引入一段 js 执行而已.

把 回调函数的名字 通过 url 传给后台, 后台返回一段 js 代码, 这段代码在这个 js 文件加载完后自动执行, 而正是在这段 js 代码里, 我们执行了 回调函数.

好, 我们来举个完整的例子.

我们要从域名 qq1.com 某页面发送请求到 qq2.com.

前台页面可以这样写:

var el = document.createElement('script');                   // 创建一个 script 标签
el.src = '//qq2.com/users?name=刘看山&callback=onSuccess';    // 设置 url 属性, 注意参数
document.body.appendChild(el);                               // 把标签插到页面里去

function onSuccess(resp) {                                   // 回调函数, 暴露在全局
    console.log(resp);                                       // 回调函数主体
}

你看第 2 行, 我们把回调函数名当成参数放到了 url 里, 我们还带了另一个参数 name, 这样后台就可这样写(php):

// 这里只举例, 没有对参数过滤, :)
$callback = $_GET['callback'];                               // 拿到前台回调函数名

// 然后在这里进行业务逻辑处理
// 如根据参数里的 name 从数据库取出用户信息
$name = $_GET['name'];                                       
$user_info = json_encode($this->getUserInfo($name));         // 转成 json 格式

echo "$callback($user_info)";                                // 用回调函数包起来, 
                                                             // 把 json 数据当参数传进去,
                                                             // 整个以文本输出给前台

当这个请求完后, 前台拿到的所有东西可能长这样:

onSuccess({"user_id"=100,"name"="刘看山","gender"="M"})

script 脚本请求完后立即自动执行了, 也就是执行了你页面上等了很久的回调函数了. 讲完了. 理解了没?

你看, 传到回调函数里的是一个对象.

----------- cut ------------

我们把前台代码改成 jQuery 版的:

$.ajax({
    url: '//qq2.com/users',         // 设置 url
    dataType: 'jsonp',
    data: {
        name: "刘看山"               // 设置向后台传的参数 
    }, 
    timeout: 30000
}).done(function(resp) {
    console.log(resp);              //  你只用放心地在这里写你的回调函数就好
}).fail(function(x, t, m) {
    if(t==="timeout") {
    // 请求超时, 失败, 也有可能是后台出错了, 什么都没有返回, 才没有触发回调函数
    // 你只能在判断超时来确定的确是否出错了
    // 因为脚本要是没加载进来, 不再会有其它任何函数触发
    }
}

你看, jQuery 版没有写 callback=onSuccess 在 url 里, 也没有当参数跟 name 放到一起.
因为 jQuery 会自动给你创建一个全局的函数, 把你的回调函数赋给它, 如, 可能长这样:

jQuery11130629023184068501_1447428071106(resp) {
    console.log(resp);  
}

如此不好记的函数名, 相信也不会跟你的全局函数冲突吧. 😄

而它加到页面上的 script 可能长这样:

<script src="//qq2.com/users?callback=jQuery11130629023184068501_1447428071106&name=\"刘看山\""></script>

我们没有改后台, 那这个请求返回的东西应该还是:

jQuery11130629023184068501_1447428071106({"user_id"=100,"name"="刘看山","gender"="M"})

理解了嘛? 理解了请点小星星, 没理解请在下面提问.
快来群里玩, 豪情的专业前端群:492107297 发大图自由群:343243212 😃