JSONP 구현-JS 튜토리얼-php.cn

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 구현