Day22 JSONP瀑布流

Posted 2020-08-21

一、JSONP

JSONP
    a.Ajax
    $.ajax({
        url:‘/index/‘,
        dataType:‘json‘,
        data:{},
        type:‘GET‘,
        success:function(a){
        }
    })
    b.浏览器同源策略
    通过Ajax，如果在当前域名去访问其他域名时，浏览器会出现同源策略，从而阻止请求的返回
    c.img、script、link、iframe--同源策略不生效
    具有src属性的标签，一般同源策略不生效
    d.JSONP
        利用标签不生效同源策略，发送跨域ajax请求，<script>

    function Ajax3(){
        #创建script标签
        var tag = document.createElement(‘script‘);
        tag.src = ‘http://wang.com:8001/api‘;
        document.head.appendChild(tag);
        document.head.removeChild(tag);

    }
    #设置同名回调函数

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


    views.py
        from django.shortcuts import render,HttpResponse
        import json

        # Create your views here.
        def index(request):
            li = [‘alex‘, ‘eric‘, ‘tom‘]
            #字符串形式
            #temp = "fafafa(‘%s‘)" %(‘alex‘)
            #return HttpResponse(‘temp‘)
            #列表、字典形式
            temp = "fafafa(%s)" %(json.dumps(li))
            return HttpResponse(temp)

View Code

 jsonp总结：

总结：
    1、本域名ajax：
        原生Ajax
        jQuery Ajax
    2、跨域名Ajax
        机制方式伪Ajax请求，JSONP
            a.创建script标签
            b.jQuery
                $.ajax({
                    url: http://wang.com:8001/api,
                type: ‘GET‘,
                dataType: ‘jsonp‘,
                jsonp: ‘callback‘,
                jsonpCallback: ‘list‘,
                })
            function list(arg){
                console.log(arg);
            }
        ===>
        a、本地
            jQuery
        b、跨域
            dataType: ‘jsonp‘,
            jsonp: ‘callback‘,
            jsonpCallback: ‘list‘,

            function list(arg){
                console.log(arg);
            }
    3、jsonp 和 jsonpCallback
        符合jsonp规范
        -jsonp：callback    # request.GET.get("callback")
        -jsonpCallback: ‘list‘    # list(...)
    4、是否可以发POST请求？
        不能发POST
        script标签-->打开url-->GET请求-->无视POST
        <script src=‘http://wang.com:8001/api‘></script>
        ==>最终全部都会转换成GET请求
    扩展：
        跨域Ajax ->
            POST通过jsonp转换成GET
            CORS--跨站资源共享(支持新版本浏览器，IE6、7、8会有问题)