526互联

4.python web框架tornado之ajax请求和文件上传、跨域ajax请求

发布时间 2023-04-10 23:04:22作者: 少壮不努力123
一、ajax
1.iframe伪造ajax
app.py文件代码如下: 
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")


    def post(self):
        self.write("crsf.post页面")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler)
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
    <p>请输入要加载的地址:<span id="currentTime"></span></p>
    <p>
        <input type="text" id="url">
        <input type="button" value="刷新" onclick="loadPage()">
    </p>
  </div>
  <div>
      <h3>加载页面位置：</h3>
      <iframe id="iframe" frameborder="0" style="height:500px;width:500px; border: 1px solid red"></iframe>
  </div>
  <script>
      window.onload=function (){
          var mydate=new Date()
          document.getElementById("currentTime").innerText=mydate.getTime();
      }
      function loadPage(){
          var url=document.getElementById("url").value;
          document.getElementById("iframe").src=url;
      }
  </script>
</body>
</html>
View Code

运行app.py文件后，在浏览器中输入127.0.0.1:8092/index后请求返回indexHandler类中get方法中的index.html页面，页面加载完成后输出当前时间，输入地址后刷新，ifame标签会加载输入的url页面

 

 

2.原生ajax
app.py文件代码：
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.html")


    def post(self):
        self.write("ajax请求页面")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler)
],**settings)
q

if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

index.html文件代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XhrGetRequest();" value="Get发送请求" />
<input type="button" onclick="XhrPostRequest();" value="Post发送请求" />


<script src="{{static_url('jquery.js')}}"></script>
<script type="text/javascript">


    function GetXHR(){
        var xhr = null;
        if(XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;


    }


    function XhrPostRequest(){
        var xhr = GetXHR();
        // 定义回调函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                // 已经接收到全部响应数据，执行以下操作
                var data = xhr.responseText;
                console.log(data);
            }
        };
        // 指定连接方式和地址----文件方式
        xhr.open('POST', "/index", true);
        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        // 发送请求
        xhr.send('n1=1;n2=2;');
    }


    function XhrGetRequest(){
        var xhr = GetXHR();
        // 定义回调函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                // 已经接收到全部响应数据，执行以下操作
                var data = xhr.responseText;
                console.log(data);
            }
        };
        // 指定连接方式和地址----文件方式
        xhr.open('get', "/index", true);
        // 发送请求
        xhr.send();
    }


</script>


</body>
</html>
View Code

3.jquery发送ajax请求

