首页 > 代码库 > Day22 JSONP、瀑布流

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)
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://www.mamicode.com/http://wang.com:8001/api></script>
        ==>最终全部都会转换成GET请求
    扩展:
        跨域Ajax ->
            POST通过jsonp转换成GET
            CORS--跨站资源共享(支持新版本浏览器,IE6、7、8会有问题)

 

Day22 JSONP、瀑布流