实现jsonp js

最新推荐文章于 2024-02-24 00:15:00 发布

原创最新推荐文章于 2024-02-24 00:15:00 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

56 篇文章

订阅专栏

JSONP是常见的跨域请求方法，利用浏览器可跨域请求外链JS文件的特性实现数据传输。其请求过程包括：浏览器创建script标签并赋值发起请求，服务端将返回数据作为参数和回调函数拼接返回，浏览器接收响应数据后相当于调用回调函数并传入参数。

JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件，利用这一特性实现数据传输。

JSONP的请求过程

请求阶段：浏览器创建一个 script 标签，并给其src 赋值(类似 http://example.com/api/?callback=jsonpCallback）。
发送请求：当给script的src赋值时，浏览器就会发起一个请求。
数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数。

var newscript = document.createElement('script');
newscript.src = 'https://sp0.baidu.com/su?username=Jack&callback=foo';
document.body.appendChild(newscript);
function foo(data) { //callback函数要绑定在window对象上
    console.log(data);  //foo({ username: 'Jack' })
}