AJAX跨域

JSONP：JSONP本质生成script标签，向src地址发送GET请求

　一：远程VIEWS

def data(request):
    return HttpResponse('FUNC_JSON1("你好")')

　　本地HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="JSON 1" id="JSON1" onclick="JSON1()">


<script src="/static/js/jquery-3.2.1.js"></script>

<script>
    function FUNC_JSON1(arg) {
        console.log(arg);
        document.head.removeChild($script)
    }
    function JSON1() {

            $script=document.createElement('script');
            $script.src='http://127.0.0.1:8000/data.html';
            document.head.appendChild($script);

    }

</script>
</body>
</html>

　　二：远程VIEWS

def data(request):
    return HttpResponse('FUNC_JSON1("你好")')

　　　　本地HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="JSON 2" id="JSON2" onclick="JSON2()">


<script src="/static/js/jquery-3.2.1.js"></script>

<script>
    function FUNC_JSON1(arg) {
        console.log(arg);
        document.head.removeChild($script)
    }
    function JSON2() {
        $.ajax({
            url:'http://127.0.0.1:8000/data.html',
            type:'GET',
            dataType:'JSONP',
            success:function (data) {
                console.log(data)
            }
        })
    }

</script>
</body>
</html>

　　三：远程VIEWS

def data(request):
    func_name=request.GET.get('callback')
    return HttpResponse('%s("你好")'%func_name)

　　　　本地HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="JSON 3" id="JSON3" onclick="JSON3()">


<script src="/static/js/jquery-3.2.1.js"></script>

<script>
    function list(arg) {
        console.log(arg)
    }
    function JSON3() {
        $.ajax({
            url:'http://127.0.0.1:8000/data.html',
            type:'GET',
            dataType:'JSONP',
            jsonp:'callback',
            jsonpCallback:'list'

        })
    }
</script>
</body>
</html>

CORS：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求

简单请求：

　　1.请求方式：HEAD、GET、POST

　　2.请求头信息：

　　　　　　　　Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
        application/x-www-form-urlencoded 
　　　　　　　　multipart/form-data
　　　　　　　　text/plain

 

同时满足以上两个条件时是简单请求否则为复杂请求

简单请求和非简单请求的区别：简单请求发送一次请求；非简单请求发送两次请求，再发送数据之前先发送一次请求作为“预检”，“预检”通过后发送包含数据的第二次请求

　　一：设置允许域名

　　　　远程VIEWS

def data(request):
    response=HttpResponse('你好')
    response['Access-Control-Allow-Origin']='http://127.0.0.1:8001/'
    return response

　　　　本地HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="/static/js/jquery-3.2.1.js"></script>
<script>

        $.ajax({
            url:'http://127.0.0.1:8000/data.html',
            type:'GET',
            success:function (data) {
                console.log(data)
            }
        });

</script>
</body>
</html>

　　二：设置允许复杂请求

　　　　远程VIEWS

def data(request):
    if request.method=='OPTIONS':
        response=HttpResponse()
        response['Access-Control-Allow-Origin'] = "*"
        response['Access-Control-Allow-Methods']='PUT'
        return response
    elif request.method=='PUT':
        response=HttpResponse('你好')
        response['Access-Control-Allow-Origin'] = "*"
        return response

　　　　本地HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="/static/js/jquery-3.2.1.js"></script>
<script>

        $.ajax({
            url:'http://127.0.0.1:8000/data.html',
            type:'PUT',
            success:function (data) {
                console.log(data)
            }
        });

</script>
</body>
</html>

Requests

　　本地VIEWS

def get_data(request):
    obj=requests.get('http://127.0.0.1:8000/data.html')
    print(obj)
    print(obj.text)
    return HttpResponse('nihao ')

 

               

 

posted @ 2017-10-17 17:29  吃柚子的小白  阅读(224)  评论(0)  编辑  收藏  举报