JSONP实现

weixin_30765505

于 2016-12-24 16:18:00 发布

阅读量52

点赞数

原文链接：http://www.cnblogs.com/lpdong/p/6217753.html

版权

使用jsonp实现跨域获取数据。

js部分（旧）：

(function(window, document) {
    'use strict';
    var jsonp = function(url, data, callback) {
        //1、挂载回调函数
        var fnsuffix = Math.random().toString().replace('.', '');
        var cbFuncName = 'my_json_cb' + fnsuffix;
        window[cbFuncName] = callback;
        //2、将data转换成url字符串的形式
        //{id=1,count=4}==>id=1&count=4
        var querystring = url.indexOf('?') == -1 ? '?' : '&';     //判断url中最后是否有？，没有则为？
        for (var key in data) {
            querystring += key + '=' + data[key] + '&';
        }
        //3、处理url中回调函数 url+=callback=sdgade
        querystring += 'callback=' + cbFuncName;
        //querystring=?id=1&count=4&callback=sdgade
        //4、创建一个script标签
        var scriptElement = document.createElement('script');
        scriptElement.src = url + querystring;
        //5、把script标签放到页面上
        document.body.appendChild(scriptElement);
    };
    window.$jsonp = jsonp;
})(window, document)

js部分（新）：对js做了一些修改，看的更加明白

(function(window, document) {
    'use strict';
    var jsonp = function(url, data, callback) {
        //1、把data修改成url的格式 ,{id=1,count=4}==>id=1&count=4
        var query = url.indexOf('?') == -1 ? '?' : '&';
        for (var key in data) {
            query += key + '=' + data[key] + '&';
        }
        //2、串联上callback
        var fnsuffix = Math.random().toString().replace('.', '');//生成一个随机数
        var cbName = 'my_jsonp_cb_' + fnsuffix;  //callback的名字为my_jsonp_cd_3398743
        query += 'callback=' + cbName;
        //3、新建script标签
        var scriptElement = document.createElement('script');
        scriptElement.src = url + query;
        //4、执行callback函数,执行完把script标签去掉，以免页面每次刷新都会多个script标签
        window[cbName] = function(data){
            callback(data);
            document.getElementsByTagName('head')[0].removeChild(scriptElement);
        }
        //5、把标签放到页面上
        document.getElementsByTagName('head')[0].appendChild(scriptElement);
    };
    window.jsonp=jsonp;   //把jsonp函数暴露给全局
})(window, document)

在页面中测试

<!DOCTYPE html>
<html>
<head>
<title>jsonp</title>
<script src="http.js"></script>
<script>
(function(){
jsonp('http://api.douban.com/v2/movie/in_theaters',
{count:1},function(data){
console.log(data);
document.getElementById('div1').innerHTML=data.subjects[0].title;
});
})();
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

结果可以返回结果，页面显示为，表示获取成功！

转载于:https://www.cnblogs.com/lpdong/p/6217753.html

weixin_30765505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP实现

使用jsonp实现跨域获取数据。js部分（旧）：(function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1、挂载回调函数 var fnsuffix = Math.random().toString().rep...
复制链接

扫一扫