国产精品二区中文字幕,高清中文字幕一区二区,人妻系列中文字幕精品

AJAX JSONP源碼實現（原理解析）

關于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，參數是真正要返回的數據。）

參考文章（文中代碼基于該參考文章修改）

posted on 2016-05-12 18:25 張凡文閱讀(2661) 評論(0) 收藏舉報

刷新頁面返回頂部

張凡文

導航

公告

AJAX JSONP源碼實現（原理解析）