JSONP实现-js教程-PHP中文网

JSONP实现

高洛峰

发布： 2016-12-24 17:37:48

原创

1165 人浏览过

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

js部分

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

登录后复制

在页面中测试

<!DOCTYPE html>
<html>
<head>
    <title>jsonp</title>
</head>
<body>
    <div id="htt"></div>
    <script type="text/javascript" src="http.js"></script>
    <script>
        (function(){
            $jsonp(&#39;http://api.douban.com/v2/movie/in_theaters&#39;,{},    
                function(data){
                    document.getElementById(&#39;htt&#39;).innerHTML=JSON.stringify(data);
                });
        })()
    </script>
</body>
</html>

登录后复制

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

JSONP实现