同源策略 - JSONP

1. Jquery 对象可以通过 .index() 进行取出自当前元素在父级元素中存放的索引；

2. 浏览器的同源策略 -- Ajax 在访问非本网站的时候，在数据返回的时候，会被浏览器拦截

　　　- 后端使用 requests 获取数据后，发送给前端

　　　- jsonp 在前端页面中，带有 src 属性的标签不受同源策略的影响(img, script, iframe等），我们可以通过使用 script 标签来获取内容，但 script 中 src 获取内容后，获得到的字符串（类似于调用python中的 eval 或 exec）会被 JS 执行，所以我们可以定义一个函数，然后让服务端返回的内容外面包裹一层这个函数名，前端在访问的时候把这个函数名发送过去，并提前定义好该函数

手动实现：

服务端返回的数据

def server(request):

    return HttpResponse("aaa('important data!!!')")

客户端定义及获取数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Client</title>

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

    <script>

        $(function(){

        });

        var url = 'http://127.0.0.1:8000/server.html/';  // 服务端路径

        var $script;                                     // 模拟使用创建的标签名

        function aaa(data){                              // 数据返回后用来接收的函数

            alert(data);

            document.head.removeChild($script);          // 接收完数据后，从页面删除刚才使用的标签

        }

        function getInfo(){

            $script = document.createElement("script");  // 创建一个 script 标签

            $script.setAttribute("src", url);            // 将需要请求数据的地址放入 script 的 src 中

            document.head.appendChild($script);          // 将标签放入到 head 中

        }

    </script>

</head>

<body>

    <h1>Client</h1>

    <input type="button" onclick="getInfo()" value="getInfo">

</body>

</html>

通过JSONP自动完成 - 上面是它的原理

　服务端返回的数据

from django.shortcuts import render

from django.http import HttpResponse, JsonResponse

def server(request):

    # 根据后端发送过来的名字来决定返回时，数据外面套的内容

    funcName = request.GET.get("callback")

    return HttpResponse("%s('important data!!!')"%funcName)

　　客户端定义及获取数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Client</title>

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

    <script>

        function bbb(data){

            alert(data);

        }

        $(function(){

            var url = 'http://127.0.0.1:8000/server.html/';  // 服务端路径

            $.ajax({

                url: url,                   // 跨站请求数据的路径

                type: 'GET',                // 发送方式为 get， 由于使用的是 script， 所以只支持 get

                dataType: 'JSONP',          // 使用 JSONP 方式

                jsonp: 'callback',          // get 发送的时候，后面跟的数据名为 callback

                jsonpCallback: 'bbb'        // get 发送数据的callback的值为 bbb

            })

        });

    </script>

</head>

<body>

    <h1>Client</h1>

    <input type="button" value="getInfo">

</body>

</html>

cors - 跨域资源共享 cross origin resource sharing

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

　　cors 分为简单请求和非简单请求，简单请求只发送一次，直接发送数据，非简单请求则会发送两次数据，第一次发送 opption 请求（预检），为的是查看真正的数据是否可以被接收（数据头和请求方式是否符合要求），如果符合要求，服务端可以把内容加入到头文件中来告诉浏览器；

简单请求与非简单请求

条件：

    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

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

关于预检

- 请求方式：OPTIONS

- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息

- 如何“预检”

     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过

        Access-Control-Request-Method

     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过

        Access-Control-Request-Headers

简单请求：在使用cors的时候，客户端几乎不用修改，只需要按照普通的ajax的请求方式发送，在服务端返回数据的时候，只要在返回的时候，加上一个响应头就可以解决这个问题了

def example(request):

    response = HttpResponse("返回的数据内容")

    response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8888"  # 允许访问获取信息的域名

    return response

　　服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'，允许访问获取信息的域名，如果后面是*的话，代表允许所有的请求，如果需要每一个相应都设置该响应头的话（即这个网站的所有资源都可以被其它域名的所访问，那么我们可以在中间件中设置这个响应头）；

对于复杂请求，会先发一次预检（OPTIONS）请求，如果服务端允许，那么再发送一次正式请求（如PUT等，总之就是正真的请求），这个时候，我们需要在后端进行判断，如果允许用户获取数据，那么当预检（OPTIONS）过来的时候，我们需要返回允许访问的请求：Access-Control-Allow-Methds

if request.method == "OPTIONS":

    response = HttpResponse() // 返回的内容可以为空，主要需要返回请求头

    response['Access-Control-Allow-Origin'] = '*'

    response['Access-Control-Allow-Methods'] = 'PUT'   # 允许的复杂请求方式为 PUT 请求;如果多个，用逗号分隔, "PUT, DELETE"

    response['Access-Control-Allow-Headers'] = "k1"  # 复杂请求还有一种情况就是定制请求头，这种情况下，我们在返回的相应中应该设置该响应头，代表允许发送请求头的key是什么，如果多个，逗号分隔 "k1, k2"

    return response

　　如果我们不想每次都经过“预检”这个环节的话，那么我们可以在服务器的响应头中增加一组：Access-Control-Max-Age的响应头，可以写成

response['Access-Control-Allow-Headers'] = 10  # 默认单位为秒

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Title</title>

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

     <script>

         $(function(){

             $("#btn01").click(function(){

                 $.ajax({

                     url: "http://127.0.0.1:8000/btn01/",

                     success: function(data){

                         console.log(data)

                     }

                 })

             });

             $("#btn02").click(function(){

                 $.ajax({

                     url: "http://127.0.0.1:8000/btn02/",

                     type: "PUT",

                     success: function(data){

                         console.log(data)

                     }

                 })

             });

             $("#btn03").click(function(){

                 $.ajax({

                     url: "http://127.0.0.1:8000/btn03/",

                     headers: {"k1": "asdfasdf"},

                     success: function(data){

                         console.log(data)

                     }

                 })

             })

         })

     </script>

 </head>

 <body>

 <p><input type="button" value="简单请求" id="btn01"></p>

 <p><input type="button" value="复杂请求-PUT" id="btn02"></p>

 <p><input type="button" value="复杂请求-Headers" id="btn03"></p>

 </body>

 </html>

简单和复杂请求的客户端代码

 from django.shortcuts import render

 from django.http import HttpResponse

 # Create your views here.

 def btn01(request):

     response = HttpResponse("btn01")

     response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8888"

     return response

 def btn02(request):

     if request.method == "OPTIONS":

         response = HttpResponse()

         response['Access-Control-Allow-Origin'] = '*'

         response['Access-Control-Allow-Methods'] = 'PUT'

         return response

     if request.method == "PUT":

         response = HttpResponse("btn02")

         response['Access-Control-Allow-Origin'] = '*'

         return response

 def btn03(request):

     if request.method == "OPTIONS":

         response = HttpResponse()

         response['Access-Control-Allow-Origin'] = '*'

         response['Access-Control-Allow-Headers'] = "k1"

         return response

     if request.method == "GET":

         response = HttpResponse("btn03")

         response['Access-Control-Allow-Origin'] = '*'

         return response

简单和复杂请求的服务端代码

携带cookie的传输

如果在使用Ajax请求的时候，需要传递cookie的时候，我们则需要在发送ajax的时候，以及服务器给我们相应的时候加上一组头信息

客户端需要加：XMLHttpRequest的withCredentials为true

$.ajax({

    url: "http://c2.com:8000/test/",

    type: 'PUT',

    dataType: 'text',

    headers: {'k1': 'v1'},

    xhrFields:{withCredentials: true},  // 加在了这里

    success: function(data, statusText, xmlHttpRequest){

        console.log(data);

    }

})

服务端需要加：Access-Control-Allow-Credentials为true

class MainHandler(tornado.web.RequestHandler):

    def put(self):

        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")

        self.set_header('Access-Control-Allow-Credentials', "true")   # 加在了这里

        self.set_header('xxoo', "seven")

        self.set_header('bili', "daobidao")

        self.set_header('Access-Control-Expose-Headers', "xxoo,bili")

        self.set_cookie('kkkkk', 'vvvvv');

        self.write('{"status": true, "data": "seven"}')

    def options(self, *args, **kwargs):

        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")

        self.set_header('Access-Control-Allow-Headers', "k1,k2")

        self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")

        self.set_header('Access-Control-Max-Age', 10)

http://www.cnblogs.com/wupeiqi/articles/5703697.html

3. 模拟点击事件

$("#a").trigger("chick"); // 模拟执行 id=a 的事件