一、ajax

1、传统的Web应用

一个简单操作需要重新加载全局数据

2、AJAX

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术

  • 异步的JavaScript: 使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。 PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。
  • XML XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一

利用AJAX可以做: 1、注册时,输入用户名自动检测用户是否已经存在。 2、登陆时,提示用户名密码错误 3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

“伪”AJAX

由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div>
  9. <p>请输入要加载的地址:<span id="currentTime"></span></p>
  10. <p>
  11. <input id="url" type="text" />
  12. <input type="button" value="刷新" onclick="LoadPage();">
  13. </p>
  14. </div>
  15. <div>
  16. <h3>加载页面位置:</h3>
  17. <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
  18. </div>
  19. <script type="text/javascript">
  20. window.onload= function(){
  21. var myDate = new Date();
  22. document.getElementById('currentTime').innerText = myDate.getTime();
  23. };
  24. function LoadPage(){
  25. var targetUrl = document.getElementById('url').value;
  26. document.getElementById("iframePosition").src = targetUrl;
  27. }
  28. </script>
  29. </body>
  30. </html>

原生AJAX

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)

1、XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法:

  1. a. void open(String method,String url,Boolen async)
  2. 用于创建请求
  3. 参数:
  4. method 请求方式(字符串类型),如:POSTGETDELETE...
  5. url 要请求的地址(字符串类型)
  6. async 是否异步(布尔类型)
  7.  
  8. b. void send(String body)
  9. 用于发送请求
  10. 参数:
  11. body 要发送的数据(字符串类型)
  12.  
  13. c. void setRequestHeader(String header,String value)
  14. 用于设置请求头
  15. 参数:
  16. header 请求头的key(字符串类型)
  17. vlaue 请求头的value(字符串类型)
  18.  
  19. d. String getAllResponseHeaders()
  20. 获取所有响应头
  21. 返回值:
  22. 响应头数据(字符串类型)
  23.  
  24. e. String getResponseHeader(String header)
  25. 获取响应头中指定header的值
  26. 参数:
  27. header 响应头的key(字符串类型)
  28. 返回值:
  29. 响应头中指定的header对应的值
  30.  
  31. f. void abort()
  32. 终止请求

XmlHttpRequest对象的主要属性:

  1. a. Number readyState
  2. 状态值(整数)
  3. 详细:
  4. 0-未初始化,尚未调用open()方法;
  5. 1-启动,调用了open()方法,未调用send()方法;
  6. 2-发送,已经调用了send()方法,未接收到响应;
  7. 3-接收,已经接收到部分响应数据;
  8. 4-完成,已经接收到全部响应数据;
  9.  
  10. b. Function onreadystatechange
  11. readyState的值改变时自动触发执行其对应的函数(回调函数)
  12.  
  13. c. String responseText
  14. 服务器返回的数据(字符串类型)
  15.  
  16. d. XmlDocument responseXML
  17. 服务器返回的数据(Xml对象)
  18.  
  19. e. Number states
  20. 状态码(整数),如:200404...
  21.  
  22. f. String statesText
  23.  
  24. 状态文本(字符串),如:OKNotFound...

2、跨浏览器支持

  XmlHttpRequest IE7+, Firefox, Chrome, Opera, etc.

  • ActiveXObject("Microsoft.XMLHTTP") IE6, IE5
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <h1>XMLHttpRequest - Ajax请求</h1>
  9. <input type="button" onclick="XhrGetRequest();" value="Get发送请求" />
  10. <input type="button" onclick="XhrPostRequest();" value="Post发送请求" />
  11.  
  12. <script type="text/javascript">
  13.  
  14. function GetXHR(){ //看浏览器中是XMLHttpRequest还是ActiveXObject
  15. var xhr = null;
  16. if(XMLHttpRequest){
  17. xhr = new XMLHttpRequest();
  18. }else{
  19. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  20. }
  21. return xhr; //返回一个对象
  22.  
  23. }
  24.  
  25. function XhrPostRequest(){
  26. var xhr = GetXHR();
  27. // 定义回调函数
  28. xhr.onreadystatechange = function(){
  29. if(xhr.readyState == 4){
  30. // 已经接收到全部响应数据,执行以下操作
  31. var data = xhr.responseText;
  32. console.log(data);
  33. }
  34. };
  35. // 指定连接方式和地址----文件方式
  36. xhr.open('POST', "/login", true); //True是设置是否异步
  37. // post请求必须设置请求头
  38. xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
  39. // 发送请求
  40. xhr.send('n1=1;n2=2;');
  41. }
  42.  
  43. function XhrGetRequest(){
  44. var xhr = GetXHR();
  45. // 定义回调函数
  46. xhr.onreadystatechange = function(){
  47. if(xhr.readyState == 4){
  48. // 已经接收到全部响应数据,执行以下操作
  49. var data = xhr.responseText;
  50. console.log(data);
  51. }
  52. };
  53. // 指定连接方式和地址----文件方式
  54. xhr.open('get', "/login", true);
  55. // 发送请求
  56. xhr.send();
  57. }
  58. </script>
  59. </body>
  60. </html>