jQuery.get(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。
                dataType: 返回内容格式，xml, json,  script, text, html




            jQuery.post(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数
                 success: 载入成功时回调函数
                dataType: 返回内容格式，xml, json,  script, text, html




            jQuery.getJSON(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。




            jQuery.getScript(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。




            jQuery.ajax(...)


                部分参数：


                        url：请求地址
                       type：请求方式，GET、POST（1.9.0之后用method）
                    headers：请求头
                       data：要发送的数据
                contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                      async：是否异步
                    timeout：设置请求超时时间（毫秒）


                 beforeSend：发送请求前执行的函数(全局)
                   complete：完成之后执行的回调函数(全局)
                    success：成功之后执行的回调函数(全局)
                      error：失败之后执行的回调函数(全局)
                


                    accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
                   dataType：将服务器端返回的数据转换成指定类型
                                   "xml": 将服务器端返回的内容转换成xml格式
                                  "text": 将服务器端返回的内容转换成普通文本格式
                                  "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
                                "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数


                                  如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string


                 converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
                         $.ajax({
                              accepts: {
                                mycustomtype: 'application/x-some-custom-type'
                              },
                              
                              // Expect a `mycustomtype` back from server
                              dataType: 'mycustomtype'


                              // Instructions for how to deserialize a `mycustomtype`
                              converters: {
                                'text mycustomtype': function(result) {
                                  // Do Stuff
                                  return newresult;
                                }
                              },
                            });
jQuery Ajax 方法列表
View Code

app.py文件代码：

import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")


    def post(self):
        print(self.get_argument("v1",None))
        self.write("ajax请求页面")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler)
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

index.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XhrGetRequest();" value="Get发送请求" />
<input type="button" onclick="XhrPostRequest();" value="Post发送请求" />
<input type="button" onclick="JqSendRequest();" value="jquery发送请求" />
<input type="button" onclick="JqSendPostRequest();" value="jquery发送post请求" />


<script src="{{static_url('jquery.js')}}"></script>
<script type="text/javascript">


    function GetXHR(){
        var xhr = null;
        if(XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;


    }


    function XhrPostRequest(){
        var xhr = GetXHR();
        // 定义回调函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                // 已经接收到全部响应数据，执行以下操作
                var data = xhr.responseText;
                console.log(data);
            }
        };
        // 指定连接方式和地址----文件方式
        xhr.open('POST', "/index", true);
        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        // 发送请求
        xhr.send('n1=1;n2=2;');
    }


    function XhrGetRequest(){
        var xhr = GetXHR();
        // 定义回调函数
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                // 已经接收到全部响应数据，执行以下操作
                var data = xhr.responseText;
                console.log(data);
            }
        };
        // 指定连接方式和地址----文件方式
        xhr.open('get', "/index", true);
        // 发送请求
        xhr.send();
    }




    //jquery ajax发送get请求
    function JqSendRequest(){
        $.ajax({
            url: "/index",
            type: 'GET',
            data:{"v1":"jqueryAjax请求"},
            //dataType类型有json、xml、script，jsonp会自动进行转换
            // dataType: 'text',
            success: function(data, statusText, xmlHttpRequest){
                console.log(data);
            },
            //发送失败请求的函数
            error: function (){
                alert("请求出错");
            }
        })
    }
    function JqSendPostRequest(){
        $.ajax({
            url: "/index",
            type: 'POST',
            data:{"v1":"jqueryAjax的post请求"},
            //dataType类型有json、xml、script，jsonp会自动进行转换
            // dataType: 'text',
            success: function(data, statusText, xmlHttpRequest){
                console.log(data);
            },
            //发送失败请求的函数
            error: function (){
                alert("请求出错");
            }
        })
    }


</script>


</body>
</html>
View Code
 
在浏览器中输入127.0.0.1:8092/index后点击jquery发送请求按钮后会进行ajax发get请求，点击jquery发送post请求按钮会进行ajax发送post请求
 
二、文件上传
1.文件上传之form
app.py文件代码：
import tornado.web
import tornado.ioloop
import os


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")


    def post(self):
        print(self.get_argument("v1",None))
        self.write("ajax请求页面")


img_list=[]
class fileUpload(tornado.web.RequestHandler):
    def get(self):
        self.render("upLoadFile.html",userInfo="",img=img_list)

    def post(self):
        user=self.get_argument("user")
        # 多选框时通过get_arguments获取参数值
        favor=self.get_arguments("favor")
        # 只能获取文件名称
        # print(self.get_argument("fafa"))

        # file_meta表示获取文件的基本信息
        file_mates=self.request.files["fafa"]

        for file in file_mates:
            # 获取要上传文件名称
            file_name=file["filename"]
            with open(os.path.join("static","img",file_name),"wb") as up:
                up.write(file["body"])
            img_list.append(file_name)
        self.redirect("/uploadFile")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/uploadFile",fileUpload),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

uploadFile文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="/uploadFile" method="post" enctype="multipart/form-data">
        <input type="text" name="user">
        <h3>爱好：</h3>
        <input type="checkbox" name="favor" value="1">篮球
        <input type="checkbox" name="favor" value="2">足球
        <input type="checkbox" name="favor" value="3">排球
        <p>
            <!--     文件上传时，form标签中的enctype是multipart/form-data       -->
            <input type="file" name="fafa">
        </p>
        <p>
        <input type="submit" value="提交">
        </p>
    </form>
    {{userInfo}}
    <ul>
        <!--   循环     -->
        {% for item in img%}
            <li><img src="static/img/{{item}}" alt=""></li>
        {%end%}
    </ul>
</body>
</html>
View Code

在浏览器中输入127.0.0.1:8092/uploadFile后上传文件到static/img文件夹下，并显示出来

