6.21 作业疑问

一、利用jQery实现跨域请求

　　疑问点：

　　1.什么是跨域请求

　　答：不同域名之间的相互访问

　　2.xhr = XmlHttpRequest()? 的作用代表什么；

　　答：Ajax 是用XmlHttpRequest来完成请求的。

　　3.Ajax请求操作；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://www.coob.com:8000/statics/jquery.cookie.js"></script>
    <script src="{{static_url('jquery-3.2.1.min.js')}}"></script>
</head>
<body>
    <div>Welcome home of coob</div>
    <input type="button" value="Ajax" onclick="DoAjax()">
    <script>
        function DoAjax() {
            $.ajax({
//              提交到那个网页
                url:"/index",
//              提交的方式
                type:"POST",
//              传入的内容
                data:{"k1":"v1"},
//              #表示执行成功执行这个函数  arg 表示后台write的内容
                success:function (arg) {
                    console.log(arg)
                }
            })
        }
    </script>
</body>



</html>

jQuery Ajax 的基本演示

　　4.hosts是干什么的；

　　答：路径（windows/system32/drivers/etc/hosts ）；可以修改IP地址的域名 www.coob.com 等等（一个ip地址可以有多个域名）；

　　5.callback 是什么；

　　答：jsonpCallBack："func" 用于接收后台发的数据

　　6.CORS 是什么；

　　答：cors 是ajax的跨域请求，不是利用<script>的方式，而是有两种方式：简单的和复杂的。

　　习题：

　　1.通过ti访问t2静态文件中的jQery.cookie；

　　setting 设置中值一定要是对应静态文件的名称（ tmd 这个坑坑的我好惨）"static_url_prefix":"/statics/"

　　2.访问江西卫视，并把拿到的数据显示的页面上；

　　3.ajax jsonp 请求与接受数据

       $.ajax({
//           跨域地址
           url:"http://www.mary.com:8001/index",  
//           相当于创建一个script标签  并scr的值是 url  获取值后删除
           dataType:"jsonp",
//           相当于是创建了一个名为func的函数 等待接受
           jsonpCallBack:"func()"

Ajax_jsonp

        function DoAjax() {
//            var tager = document.createElement("script");
//            tager.src = "http://www.mary.com:8001/index";
//            document.head.appendChild(tager);
//            document.head.removeChild(tager)

原始方法

　　3.CORS简单的实现方法；

　　简单的请求方式有 post 、get 及 ajax 的参数 type值为 post、get。

请求方式下添加一条 即可实现ajax的跨域请求

self.set_header("Access-Control-Allow-Origin","http://www.coob.com:8000")   #指定域名可以访问

post 简单的跨域请求

　　4.CORS复杂请求的实

需要把请求头放在options 中才可以成功  这就叫做复杂请求



    def options(self, *args, **kwargs):
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Methods", "PUT")

    def put(self, *args, **kwargs):
        self.set_header("Access-Control-Allow-Origin", "*")
        self.write("PUT 成功")

cors的 put复杂方式请求

def option(self, *args, **kwargs)

　　self.set_header("Access-Control-Allow-Origin", "*")

　　self.set_header("Access-Control-Allow-Methods", "PUT") # 对应客服端 type:"put"

　　self.set_header("Access-Control-Allow-Headers", "k1") #对应的客户端 headers：{"k1":"k2"}