码迷,mamicode.com
首页 > Web开发 > 详细

封装一个JSONP请求

时间:2017-03-12 15:01:59      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:rem   获取   let   span   函数   支持   pre   for   pen   

首先,先介绍下jsonp的跨域原理:

1、 动态创建script标签
2、 利用 script 的src属性,会自动发送请求
3、 只需要将要请求的地址设置为 script标签的src属性的值
4、 需要服务端的接口配合,必须返回 JSONP 格式的数据才行

注意:
1、 需要有个支持 JSONP 请求的接口地址
2、 我们指定回调函数的名称
3、 我们写一个 与回调函数名称 相同的函数
4、 通过这个函数的参数就可以获取到服务器返回的数据了!!!
5、 这个函数只能写在全局环境中!!
 1 function jsonp(url, params, callback) {
 2             url += ‘?‘;
 3 
 4             for(var k in params) {
 5                 url += k + ‘=‘ + params[k] + ‘&‘
 6             }
 7 
 8             // 随机生成一个不重复的函数名
 9             var callbackName = ‘ivy_‘ + (new Date - 0);
10             url += ‘callback=‘ + callbackName;
11             // 根据生成的函数名,让这个函数称为一个全局函数
12             window[callbackName] = function( data ) {
13                 // console.log( data );
14                 callback( data );
15 
16                 // 获取到数据后,就可以将script标签以及函数都销毁掉
17                 document.head.removeChild( script );
18                 delete window[callbackName];
19             };
20 
21             // 动态创建script
22             // 浏览器会自动发送请求,请求接口
23             var script = document.createElement(‘script‘);
24             script.src = url;
25             document.head.appendChild( script );
26 
27         }

 

封装一个JSONP请求

标签:rem   获取   let   span   函数   支持   pre   for   pen   

原文地址:http://www.cnblogs.com/tangting/p/6537613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!