2.文件上传之ajax
app.py文件代码如下：
import tornado.web
import tornado.ioloop
import os


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")


    def post(self):
        print(self.get_argument("v1",None))
        self.write("ajax请求页面")
img_list=[]
class fileUpload(tornado.web.RequestHandler):
    def get(self):
        self.render("upLoadFile.html",userInfo="",img=img_list)


    def post(self):
        user=self.get_argument("user")
        # 多选框时通过get_arguments获取参数值
        favor=self.get_arguments("favor")
        # 只能获取文件名称
        # print(self.get_argument("fafa"))


        # file_meta表示获取文件的基本信息
        file_mates=self.request.files["fafa"]


        for file in file_mates:
            # 获取要上传文件名称
            file_name=file["filename"]
            with open(os.path.join("static","img",file_name),"wb") as up:
                up.write(file["body"])
            img_list.append(file_name)
        self.redirect("/uploadFile")


class fileUploadAjax(tornado.web.RequestHandler):
    def get(self):
        self.render("upLoadFileBak.html",userInfo="",img=img_list)


    def post(self):
        user=self.get_argument("user")
        # 多选框时通过get_arguments获取参数值
        favor=self.get_arguments("favor")
        # 只能获取文件名称
        # print(self.get_argument("fafa"))


        # file_meta表示获取文件的基本信息
        file_mates=self.request.files["fafa"]


        for file in file_mates:
            # 获取要上传文件名称
            file_name=file["filename"]
            with open(os.path.join("static","img",file_name),"wb") as up:
                up.write(file["body"])
            img_list.append(file_name)
        self.redirect("/uploadFileAjax")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/uploadFile",fileUpload),
    (r"/uploadFileAjax",fileUploadAjax),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

uploadFileBak.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        <!--     文件上传时，form标签中的enctype是multipart/form-data       -->
        <input type="file" name="fafa" id="img">
        <input type="button" onclick="uploadFile()" value="上传">
    </p>
    <script>
        function uploadFile(){
            //获取文件对象
            var fileObj=document.getElementById("img").files[0];
            //创建Form对象
            var form=new FormData();
            form.append("user","v1");
            form.append("favor","1");
            form.append("fafa",fileObj);


            var xhr=new XMLHttpRequest();
            xhr.open("post","/uploadFileAjax",true);
            xhr.send(form);


        }
    </script>
</body>
</html>
View Code

浏览器中输入127.0.0.1:8092/uploadFileAjax后选择文件上传到static/img文件夹下

3.jquery进行ajax上传文件
uploadFileBak.html文件代码如下： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        <!--     文件上传时，form标签中的enctype是multipart/form-data       -->
        <input type="file" name="fafa" id="img">
        <input type="button" onclick="uploadFile()" value="上传">
    </p>
    <script src="{{static_url('jquery.js')}}"></script>
    <script>
        function uploadFile(){
            var fileObj = $("#img")[0].files[0];
            var form = new FormData();
            form.append("user", "v1");
            form.append("favor", "3");
            form.append("fafa", fileObj);


            $.ajax({
                type:'POST',
                url: '/uploadFileAjax',
                data: form,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                success: function(arg){
                    console.log(arg);
                }
            })
        }
    </script>
</body>
</html>
View Code
4.文件上传之iframe
app.py文件代码如下： 
import tornado.web
import tornado.ioloop
import os


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")


    def post(self):
        print(self.get_argument("v1",None))
        self.write("ajax请求页面")
img_list=[]
class fileUpload(tornado.web.RequestHandler):
    def get(self):
        self.render("upLoadFile.html",userInfo="",img=img_list)


    def post(self):
        user=self.get_argument("user")
        # 多选框时通过get_arguments获取参数值
        favor=self.get_arguments("favor")
        # 只能获取文件名称
        # print(self.get_argument("fafa"))


        # file_meta表示获取文件的基本信息
        file_mates=self.request.files["fafa"]


        for file in file_mates:
            # 获取要上传文件名称
            file_name=file["filename"]
            with open(os.path.join("static","img",file_name),"wb") as up:
                up.write(file["body"])
            img_list.append(file_name)
        self.redirect("/uploadFile")


