首页 > Web开发 > 详细

AJAX JSONP源码实现

时间:2016-05-13 11:19:48      阅读:227      评论:0      收藏:0      [点我收藏+]

 

关于JSONP以及跨域问题,请自行搜索。

本文重点给出AJAX JSONP的模拟实现代码,代码中JSONP的基本原理也一目了然。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模拟实现AJAX JSONP源码</title>
    <script type="text/javascript">
    
    // 生成随机字符串
    function randomString(len) {
        len = len || 32;
        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhijklmnoprstuvwxyz1234567890";  
        var maxPos = chars.length;
        var pwd = ‘‘;
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    function ajax_jsonp(data) {
    
        // 生成随机函数名并指向传入的回调函数
        var callbackfun = "jquery_" + randomString(32);
        eval( callbackfun+ " = data.success; "); 
        
        // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
        var url = data.url + "&callback="+callbackfun;
        // 创建script标签,设置其属性
        var script = document.createElement(script);
        script.setAttribute(src, url);
        // 把script标签加入head,此时调用开始
        document.getElementsByTagName(head)[0].appendChild(script); 
    
    }
    
    // 模拟调用
    ajax_jsonp({
        url: "http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",
        success: function(data){
            alert(ID  + data.ad[0].id );
        }
    });
    
    </script>
</head>
<body>

</body>
</html>

 

 

基本工作思路:

1. 创建一个随机字符串作为回调函数名

2. 把传入的回调函数赋值给随机函数。

3. 把该随机函数名作为callback参数补充到传入的URL(真正要访问的跨域的URL)中

4. 动态创建出script元素并触发URL的访问。浏览器获取返回的JS代码并执行,也就是执行了传入的回调函数。

(第三方URL返回的必须是一个合法的JS函数调用字符串,其中函数名是参数callback,参数是真正要返回的数据。)

 

参考文章

 

注意:此文章属博主原创,转载请注明原始链接,谢谢合作。

http://www.cnblogs.com/zhangfanwen/p/5486860.html

AJAX JSONP源码实现

原文:http://www.cnblogs.com/zhangfanwen/p/5486860.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!