Day22 JSONP、瀑布流

一、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)

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会有问题)

巴特西

Day22 JSONP、瀑布流

最新文章

热门文章