class fileUploadAjax(tornado.web.RequestHandler):
    def get(self):
        self.render("upLoadFileBak.html",userInfo="",img=img_list)


    def post(self):
        user=self.get_argument("user")
        # 多选框时通过get_arguments获取参数值
        favor=self.get_arguments("favor")
        # 只能获取文件名称
        # print(self.get_argument("fafa"))


        # file_meta表示获取文件的基本信息
        file_mates=self.request.files["fafa"]


        for file in file_mates:
            # 获取要上传文件名称
            file_name=file["filename"]
            with open(os.path.join("static","img",file_name),"wb") as up:
                up.write(file["body"])
            img_list.append(file_name)
        self.redirect("/uploadFileAjax")


class fileUploadIFrame(tornado.web.RequestHandler):
    def get(self):
        self.render("fileUploadIFrame.html",userInfo="",img=img_list)


    def post(self):


        # 只能获取文件名称
        # print(self.get_argument("fafa"))


        # file_meta表示获取文件的基本信息
        file_mates=self.request.files["fafa"]


        for file in file_mates:
            # 获取要上传文件名称
            file_name=file["filename"]
            with open(os.path.join("static","img",file_name),"wb") as up:
                up.write(file["body"])
            img_list.append(file_name)
        self.redirect("/uploadFileIFrame")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/uploadFile",fileUpload),
    (r"/uploadFileAjax",fileUploadAjax),
    (r"/uploadFileIFrame",fileUploadIFrame),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

fileUploadIFrame.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<form id="my_form" name="form" action="/uploadFileIFrame" method="POST"  enctype="multipart/form-data" >
    <div id="main">
        <input name="fafa" id="my_file"  type="file" />
        <input type="button" name="action" value="Upload" onclick="redirect()"/>
        <iframe id='my_iframe' name='my_iframe' src=""  class="hide"></iframe>
    </div>
</form>
<script src="{{static_url('jquery.js')}}"></script>
<script>
    function redirect(){
        document.getElementById('my_iframe').onload = Testt;
        document.getElementById('my_form').target = 'my_iframe';
        document.getElementById('my_form').submit();
    }


    function Testt(ths){
        var t = $("#my_iframe").contents().find("body").text();
        console.log(t);
    }
</script>
</body>
</html>
View Code
在浏览器中输入http://127.0.0.1:8092/uploadFileIFrame 后选择文件进行上传会自动上传到指定目录中

 

 

 

三、跨域ajax请求
 
之前我们发送请求都是当前域名下发送的，如果我们当前域名下发送其他域名下请求会不通过，那是因为浏览器，浏览器有一个特殊的机制同源策略限制造成的，只允许给本域发送请求
对于ajax请求，如果跨域名请求，默认浏览器不允许；而实际跨域请求已经发送过去了且正常处理返回数据了，而这时浏览器报错了，浏览器认为发送的不是本域的请求，所以报错了
 
1.创建day0403项目下创建app.py文件
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("0403index.get")


    def post(self):
        self.write("0403index.post")




settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code
 创建day0403_t1项目下创建app.py文件 
import tornado.web
import tornado.ioloop
import os


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")


    def post(self):
        self.write("T1ajaxPost请求页面")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
],**settings)


if __name__=="__main__":
    app.listen(8093)
    tornado.ioloop.IOLoop.instance().start()
View Code

index.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="doAjax();" value="跨域ajax请求演示" />
<script src="{{static_url('jquery.js')}}"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"/index",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }

</script>
</body>
</html>
View Code

分别运行day0403项目下的app.py文件和day0403_t1项目下的app.py文件后，在浏览器中输入zongchen:8092/index和zongyiyi:8093/index这时是能够正常访问的

修改index.html文件中的ajax请求的url地址
index.html文件代码如下： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="doAjax();" value="跨域ajax请求演示" />
<script src="{{static_url('jquery.js')}}"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/index",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }




</script>


</body>
</html>
View Code

2.由于浏览器的同源策略，不允许ajax进行跨域，但允许script、img、iframe进行跨域
突破限制有两个方法：
     方法1：jsonp，特别机智的方式 
