JSONP详解

最新推荐文章于 2023-07-02 22:24:55 发布

Mcdull93

最新推荐文章于 2023-07-02 22:24:55 发布

阅读量1.2k

点赞数

分类专栏： AJAX 文章标签： ajax jsonp

本文链接：https://blog.csdn.net/maidou931019/article/details/74779643

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

同源策略
- 限制：Ajax
  - 向别的网站发Ajax请求，在拿回数据的时候，已经在拿回来的时候，发送给浏览器，浏览器阻止了，请求已经发送给服务器并执行了
- 不限制：有src属性的，如script 标签
但是在开发过程中有这样的需求：向其他网站发送Http请求。
- 浏览器直接发送请求【考虑同源】
- 浏览器-> 服务端 -> 发送请求
浏览器直接发送请求【考虑同源】

# jsonp.html

<body>

<input type="button" value="获取用户列表" onclick="getUsers();" />
<ul id="user_lsit"></ul>

<script>
// Ajax 请求有限制，同源策略
    /*
    function getUsers() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                var content = xhr.responseText;
                console.log(content)
            }
        };
        xhr.open('GET','http://www.s4.com:8001/users/?callback=bbb');
        xhr.send();
    }
    function bbb(arg) {
        console.log(arg)

    }
    */


// jsonp
    function getUsers() {
        var tag = document.createElement('script');
        tag.src = 'http://www.s4.com:8001/users/?callback=bbb';
        document.head.appendChild(tag);

    }
    function bbb(arg) {
        console.log(arg)

    }

</script>

</body>

# 请求目标网站
# veiws.py

def users(request):
    funcname = request.GET.get('callback')
    print('请求来了')
    user_list = [
        'summer','spring','autumn'
    ]
    user_list_str = json.dumps(user_list)
    temp = '%s(%s)' % (funcname,user_list_str)

    print(temp)
    return HttpResponse(temp)

jsonp要求：
- 1.客户端
  - tag.src = ‘http://www.s4.com:8001/users/?callback=bbb‘;
  - function bbb(arg) { console.log(arg) }
- 2.服务端
  - 获取 funcname = request.GET.get(‘callback’)
  - 返回 funcname(数据)

用jQuery Ajax 来发送请求

<body>

<input type="button" value="获取用户列表" onclick="getUsers();" />
<ul id="user_lsit"></ul>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function getUsers() {
        $.ajax({
            url: 'http://www.s4.com:8001/users/',
            type: 'GET',
            // 改用jsonp去发，改下面几个参数，原用XMLHttpRequest。
            dataType: 'JSONP',
            jsonp: 'callback',
            jsonpCallback: 'bbb'

        })

    }
    function bbb(arg) {
        console.log(arg)

    }


</script>

</body>

使用

使用：
    1. 自己写动态创建script
        function getUsers(){
            var tag = document.createElement('script');
            tag.src = "http://www.s4.com:8001/users/?callback=bbb";
            document.head.appendChild(tag);
         }
    2. jQuery
        $.ajax({
            url: 'http://www.s4.com:8001/users/',
            type: 'GET',
            dataType: 'JSONP',
            jsonp: 'funcname',
            jsonpCallback: 'bbb'
        })

    其他：
    - 只能发GET请求
    - 约定，客户端服务端制定好规则

    JSONP是一种技术，一种方式，目的解决跨域问题

Mcdull93

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP详解

同源策略限制：Ajax 向别的网站发Ajax请求，在拿回数据的时候，已经在拿回来的时候，发送给浏览器，浏览器阻止了，请求已经发送给服务器并执行了不限制：有src属性的，如script 标签但是在开发过程中有这样的需求：向其他网站发送Http请求。浏览器直接发送请求【考虑同源】浏览器-> 服务端 -> 发送请求浏览器直接发送请求【考虑同源】# jsonp.html<body><input
复制链接

扫一扫