jsonp 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
                /*动态创建跨域的js文件函数*/
                function createJS(url){
                    var  script=document.createElement('script');
                    script.type="text/javascript";
                    script.src=url;
                    document.getElementsByTagName('head')[0].appendChild(script);
                }
                /*调用，在问号后指定后天数据json格式，以jsonp函数包裹返回*/
                createJS('json.js?callback=jsonp')    
                
                
                /*前台定义好的接受返回数据的回调函数*/    
                function jsonp(json)
                {
                    var  oul=document.createElement('ul');
                    document.getElementsByTagName('body')[0].appendChild(oul);
                    for(x in json)
                    {
                        console.log(json[x]);
                        
                        var  oli=document.createElement('li');
                        oli.innerHTML=json[x];
                        oul.appendChild(oli);
                    }
                }
            
        </script>
    </head>
    <body>
        <!--
            jsonp原理：
                a站请求b站跨域文件，利用script的src属性无同源限制的特点，
                b站新建一个文件，要返回给前台的数据用一个回调函数包裹起来，数据存储形式为json(这个函数相当于调用前台方法)
                a站动态创建并引入这个js文件，并在它之前定义好同名的函数，处理逻辑即可。
                （注意script标签的前后执行顺序，好比前台封装了一个逻辑处理函数，外链js后台传参调用）
                 
        -->
    </body>
</html>

 

posted @ 2017-09-05 10:49  small-match  阅读(128)  评论(0)    收藏  举报