function doJSONPAjax(){
    //通过script标签伪造跨域请求
    var tag=document.createElement("script");
    tag.src="http://zongyiyi:8092/index";
    document.head.appendChild(tag);
    document.head.removeChild(tag)
}
相当于在客户端定义了<script>function func(arg){console.log(arg)}</script>,服务端返回func([11,22,33])
        客户端：
                function func(arg){}
                <script src="http://zongchen:8092/index"></script>
        服务端：
                {"status":1,"msg":"ok"}
                返回用户func({"status":1,"msg":"ok"})
项目day0403中app.py文件代码如下： 
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        self.write("func([11,22,33])")


    def post(self):
        self.write("0403index.post")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

项目day0403中index.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="doAjax();" value="跨域ajax请求演示" />
<input type="button" onclick="doJSONPAjax();" value="跨域请求JSONP" />
<script src="{{static_url('jquery.js')}}"></script>
<script>
    function func(arg){
        console.log(arg)
    }
</script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/index",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }


    function doJSONPAjax(){
        //通过script标签伪造跨域请求
        var tag=document.createElement("script");
        tag.src="http://zongyiyi:8092/index";
        document.head.appendChild(tag);
        document.head.removeChild(tag)
    }


</script>


</body>
</html>
View Code
在浏览器中输入http://zongyiyi:8093/index 后点击跨域请求 JSONP会进行发送跨域请求

 而jquery发送ajax跨域JSONP请求相当于替我们做了创建script标签的事情，文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="doAjax();" value="跨域ajax请求演示" />
<input type="button" onclick="doJSONPAjax();" value="跨域请求JSONP" />
<script src="{{static_url('jquery.js')}}"></script>
<script>
    function func(arg){
        console.log(arg)
    }
</script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/index",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }


    function doJSONPAjax(){
        //通过script标签伪造跨域请求
        // var tag=document.createElement("script");
        // tag.src="http://zongyiyi:8092/index";
        // document.head.appendChild(tag);
        // document.head.removeChild(tag);
        $.ajax({
            url:"http://zongyiyi:8092/index",
            //dataType等于JSONP相当于替我们做了创建script标签的事情
            dataType:"JSONP",
            //callback表示执行成功执行func函数
            callback:func,
        })
    }
</script>
</body>
</html>
View Code
 在浏览器中输入http://zongyiyi:8093/index 后点击跨域请求 JSONP会进行发送跨域请求

 

 

上述代码中服务端返回的数据应该根据客户端定义的方法名而来，所以需要优化一下代码
day0403项目中app.py文件代码如下：
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("0403index.post")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

day0403_t1项目中index.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="doAjax();" value="跨域ajax请求演示" />
<input type="button" onclick="doJSONPAjax();" value="跨域请求JSONP" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/index",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
    function funcc(arg){
        console.log(arg)
    }
    function doJSONPAjax(){
        //通过script标签伪造跨域请求
        // var tag=document.createElement("script");
        // tag.src="http://zongyiyi:8092/index";
        // document.head.appendChild(tag);
        // document.head.removeChild(tag);
        $.ajax({
            url:"http://zongyiyi:8092/index",
            //dataType等于JSONP相当于替我们做了创建script标签的事情
            dataType:"JSONP",
            jsonp:"callback",
            //callback表示执行成功执行func函数
            jsonpCallback:"funcc",
        })
    }
    
</script>
</body>
</html>
View Code
在浏览器中输入http://zongyiyi:8093/index 后点击跨域请求 JSONP会进行发送跨域请求

 

 跨域ajax请求实现江西节目表，index文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="doAjax();" value="跨域ajax请求演示" />
