Jsonp

Posted 2020-09-21 阿里山QQ

在需要访问不同域的接口的数据的时候，一般有两种方式:

第一种:

使用requests模块,在业务逻辑中直接访问别的域的接口，获取数据,然后将返回的数据显示到前端页面上;

这个时候，数据访问的流程是:  客户端-->server请求其他域的接口--->server接收返回的数据--->将数据显示在前端或其他任意地方

import requests

def req(request):
    response = requests.get(\'http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0\')
    # print(response.content)   #字节
    response.encoding = \'utf-8\'
    # print(response.text)       #字符串
    return render(request,\'req.html\',{\'result\':response.text})

 

前端获取接收的字符串如下,是utf-8编码格式的

 

第二种:

直接使用js在前端页面请求其他域的接口,获取数据,最长用的是jsonp;

jsonp请求的原理:浏览器具有同源策略，对于ajax请求,不接受不同域的数据,而对于script标签没有此约束,在创建script标签的src属性的时候,页面在加载src的链接的时候,也会执行(发送链接的请求)链接的地址,如果链接是http get的接口,会返回对应的数据,这样就实现了获取不同域的接口数据的目的了;

需要注意的是:接口返回的数据,一定要符合js格式,否则数据没有办法被处理,一般我们在src的get请求链接，会携带参数？callback=list,使用callback表示需要被返回的数据的格式,这样就可以在定义专门处理返回的数据的方法了; jsonp只能发送get请求,不能发送其他的请求;

 

1、使用XMLhttprequest对象发送jsonp请求;

    <h1>后台获取的结果</h1>
    {{ result }}

    <h1>js获取的结果</h1>
    <input type="button" value="获取数据" onclick="getContent();">
    <div id="container"></div>
    <script>
        function getContent() {
            /*
            var xhr = new XMLHttpRequest();
            xhr.open(\'GET\',\'http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0\');
            xhr.onreadystatechange = function () {
                console.log(xhr.responseText);
            };
            xhr.send()
            */
            var tag = document.createElement(\'script\');
            tag.src = \'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list_=145376870403\';   //在创建src属性的时候，就会发送请求
            document.head.appendChild(tag);    //加载完script之后，再删除
            document.head.removeChild(tag);
        }

        function list(arg) {
            console.log(arg);
        }
    </script>

 

 

使用jquery+jsonp请求数据如下，效果和上面的代码相同:

        function list(arg) {
            console.log(arg);
        }

        function getContent() {
            $.ajax({
                url : \'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list_=145376870403\',
                type : \'POST\',     //所有的jsonp都是get请求，即使是post请求，也会转换为get请求;
                dataType: \'jsonp\',
                jsonp: \'callback\',
                jsonpCallback:\'list\'
            })
        }

 

获取数据如下:

 

 

第三种:

cors:跨域资源共享,就是在server端设置响应头来实现的;

 

参考博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html