原生AJAX

jQuery Ajax

jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。

  • jQuery 不是生产者,而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

注:2.+版本不再支持IE9以下的浏览器

  1. jQuery.get(...)
  2. 所有参数:
  3. url: 待载入页面的URL地址
  4. data: 待发送 Key/value 参数。
  5. success: 载入成功时回调函数。
  6. dataType: 返回内容格式,xml, json, script, text, html
  7.  
  8. jQuery.post(...)
  9. 所有参数:
  10. url: 待载入页面的URL地址
  11. data: 待发送 Key/value 参数
  12. success: 载入成功时回调函数
  13. dataType: 返回内容格式,xml, json, script, text, html
  14.  
  15. jQuery.getJSON(...)
  16. 所有参数:
  17. url: 待载入页面的URL地址
  18. data: 待发送 Key/value 参数。
  19. success: 载入成功时回调函数。
  20.  
  21. jQuery.getScript(...)
  22. 所有参数:
  23. url: 待载入页面的URL地址
  24. data: 待发送 Key/value 参数。
  25. success: 载入成功时回调函数。
  26.  
  27. jQuery.ajax(...)
  28. 部分参数:
  29. url:请求地址
  30. type:请求方式,GETPOST1.9.0之后用method
  31. headers:请求头
  32. data:要发送的数据
  33. contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
  34. async:是否异步
  35. timeout:设置请求超时时间(毫秒)
  36.  
  37. beforeSend:发送请求前执行的函数(全局)
  38. complete:完成之后执行的回调函数(全局)
  39. success:成功之后执行的回调函数(全局)
  40. error:失败之后执行的回调函数(全局)
  41.  
  42. accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
  43. dataType:将服务器端返回的数据转换成指定类型
  44. "xml": 将服务器端返回的内容转换成xml格式
  45. "text": 将服务器端返回的内容转换成普通文本格式
  46. "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
  47. "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
  48. "json": 将服务器端返回的内容转换成相应的JavaScript对象
  49. "jsonp": JSONP 格式
  50. 使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
  51.  
  52. 如果不指定,jQuery 将自动根据HTTPMIME信息返回相应类型(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
  53.  
  54. converters 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
  55. $.ajax({
  56. accepts: {
  57. mycustomtype: 'application/x-some-custom-type'
  58. },
  59.  
  60. // Expect a `mycustomtype` back from server
  61. dataType: 'mycustomtype'
  62.  
  63. // Instructions for how to deserialize a `mycustomtype`
  64. converters: {
  65. 'text mycustomtype': function(result) {
  66. // Do Stuff
  67. return newresult;
  68. }
  69. },
  70. });

jQuery Ajax 方法列表

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <p>
  9. <input type="button" onclick="JqSendRequest();" value='Ajax请求' />
  10. </p>
  11. <script type="text/javascript" src="/c/static/jquery-1.9.1.min.js"></script>
  12. <script>
  13. function JqSendRequest(){
  14. $.ajax({
  15. url: "http://c2.com:8000/test/",
  16. type: 'GET',
  17. data:{"k1":"v1"}, //向服务端发送内容,服务端可以通过self.get_argument("k1")获取
  18. dataType: 'text',
  19. success: function(data, statusText, xmlHttpRequest){
  20. console.log(data,statusText);
  21. }
  22. })
  23. }
  24. </script>
  25. </body>
  26. </html>

基于jQueryAjax

二、上传文件

1、Form表单上传

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5. <title>上传文件</title>
  6. </head>
  7. <body>
  8. <form id="my_form" name="form" action="/index" method="POST" enctype="multipart/form-data" >
  9. <input name="fff" id="my_file" type="file" />
  10. <input type="submit" value="提交" />
  11. </form>
  12. </body>
  13. </html>

login.html

  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import tornado.ioloop
  4. import tornado.web
  5.  
  6. class LoginHandler(tornado.web.RequestHandler):
  7. def get(self):
  8. self.render("login.html")
  9.  
  10. def post(self, *args, **kwargs):
  11. file_metas = self.request.files["fff"] #获取文件的信息
  12. print(file_metas)
  13. for meta in file_metas:
  14. file_name = meta['filename']
  15. with open(file_name, 'wb') as up:
  16. up.write(meta['body'])
  17. settings = {
  18. 'template_path': 'tpl',
  19. 'static_path': 'st',
  20.  
  21. }
  22.  
  23. application = tornado.web.Application([
  24. (r"/login", LoginHandler),
  25. ], **settings)
  26.  
  27. if __name__ == "__main__":
  28. application.listen(8888)
  29. tornado.ioloop.IOLoop.instance().start()

start.py

2、AJAX上传

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <input type="file" id="img" />
  9. <input type="button" onclick="UploadFile();" />
  10. <script>
  11. function UploadFile(){
  12. //获取文件对象
  13. var fileObj = document.getElementById("img").files[0];
  14. //创建form对象
  15. var form = new FormData();
  16. form.append("k1", "v1"); //为后台发送数据
  17. form.append("fff", fileObj);
  18. var xhr = new XMLHttpRequest();
  19. xhr.open("post", '/login', true);
  20. xhr.send(form); //发送form表单
  21. }
  22. </script>
  23. </body>
  24. </html>

HTML - XMLHttpRequest

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="{{static_url('jquery-1.9.1.min.js')}}"></script>
  7. </head>
  8. <body>
  9. <h1>1223</h1>
  10. <input type="file" id="img" />
  11. <input type="button" onclick="UploadFile();" />
  12. <script>
  13. function UploadFile(){
  14. var fileObj = $("#img")[0].files[0];
  15. var form = new FormData();
  16. form.append("k1", "v1");
  17. form.append("fff", fileObj);
  18. $.ajax({
  19. type:'POST',
  20. url: '/login',
  21. data: form,
  22. processData: false, // tell jQuery not to process the data
  23. contentType: false, // tell jQuery not to set contentType
  24. success: function(arg){
  25. console.log(arg);
  26. }
  27. })
  28. }
  29. </script>
  30. </body>
  31. </html>

HTML - jQuery

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="{{static_url('jquery-1.9.1.min.js')}}"></script>
  7. </head>
  8. <body>
  9. <form id="my_form" name="form" action="/login" method="POST" enctype="multipart/form-data" >
  10. <div id="main">
  11. <input name="fff" id="my_file" type="file" />
  12. <input type="button" name="action" value="Upload" onclick="redirect()"/>
  13. <iframe id='my_iframe' name='my_iframe' src="" class="hide"></iframe>
  14. </div>
  15. </form>
  16.  
  17. <script>
  18. function redirect(){
  19. document.getElementById('my_iframe').onload = Testt;
  20. document.getElementById('my_form').target = 'my_iframe';
  21. document.getElementById('my_form').submit();
  22. }
  23. function Testt(ths){
  24. var t = $("#my_iframe").contents().find("body").text();
  25. console.log(t);
  26. console.log("1212111")
  27. }
  28. </script>
  29. </body>
  30. </html>

HTML - iframe

  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import tornado.ioloop
  4. import tornado.web
  5.  
  6. class LoginHandler(tornado.web.RequestHandler):
  7. def get(self):
  8. self.render("login.html")
  9.  
  10. def post(self, *args, **kwargs):
  11.  
  12. file_metas = self.request.files["fff"] #获取文件的信息
  13. print(file_metas)
  14. for meta in file_metas:
  15. file_name = meta['filename']
  16. with open(file_name, 'wb') as up:
  17. up.write(meta['body'])
  18. settings = {
  19. 'template_path': 'tpl',
  20. 'static_path': 'static',
  21. }
  22.  
  23. application = tornado.web.Application([
  24. (r"/login", LoginHandler),
  25. ], **settings)
  26.  
  27. if __name__ == "__main__":
  28. application.listen(8899)
  29. tornado.ioloop.IOLoop.instance().start()

start.py

三、CSRF

CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding

如果在配置中加入"xsrf_cookies": True,  post请求就会开启验证,如果为验证通过,post请求不会通过,如果想通过验证,就在html的body部分加入

{% raw xsrf_form_html() %}--------------->第一次get请求的时候,会随机生成一个具有验证功能的字符串,当我们通过post方式进行请求的时候,就会通过验证

  1. settings = {
  2. "xsrf_cookies": True,
  3. }
  4. application = tornado.web.Application([
  5. (r"/", MainHandler),
  6. (r"/login", LoginHandler),
  7. ], **settings)
  1. <form action="/new_message" method="post">
  2. {% raw xsrf_form_html() %}
  3. <input type="text" name="message"/>
  4. <input type="submit" value="Post"/>
  5. </form>
  1. function getCookie(name) {
  2. var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
  3. return r ? r[1] : undefined;
  4. }
  5.  
  6. jQuery.postJSON = function(url, args, callback) {
  7. args._xsrf = getCookie("_xsrf");
  8. $.ajax({url: url, data: $.param(args), dataType: "text", type: "POST",
  9. success: function(response) {
  10. callback(eval("(" + response + ")"));
  11. }});
  12. };

使用 - AJAX

四、跨域AJAX

1.什么引起了ajax跨域不能的问题
ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。

特别的:由于同源策略是浏览器的限制,所以请求的发送和响应是可以进行,只不过浏览器不接受罢了。

浏览器同源策略并不是对所有的请求均制约:

  • 制约: XmlHttpRequest
  • 不叼: img、iframe、script等具有src属性的标签

跨域,跨域名访问,如:http://www.c1.com 域名向 http://www.c2.com域名发送请求。

1、JSONP实现跨域请求(利用script块的特性)

JSONP(JSONP - JSON with Padding是JSON的一种“使用模式”),利用script标签的src属性(浏览器允许script标签跨域)

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8.  
  9. <p>
  10. <input type="button" onclick="Jsonp1();" value='提交'/>
  11. </p>
  12.  
  13. <p>
  14. <input type="button" onclick="Jsonp2();" value='提交'/>
  15. </p>
  16.  
  17. <script type="text/javascript" src="jquery-1.12.4.js"></script>
  18. <script>
  19. function Jsonp1(){
  20. var tag = document.createElement('script');
  21. tag.src = "http://c2.com:8000/test/";
  22. document.head.appendChild(tag);
  23. document.head.removeChild(tag);
  24.  
  25. }
  26.  
  27. function Jsonp2(){
  28. $.ajax({
  29. url: "http://c2.com:8000/test/",
  30. type: 'GET',
  31. dataType: 'JSONP',
  32. success: function(data, statusText, xmlHttpRequest){
  33. console.log(data);
  34. }
  35. })
  36. }
  37.  
  38. </script>
  39. </body>
  40. </html>

基于JSONP实现跨域Ajax

JSONP就是ajax利用投机取巧的方式,自己不能进行跨域请求从而利用创建一些能进行跨域请求的标签来(一般都是script标签)进行跨域请求操作,如果想获取被请求端发来的数据,那么需要请求一端写一个函数,函数内部用于获取内容,而被请求一端需要将要发送的数据也放到同一个函数名中的函数中进行发送

2、CORS(客户端不变,服务端设置响应头)

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

* 简单请求 OR 非简单请求

  1. 条件:
  2. 1、请求方式:HEADGETPOST
  3. 2、请求头信息:
  4. Accept
  5. Accept-Language
  6. Content-Language
  7. Last-Event-ID
  8. Content-Type 对应的值是以下三个中的任意一个
  9. application/x-www-form-urlencoded
  10. multipart/form-data
  11. text/plain
  12.  
  13. 注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

* 简单请求和非简单请求的区别?

  1. 简单请求:一次请求
  2. 非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

* 关于“预检”

  1. - 请求方式:OPTIONS
  2. - “预检”其实做检查,检查如果通过则允许传输数据,检查不通过则不再发送真正想要发送的消息
  3. - 如何“预检”
  4. => 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过
  5. Access-Control-Request-Method
  6.  
  7. => 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过
  8. Access-Control-Request-Headers

a、支持跨域,简单请求(在服务端加响应头,带相应头就能过来)

服务器设置响应头:Access-Control-Allow-Origin = '域名' 或 '*'      *表示所有的域名都可以访问

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8.  
  9. <p>
  10. <input type="submit" onclick="XmlSendRequest();" />
  11. </p>
  12.  
  13. <p>
  14. <input type="submit" onclick="JqSendRequest();" />
  15. </p>
  16.  
  17. <script type="text/javascript" src="jquery-1.12.4.js"></script>
  18. <script>
  19. function XmlSendRequest(){
  20. var xhr = new XMLHttpRequest();
  21. xhr.onreadystatechange = function(){
  22. if(xhr.readyState == 4) {
  23. var result = xhr.responseText;
  24. console.log(result);
  25. }
  26. };
  27. xhr.open('GET', "http://c2.com:8000/test/", true);
  28. xhr.send();
  29. }
  30.  
  31. function JqSendRequest(){
  32. $.ajax({
  33. url: "http://c2.com:8000/test/",
  34. type: 'GET',
  35. dataType: 'text',
  36. success: function(data, statusText, xmlHttpRequest){
  37. console.log(data);
  38. }
  39. })
  40. }
  41. </script>
  42. </body>
  43. </html>

html

  1. class MainHandler(tornado.web.RequestHandler):
  2. def get(self):
  3. self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
  4. self.write('{"status": true, "data": "seven"}')

python

b、支持跨域,复杂请求

由于复杂请求时,首先会发送“预检”请求,如果“预检”成功,则发送真实数据。

  • “预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
  • “预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
  • “预检”缓存时间,服务器设置响应头:Access-Control-Max-Age
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8.  
  9. <p>
  10. <input type="submit" onclick="XmlSendRequest();" />
  11. </p>
  12.  
  13. <p>
  14. <input type="submit" onclick="JqSendRequest();" />
  15. </p>
  16.  
  17. <script type="text/javascript" src="jquery-1.12.4.js"></script>
  18. <script>
  19. function XmlSendRequest(){
  20. var xhr = new XMLHttpRequest();
  21. xhr.onreadystatechange = function(){
  22. if(xhr.readyState == 4) {
  23. var result = xhr.responseText;
  24. console.log(result);
  25. }
  26. };
  27. xhr.open('PUT', "http://c2.com:8000/test/", true);
  28. xhr.setRequestHeader('k1', 'v1');
  29. xhr.send();
  30. }
  31.  
  32. function JqSendRequest(){
  33. $.ajax({
  34. url: "http://c2.com:8000/test/",
  35. type: 'PUT',
  36. dataType: 'text',
  37. headers: {'k1': 'v1'},
  38. success: function(data, statusText, xmlHttpRequest){
  39. console.log(data);
  40. }
  41. })
  42. }
  43. </script>
  44. </body>
  45. </html>

html

  1. class MainHandler(tornado.web.RequestHandler):
  2.  
  3. def put(self):
  4. self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
  5. self.write('{"status": true, "data": "seven"}')
  6.  
  7. def options(self, *args, **kwargs):
  8. self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
  9. self.set_header('Access-Control-Allow-Headers', "k1,k2")
  10. self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
  11. self.set_header('Access-Control-Max-Age', 10)

python

tornado框架之路三之ajax的更多相关文章

  1. tornado框架之路二

    二.路由系统 路由系统其实就是 url 和 类 的对应关系,这里不同于其他框架,其他很多框架均是 url 对应 函数,Tornado中每个url对应的是一个类. #!/usr/bin/env pyth ...

  2. tornado框架之路一

    Web 服务器 每个页面都以 HTML 的形式传送到你的浏览器中,HTML 是一种浏览器用来描述页面内容和结构的语言.那些负责发送 HTML 到浏览器的应用称之为“Web 服务器”,会让你迷惑的是,这 ...

  3. 第二百七十二节,Tornado框架-iframe标签框架伪造ajax

    Tornado框架-iframe标签框架伪造ajax html <!DOCTYPE html> <html> <head lang="en"> ...

  4. 第二百五十九节,Tornado框架-模板语言的三种方式

    Tornado框架-模板语言的三种方式 模板语言就是可以在html页面,接收逻辑处理的self.render()方法传输的变量,将数据渲染到对应的地方 一.接收值渲染 {{...}}接收self.re ...

  5. tornado框架&三层架构&MVC&MTV&模板语言&cookie&session

    web框架的本质其实就是socket服务端再加上业务逻辑处理, 比如像是Tornado这样的框架. 有一些框架则只包含业务逻辑处理, 例如Django, bottle, flask这些框架, 它们的使 ...

  6. python运维开发(二十二)---JSONP、瀑布流、组合搜索、多级评论、tornado框架简介

    内容目录: JSONP应用 瀑布流布局 组合搜索 多级评论 tornado框架简介 JSONP应用 由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. ...

  7. 第二百七十三节,Tornado框架-文件上传

    Tornado框架-文件上传 第一.普通表单上传文件 self.request.files["fafafa"] 获取上传文件信息,参数["上传文件框的name名称&quo ...

  8. python运维开发(二十三)---tornado框架

    内容目录: 路由系统 模板引擎 cookie 加密cookie 自定义api 自定义session 自定义form表单验证 异步非阻塞 web聊天室实例 路由系统 路由系统其实就是 url 和 类 的 ...

  9. tp框架表单验证 及ajax

    之前的表单验证都是用js写的,这里也可以使用tp框架的验证.但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度和效率就会下降. 自动验证是ThinkPHP模型层提供的一种 ...

随机推荐

  1. CRT:C运行库简介

    1)运行时库就是 C run-time library,是 C 而非 C++ 语言世界的概念:取这个名字就是因为你的 C 程序运行时需要这些库中的函数.   2)C 语言是所谓的"小内核&q ...

  2. Java利用MessageDigest提供的MD5算法加密字符串或文件

    MD5是常用的加密算法,也经常用于校验信息完整,如文件的完整性.用术语讲,MD5是一种消息摘要算法(Message Digest Algorithm).另外还有一种常用的消息摘要算法SHA1.如果想了 ...

  3. C# WinForm开发系列 - ListBox/ListView/Panel

    转自会飞的小猪文章 C# WinForm开发系列 - ListBox/ListView/Panel 在博客园看到了一篇博文,觉得很不错,就转载过来了.    包含自定义绘制的ListBox, 带拖动, ...

  4. linux命令(8)kill命令

    kill命令: Linux中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以使用Ctrl+C键,但是,对于 ...

  5. ci模板布局方式

    1.修改Loader链式加载header和footer方式 参考:http://stackoverflow.com/questions/9540576/header-and-footer-in-cod ...

  6. linux挂载U盘(转载)

    一.Linux挂载U盘:1.插入u盘到计算机,如果目前只插入了一个u盘而且你的硬盘不是scsi的硬盘接口的话,那它的硬件名称为:sda1.2.在mnt目录下先建立一个usb的目录(如:[root@lo ...

  7. android之Spinner控件用法

    用法1: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too ...

  8. Java拾穗

    1.Class.forName("com.wzh.test.loadClass"); Class.forName("com.mysql.jdbc.Driver" ...

  9. OperationResult

    public class OperationResult<T> { private readonly ConcurrentDictionary<string, T> _valu ...

  10. 谈Objective-C Block的实现

    来源:http://blog.devtang.com/blog/2013/07/28/a-look-inside-blocks/ 前言 这里有关于block的5道测试题,建议你阅读本文之前先做一下测试 ...