<input type="button" onclick="doJSONPAjax();" value="跨域请求JSONP" />
<input type="button" onclick="doJX();" value="江西卫视节目表" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/index",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
    function funcc(arg){
        console.log(arg)
    }
    function doJSONPAjax(){
        //通过script标签伪造跨域请求
        // var tag=document.createElement("script");
        // tag.src="http://zongyiyi:8092/index";
        // document.head.appendChild(tag);
        // document.head.removeChild(tag);
        $.ajax({
            url:"http://zongyiyi:8092/index",
            //dataType等于JSONP相当于替我们做了创建script标签的事情
            dataType:"JSONP",
            jsonp:"callback",
            //callback表示执行成功执行func函数
            jsonpCallback:"funcc",
        })
    }
    function list(arg) {
        console.log(arg);
    }
    function doJX(){
        //通过script标签伪造跨域请求
        // var tag=document.createElement("script");
        // tag.src="http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list";
        // document.head.appendChild(tag);
        // document.head.removeChild(tag);
        $.ajax({
            url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list",
            //dataType等于JSONP相当于替我们做了创建script标签的事情
            dataType:"JSONP",
            jsonp:"callback",
            //callback表示执行成功执行func函数
            jsonpCallback:"list",
        })
    }
</script>
</body>
</html>
View Code

 在浏览器中输入http://zongyiyi:8093/index 后点击江西节目表会进行发送跨域请求   

 

 

方法2： CORS跨域资源共享，在服务器端返回一个标示告诉浏览器允许跨域请求，在服务端响应请求头中返回标示；本质是客户端不变，服务端设置响应头即可
        条件：
        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三个中任意一个
      简单请求：同时满足上面两个条件为简单请求
      非简单请求：不同时满足上面两个条件则为非简单请求，非简单请求会先进行预检
 
简单请求的cors跨域资源共享：
  在day0403项目下的app.py文件代码如下:
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("index Post请求")


class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write({"status":"1","errmsg":"get"})
        
    def post(self):
        # 设置响应请求头，如果允许多个地址话，url后面通过逗号分隔添加地址；如果允许所有的号，url后面参数为*
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write({"status":"1","errmsg":"post"})
settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code
  在day0403_t1项目下的app.py文件代码如下：
import tornado.web
import tornado.ioloop
import os


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")


    def post(self):
        self.write("T1ajaxPost请求页面")
class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("cors.html")


    def post(self):
        self.write("T1ajaxPost请求页面")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8093)
    tornado.ioloop.IOLoop.instance().start()
View Code
 在day0403_t1项目下的cors.html文件代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>ajax跨域请求</h1>
<input type="button" onclick="doAjax();" value="cors跨域请求" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }

</script>
</body>
</html>
View Code

复杂请求cors跨域资源共享，会先进行预检，预检就是会先发送options请求

在day0403_t1项目中的cors.html文件下创建复杂的ajax请求，文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>ajax跨域请求</h1>
<input type="button" onclick="doAjax();" value="cors跨域请求" />
<input type="button" onclick="fuza();" value="cors跨域复杂请求" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
    function fuza(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"PUT",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
</script>
</body>
</html>
View Code

在day0403项目下app.py文件代码如下：

import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("index Post请求")


class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write({"status":"1","errmsg":"get"})


    def post(self):
        # 设置响应请求头，如果允许多个地址话，url后面通过逗号分隔添加地址；如果允许所有的号，url后面参数为*
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write({"status":"1","errmsg":"post"})


    def put(self):
        #Access-Control-Allow-Origin允许跨域请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write("put方法")
    def options(self):
        # 预检允许请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        #预检允许请求的方法
        self.set_header("Access-Control-Allow-Methods","PUT")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code
分别运行day0403文件夹下的app.py文件和day0403_t1文件夹下的app.py文件，在浏览器中输入http://zongchen:8093/cors后点击cors跨域复杂请求后会请求http://zongyiyi:8092/cors地址下的put方法，这时浏览器会同时进行预检和请求put方法，即调用options方法，在options方法中设置了请求头允许http://zongchen:8093进行跨域请求，运行PUT方法进行跨域请求；预检通过后会调用put方法
当客户端自定义了请求头，同时服务端也需要设置请求头
day0403_t1项目下的cors.html文件代码如下： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>ajax跨域请求</h1>
<input type="button" onclick="doAjax();" value="cors跨域请求" />
<input type="button" onclick="fuza();" value="cors跨域复杂请求" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
    function fuza(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"PUT",
            headers:{"h1":"hhh1"},
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
</script>
</body>
</html>
View Code

day0403项目下app.py文件代码如下：

import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("index Post请求")


class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write({"status":"1","errmsg":"get"})


    def post(self):
        # 设置响应请求头，如果允许多个地址话，url后面通过逗号分隔添加地址；如果允许所有的号，url后面参数为*
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write({"status":"1","errmsg":"post"})


    def put(self):
        #Access-Control-Allow-Origin允许跨域请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write("put方法")
    def options(self):
        # 预检允许请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        #预检允许请求的方法
        self.set_header("Access-Control-Allow-Methods","PUT")
        #预检时允许客户端自定义请求头
        self.set_header("Access-Control-Allow-Headers","h1")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code
 
分别运行day0403文件夹下的app.py文件和day0403_t1文件夹下的app.py文件，在浏览器中输入http://zongchen:8093/cors后点击cors跨域复杂请求后会请求http://zongyiyi:8092/cors地址下的put方法，这时浏览器会同时进行预检和请求put方法，即调用options方法，在options方法中设置了请求头允许http://zongchen:8093进行跨域请求，运行PUT方法进行跨域请求；预检通过后会调用put方法

 

 

第一次预检通过后，后面再次请求时不需要在进行预检
day0403文件下app.py文件代码如下: 
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("index Post请求")


class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write({"status":"1","errmsg":"get"})


    def post(self):
        # 设置响应请求头，如果允许多个地址话，url后面通过逗号分隔添加地址；如果允许所有的号，url后面参数为*
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write({"status":"1","errmsg":"post"})


    def put(self):
        #Access-Control-Allow-Origin允许跨域请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write("put方法")
    def options(self):
        # 预检允许请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        #预检允许请求的方法
        self.set_header("Access-Control-Allow-Methods","PUT")
        #预检时允许客户端自定义请求头
        self.set_header("Access-Control-Allow-Headers","h1")
        #第一次预检通过后，后面60秒再次调用不需要预检
        self.set_header('Access-Control-Max-Age', 60)


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code
分别运行day0403文件夹下的app.py文件和day0403_t1文件夹下的app.py文件，在浏览器中输入http://zongchen:8093/cors后点击cors跨域复杂请求后会请求http://zongyiyi:8092/cors地址下的put方法，这时浏览器会同时进行预检和请求put方法，即调用options方法，在options方法中设置了请求头允许http://zongchen:8093进行跨域请求，运行PUT方法进行跨域请求；预检通过后会调用put方法;第一次预检通过后，后面再有效期内多次请求，都不需要预检了
服务端自定义设置了影响请求头，客户端默认是接收不到， 默认获取到的所有响应头只有基本信息，如果想要获取自定义的响应头，则需要再服务器端设置Access-Control-Expose-Headers。
day0403项目app.py文件代码如下： 
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("index Post请求")


class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write({"status":"1","errmsg":"get"})


    def post(self):
        # 设置响应请求头，如果允许多个地址话，url后面通过逗号分隔添加地址；如果允许所有的号，url后面参数为*
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write({"status":"1","errmsg":"post"})


    def put(self):
        #Access-Control-Allow-Origin允许跨域请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.set_header("n1","nnn")
        self.set_header("m1","mmm")
        # Access-Control-Expose-Headers设置自定义响应头
        self.set_header('Access-Control-Expose-Headers', "n1,m1")
        self.write("put方法")
    def options(self):
        # 预检允许请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        #预检允许请求的方法
        self.set_header("Access-Control-Allow-Methods","PUT")
        #预检时允许客户端自定义请求头
        self.set_header("Access-Control-Allow-Headers","h1")
        #第一次预检通过后，后面60秒再次调用不需要预检
        self.set_header('Access-Control-Max-Age', 60)


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

day0403_t1项目下cors.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>ajax跨域请求</h1>
<input type="button" onclick="doAjax();" value="cors跨域请求" />
<input type="button" onclick="fuza();" value="cors跨域复杂请求" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
    function fuza(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"PUT",
            headers:{"h1":"hhh1"},
            data:{"k1":"v1"},
            success:function (data, statusText, xmlHttpRequest){
                // console.log(arg)
                console.log(data);
                // 获取响应头
                console.log(xmlHttpRequest.getAllResponseHeaders());
            }
        })
    }
</script>
</body>
</html>
View Code

程序运行后，在浏览器中进行发送put请求后结果如下：

跨域传输cookie
在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。
如果想要发送：
  • 浏览器端：XMLHttpRequest的withCredentials为true
  • 服务器端：Access-Control-Allow-Credentials为true
  • 注意：服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *
但是浏览器为了避免CSRF攻击，以前从源头上面避免跨域传入cookie，所以下述例子中可以设置cookie，虽然设置了withCredenzatials为true，但浏览器屏蔽掉了cookie，所以还是无法跨域传输cookie
day0403中app.py文件代码如下： 
import tornado.web
import tornado.ioloop


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        callback=self.get_argument("callback")
        self.write("%s([11,22,33]);"%callback)


    def post(self):
        self.write("index Post请求")


class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.write({"status":"1","errmsg":"get"})


    def post(self):
        # 设置响应请求头，如果允许多个地址话，url后面通过逗号分隔添加地址；如果允许所有的号，url后面参数为*
        # self.set_header('Access-Control-Allow-Origin', "*")
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.write({"status":"1","errmsg":"post"})


    def put(self):
        #Access-Control-Allow-Origin允许跨域请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        self.set_header("n1","nnn")
        self.set_header("m1","mmm")
        # Access-Control-Expose-Headers设置自定义响应头
        self.set_header('Access-Control-Expose-Headers', "n1,m1")
        #设置请求时传输cookie
        # self.set_secure_cookie("k1","vvvv")
        self.set_header("Access-Control-Allow-Credentials", "true")
        print(self.cookies,"============",self.get_cookie("test"))
        if self.get_cookie("test")=="TestCookie":
            self.write("cookie在有效期，返回put方法")
        else:
            self.write("cookie失效")
    def options(self):
        # 预检允许请求的地址
        self.set_header("Access-Control-Allow-Origin","http://zongchen:8093")
        #预检允许请求的方法
        self.set_header("Access-Control-Allow-Methods","PUT")
        #预检时允许客户端自定义请求头
        self.set_header("Access-Control-Allow-Headers","h1")
        #第一次预检通过后，后面60秒再次调用不需要预检
        self.set_header('Access-Control-Max-Age', 60)
        #设置预检时传输cookie
        self.set_header("Access-Control-Allow-Credentials", "true")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8092)
    tornado.ioloop.IOLoop.instance().start()
View Code

day0403_t1中app.py文件代码如下: 　　

import tornado.web
import tornado.ioloop
import os


class idenxHandler(tornado.web.RequestHandler):
    def get(self):
        print(self.get_argument("v1",None))
        self.render("index.html")

    def post(self):
        self.write("T1ajaxPost请求页面")

class corsHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_cookie("test","TestCookie",expires=30)
        self.render("cors.html")


    def post(self):
        self.write("T1ajaxPost请求页面")


settings={
    "template_path":"views",
    "static_path":"static",
    # xsrf设置为True时走Csrf验证
    # "xsrf_cookies":True
}


app=tornado.web.Application([
    (r"/index",idenxHandler),
    (r"/cors",corsHandler),
],**settings)


if __name__=="__main__":
    app.listen(8093)
    tornado.ioloop.IOLoop.instance().start()
View Code

day0403_t1中cors.html文件代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<h1>ajax跨域请求</h1>
<input type="button" onclick="doAjax();" value="cors跨域请求" />
<input type="button" onclick="fuza();" value="cors跨域复杂请求" />
<script src="static/jquery.js"></script>
<script type="text/javascript">
    function doAjax(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"POST",
            data:{"k1":"v1"},
            success:function (arg){
                console.log(arg)
            }
        })
    }
    function fuza(){
        $.ajax({
            url:"http://zongyiyi:8092/cors",
            type:"PUT",
            headers:{"h1":"hhh1"},
            crossDomain:true,
            //设置请求时传输cookie
            xhrFields:{withCredentials: true},


            data:{"k1":"v1"},
            success:function (data, statusText, xmlHttpRequest){
                // console.log(arg)
                console.log(data);
                // 获取响应头
                console.log(xmlHttpRequest.getAllResponseHeaders());
            }
        })
    }
</script>
</body>
</html>
View Code