cookie和session ,ajax知识

一、cookies

　　本质为在浏览器端保存的键值对，由服务端写在浏览器端，以后每次请求的时候，浏览器都携带着cookie来访问，cookies的使用之处非常多，比如用户验证，登陆界面，右侧菜单隐藏，控制页面列表显示条数等，已经后面的session都是基于cookie的。cookie从设置方面来说可以由tronado和前端js设置

tornado设置(普通字符串，tronado做了分割等处理)

　　self.cookies
　　self.get_cookie('k1')
　　self.set_cookie('k2', 'v2')
浏览器js设置
　　document.cookie
　　document.cookie.split(";") 获取所有的cookie列表
　　document.cookie = "k3=66" 设置
　　document.cookie = "k3=66;path='/"

下面来看一下用tornado设置的代码

 1 #!/usr/bin/env python
 2 # coding=utf-8
 3  
 4 import tornado.web
 5 import tornado.ioloop
 6  
 7  
 8 class IndexHandler(tornado.web.RequestHandler):
 9     def get(self, *args, **kwargs):
10         print(self.cookies)
11         print(self.get_cookie('k1'))
12         self.set_cookie('k2', '999')
13         self.render('index.html')
14  
15  
16 settings = {
17     'template_path': 'views',
18     'static_path': 'statics',
19 }
20  
21 application = tornado.web.Application([
22     (r'/index', IndexHandler),
23 ], **settings)
24  
25 if __name__ == '__main__':
26     application.listen(8888)
27     tornado.ioloop.IOLoop.instance().start()

View Code

下面看一下html代码里面是怎么通过js来设置的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<script>
    function setCookieBySeconds(name, value, expires) {
        var current_date = new Date();
        current_date.setDate(current_date.getSeconds()+expires);
        document.cookie = name + '= ' + value +';expires=' + current_date.toUTCString();
    }
 
     function setCookieByDays(name, value, expires) {
        var current_date = new Date();
        current_date.setDate(current_date.getDate()+expires);
        document.cookie = name + '= ' + value +';expires=' + current_date.toUTCString();
    }
 
    //此外还可以导入jquery.cookie.js后通过
    // $.cookie('k1','v1',{expires:7});设置过期时间为7天
</script>
</body>
</html>

View Code

上面说的是最基本的cookie，采用的是键值对，稍微高级一点做法对value进行加密，下如果进行加密的话，先来看一下加密流程　

加密cookie流程

　　服务端
　　　　v1=base64加密(v1)
　　　　v1| v1+时间戳+自定义密钥之后在经过类似md5加密变成下面的
　　　　v1| 加密字符串 | 时间戳保存到客户端

　　客户端来请求，服务端先base64解密拿到 v1然后根据客户端发来的时间戳+v1+自定义密钥再次生成加密字符串和客户端发来的加密字符串进行对比，看是否一致。

这里看一下tornado设置和获取加密的方法，set_secure_cookie，get_secure_cookie，此外记得在settings里面配置cookie_secret密钥就行，具体演示和上面的类似，就不具体的演示了。

二、session　　

　　cookie保存单一键值对，如果需要保存其他内容，则需要写多个cookie，而每次请求的话都会发送所有的cookie这样的话，会造成网络拥堵，此外，cookies是保存在浏览器端，如果保存用户名密码的cookie也放在浏览器端的话，也不够安全，这样就引出了session，session是人为生成的。session也是基于cookie来做的，但是只在浏览器端生成一个cookie(随机字符串，sessionId，token)，而在服务端也保存着这段cookie，此外服务端还根据这段cookie可以生成一个字典，字典里面就可以放置用户的其他信息，服务端将这段cookie（sessionId）写到浏览器端，以后浏览器端来访问的时候，服务端根据sessionId从其相应的字典里面获取相应的信息来做相应用户认证机制。session可以保存在全局变量里，放在数据库，文件里面，memcached radis但是不能放在局部变量里。下面看下自定义的session的代码实现

 1 import tornado.web
 2 import tornado.ioloop
 3 import hashlib
 4 import time
 5 CONTAINER = {
 6  
 7 }
 8  
 9 class Session:
10     def __init__(self, handler):
11         self.handler = handler
12         self.random_str = ''
13  
14     @staticmethod
15     def __generate_str():
16         obj = hashlib.md5()
17         obj.update(bytes(str(time.time()), encoding='utf-8'))
18         return obj.hexdigest()
19  
20     def __getitem__(self, item):
21         random_str = self.handler.get_cookie('__session__')
22         if not random_str:
23             return None
24         if random_str not in CONTAINER.keys():
25             return None
26         return CONTAINER[random_str].get(item, None)
27  
28     def __setitem__(self, key, value):
29         random_str = self.handler.get_cookie('__session__')
30         if not random_str:
31             random_str = Session.__generate_str()
32             # self.handler.set_cookie('__session__', random_str)
33             CONTAINER[random_str] = {}
34         else:
35             if random_str not in CONTAINER.keys():
36                 random_str = Session.__generate_str()
37                 CONTAINER[random_str] = {}
38         self.random_str = random_str
39         CONTAINER[self.random_str][key] = value
40         self.handler.set_cookie('__session__', self.random_str)  # 为什么放在这里，cookie可能失效？放在上面失效也一样
41  
42     def __delitem__(self, key):
43         random_str = self.handler.get_cookie('__session__')
44         if not random_str:
45             return None
46         if random_str not in CONTAINER.keys():
47             return None
48         del CONTAINER[random_str][key]

View Code

Tornado框架中，默认执行Handler的get/post等方法之前默认会执行 initialize方法，所以可以通过自定义一个basehandler类实现initialize的方法，使得所有在继承basehandler的类中，可以自行的完成一个初始化的工作。

三、Xss和csrf　　

Xss跨站脚本攻击

　　恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的特殊目的。

csrf跨站请求伪造
　　get请求的时候，会给浏览器发一个id（cookie），浏览器post请求的时候，携带这个id，然后服务端对其做验证，如果没有这个id的话，就禁止浏览器提交内容。下面来看一下在tornado里面怎么设置，首先需要在settings里面配置 'xsrf_cookies': True,如果这样配置的话，浏览器发送post请求的话这样设置之后，Tornado 将拒绝请求参数中不包含正确的_xsrf 值的 post/put/delete 请求，如果没有携带相应的id（session）则会禁止访问。{% raw xsrf_form_html() %}是新增的，目的就在于实现上面所说的授权给前端以合法请求。

　　这里主要看下html里面的代码，用js获取_xsrf对应的session，然后用jquery的ajax发送post请求，并且将_xsrf的session也发送过去。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/sss/jquery-1.12.4.js"></script>
 7     <!--<script src="{{ static_url('jquery-1.12.4.js') }}" ></script>-->
 8 </head>
 9 <body>
10     <!--{{ xsrf_form_html() }}-->
11     {% raw xsrf_form_html() %}
12  
13     <input type="button" value="ajax_csrf" onclick="SubmitCsrf();">
14  
15     <script>
16       
17         function getCookie(name) {
18             var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
19             return r ? r[1] : undefined;
20         }
21  
22         function SubmitCsrf() {
23             var nid = getCookie('_xsrf');
24             console.log(nid);
25             $.post({
26                 url: '/csrf',
27                 data:{'k1':'v1', "_xsrf":nid},
28                 success:function (callback) {
29                     console.log(callback);
30                 }
31             });
32         }
33     </script>
34 </body>
35 </html>

View Code

这样经过上面的处理之后，服务端就只需要写简单的handler类就可以了，这里就不再多叙述了。　

四、随机验证码图片　　

登陆注册的时候，需要验证码的功能，原理为在后台自动创建一张随机图片，然后通过img标签输出到前端。这里我们需要安装一个pillow的模块，相应的生成随机验证代码文件如下，此外还需要一个字体文件

  1 #!/usr/bin/env python
  2 # coding:utf-8
  3 
  4 import random
  5 from PIL import Image, ImageDraw, ImageFont, ImageFilter
  6 
  7 _letter_cases = "abcdefghjkmnpqrstuvwxy"  # 小写字母，去除可能干扰的i，l，o，z
  8 _upper_cases = _letter_cases.upper()  # 大写字母
  9 _numbers = ''.join(map(str, range(3, 10)))  # 数字
 10 init_chars = ''.join((_letter_cases, _upper_cases, _numbers))
 11 
 12 
 13 def create_validate_code(size=(120, 30),
 14                          chars=init_chars,
 15                          img_type="GIF",
 16                          mode="RGB",
 17                          bg_color=(255, 255, 255),
 18                          fg_color=(0, 0, 255),
 19                          font_size=18,
 20                          font_type="Monaco.ttf",
 21                          length=4,
 22                          draw_lines=True,
 23                          n_line=(1, 2),
 24                          draw_points=True,
 25                          point_chance=2):
 26     '''
 27     @todo: 生成验证码图片
 28     @param size: 图片的大小，格式（宽，高），默认为(120, 30)
 29     @param chars: 允许的字符集合，格式字符串
 30     @param img_type: 图片保存的格式，默认为GIF，可选的为GIF，JPEG，TIFF，PNG
 31     @param mode: 图片模式，默认为RGB
 32     @param bg_color: 背景颜色，默认为白色
 33     @param fg_color: 前景色，验证码字符颜色，默认为蓝色#0000FF
 34     @param font_size: 验证码字体大小
 35     @param font_type: 验证码字体，默认为 ae_AlArabiya.ttf
 36     @param length: 验证码字符个数
 37     @param draw_lines: 是否划干扰线
 38     @param n_lines: 干扰线的条数范围，格式元组，默认为(1, 2)，只有draw_lines为True时有效
 39     @param draw_points: 是否画干扰点
 40     @param point_chance: 干扰点出现的概率，大小范围[0, 100]
 41     @return: [0]: PIL Image实例
 42     @return: [1]: 验证码图片中的字符串
 43     '''
 44 
 45     width, height = size  # 宽， 高
 46     img = Image.new(mode, size, bg_color)  # 创建图形
 47     draw = ImageDraw.Draw(img)  # 创建画笔
 48 
 49     def get_chars():
 50         '''生成给定长度的字符串，返回列表格式'''
 51         return random.sample(chars, length)
 52 
 53     def create_lines():
 54         '''绘制干扰线'''
 55         line_num = random.randint(*n_line)  # 干扰线条数
 56 
 57         for i in range(line_num):
 58             # 起始点
 59             begin = (random.randint(0, size[0]), random.randint(0, size[1]))
 60             # 结束点
 61             end = (random.randint(0, size[0]), random.randint(0, size[1]))
 62             draw.line([begin, end], fill=(0, 0, 0))
 63 
 64     def create_points():
 65         '''绘制干扰点'''
 66         chance = min(100, max(0, int(point_chance)))  # 大小限制在[0, 100]
 67 
 68         for w in range(width):
 69             for h in range(height):
 70                 tmp = random.randint(0, 100)
 71                 if tmp > 100 - chance:
 72                     draw.point((w, h), fill=(0, 0, 0))
 73 
 74     def create_strs():
 75         '''绘制验证码字符'''
 76         c_chars = get_chars()
 77         strs = ' %s ' % ' '.join(c_chars)  # 每个字符前后以空格隔开
 78 
 79         font = ImageFont.truetype(font_type, font_size)
 80         font_width, font_height = font.getsize(strs)
 81 
 82         draw.text(((width - font_width) / 3, (height - font_height) / 3),
 83                   strs, font=font, fill=fg_color)
 84 
 85         return ''.join(c_chars)
 86 
 87     if draw_lines:
 88         create_lines()
 89     if draw_points:
 90         create_points()
 91     strs = create_strs()
 92 
 93     # 图形扭曲参数
 94     params = [1 - float(random.randint(1, 2)) / 100,
 95               0,
 96               0,
 97               0,
 98               1 - float(random.randint(1, 10)) / 100,
 99               float(random.randint(1, 2)) / 500,
100               0.001,
101               float(random.randint(1, 2)) / 500
102               ]
103     img = img.transform(size, Image.PERSPECTIVE, params)  # 创建扭曲
104 
105     img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)  # 滤镜，边界加强（阈值更大）
106 
107     return img, strs
108 
109 随机生成验证码图片模块

随机生成验证码模块

下面首先来看一下html文件，

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="statics/jquery-1.12.4.js"></script>
 7 </head>
 8 <body>
 9     <form action="login" method="post">
10         <input type="text", name="code">
11         <img src="/check_code" onclick="ChangeCode();" id="imgcode">
12         <input type="submit" value="submit">
13         <span>{{status}}</span>
14     </form>
15     <script>
16         function ChangeCode() {
17             var code = document.getElementById('imgcode');
18             code.src += '?'
19         }
20     </script>
21 </body>
22 </html>

View Code

再来看一下，服务端是怎么写的

1 class CheckCodeHandler(BaseHandler):
2     def get(self, *args, **kwargs):
3         import io
4         import check_code
5         mstream = io.BytesIO()
6         img, code = check_code.create_validate_code()
7         img.save(mstream, 'GIF')
8         self.session['CheckCode'] = code
9         self.write(mstream.getvalue())

这里需要注意一点，要记得将验证码写到session中经行保存，这样后面可以进行验证。这样一个简单的随机码验证图片就完成了。

五、自定义分页类　　

分页的功能很常见，下面将其整理为一个类，类似session类一样，以后使用只需稍作修改在页面嵌入为原生字符串即可。

 1 class Pagenation:
 2     def __init__(self, current_page, all_item, each_item):
 3  
 4         all_pager, c = divmod(all_item, each_item)
 5         if c > 0:
 6             all_pager += 1
 7         if current_page == '':
 8             current_page = 1
 9         self.current_page = int(current_page)  # 当前页
10         self.all_pages = all_pager  # 总的页面数
11         self.each_item = each_item  # 每页显示的item数
12  
13     @property
14     def start_item(self):  # 当前页的起始item位置
15         return (self.current_page - 1) * self.each_item
16  
17     @property
18     def end_item(self):  # 当前页结束item位置
19         return self.current_page * self.each_item
20  
21     @property
22     def start_end_span(self):  # 获取开始和结束页的具体数字
23         if self.all_pages < 10:
24             start_page = 1  # 起始页
25             end_page = self.all_pages + 1  # 结束页
26         else:  # 总页数大于10
27             if self.current_page < 5:
28                 start_page = 1
29                 end_page = 11
30             else:
31                 if (self.current_page + 5) < self.all_pages:
32                     start_page = self.current_page - 4
33                     end_page = self.current_page + 5 + 1
34                 else:
35                     start_page = self.all_pages - 10
36                     end_page = self.all_pages + 1
37         return start_page, end_page
38  
39     def generate_str_page(self):
40         list_page = []
41         start_page, end_page = self.start_end_span
42  
43         if self.current_page == 1:  # 上一页
44             prev = '<li><a class="pre-page" href="javascript:void(0);">上一页</a></li>'
45         else:
46             prev = '<li><a class="pre-page" href="/index/%s">上一页</a></li>' % (self.current_page - 1,)
47         list_page.append(prev)
48  
49         for p in range(start_page, end_page):  # 1-10
50             if p == self.current_page:
51                 temp = '<li><a class="li-page" href="/index/%s">%s</a></li>' % (p, p)
52             else:
53                 temp = '<li><a href="/index/%s">%s</a></li>' % (p, p)
54             list_page.append(temp)
55  
56         if self.current_page == self.all_pages:  # 下一页
57             nex = '<li><a class="next-page" href="javascript:void(0);">下一页</a></li>'
58         else:
59             nex = '<li><a class="next-page" href="/index/%s">下一页</a></li>' % (self.current_page + 1,)
60         list_page.append(nex)
61  
62         # 跳转
63         jump = """<input type='text' /><a onclick="Jump('%s',this);">GO</a>""" % ('/index/')
64         script = """<script>
65                 function Jump(baseUrl,ths){
66                     var val = ths.previousElementSibling.value;
67                     if(val.trim().length>0){
68                         location.href = baseUrl + val;
69                     }
70                 }
71                 </script>"""
72         list_page.append(jump)
73         list_page.append(script)
74         str_page = "".join(list_page)
75         return str_page

View Code

六、AJAX　

为什么使用ajax，局部刷新，减少请求中发送的数据

AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。

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

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

首先来看一下一种用iframe标签模拟ajax请求

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

ifram 模拟ajax

如今使用ajax其实就是使用浏览器(除了老旧的IE6，IE5)的XmlHttpRequest对象来完成的。

下面是相应的实例，

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

XmlHttpRequest对象的主要方法

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

XmlHttpRequest对象的主要属性

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

XmlHttpRequest发送ajax请求

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

Jquery之ajax方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <h1>Jquery - Ajax请求</h1>
10     <input type="button" onclick="XhrGetRequest();" value="Get发送请求" />
11     <input type="button" onclick="XhrPostRequest();" value="Post发送请求" />
12 
13     <script src="/statics/jquery-1.12.4.js"></script>
14     <script >
15         function XhrGetRequest() {
16            $.get({
17                url: "/test/",
18                data: {'k1': 'v1'},
19                success:function (callback) {
20                    console.log(callback)
21                }
22            })
23         }
24         function XhrPostRequest() {
25             $.post({
26                 url: "/test/",
27                 data: {'k1':'v1'},
28                 success:function (callback) {
29                     console.log(callback)
30                 }
31             })
32         }
33     </script>
34 
35 </body>
36 </html>
37 
38 jquery发送ajax请求

jquery发送ajax请求

七、跨域ajax　　

由于浏览器存在同源策略机制，本域脚本只能读写本域内的资源，而无法访问其它域的资源，请求的发送和响应是可以进行的，但是浏览器不接受而已，但是浏览器同源策略并不是对所有的请求均制约：

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

如果要实现跨域请求，有两种方法，jsonp和cors（跨域资源共享）下面来看一下怎么用这两种方法来实现跨域请求

1.JSONP实现跨越请求

jsonp的原理是利用script标签的src实现跨域。这种方法非常巧妙，但是有一个问题那就是只能发get请求

下面来看一下文件这里本地用了两个域w1，和w2，下面来看一下具体的文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="Ajax" onclick="DoAjax();">
 9     <input type="button" value="JsonpAjax" onclick="JsonpAjax();">
10     <script src="/statics/jquery-1.12.4.js"></script>
11     <script>
12 
13         function func(arg) {
14             console.log(arg)
15         }
16         function DoAjax() {
17             $.ajax({
18                 url: 'http://w2.com:8002/index',
19                 type: 'POST',
20                 data: {'k1': 'v1'},
21                 success:function (arg) {
22                     console.log(arg)
23                 }
24             });
25         }
26 
27         function JsonpAjax() {
28 
29 //            var tag = document.createElement("script");
30 //            tag.src = 'http://w2.com:8002/index?callback=func';
31 //            document.head.appendChild(tag);
32 //            document.head.removeChild(tag);
33 
34             $.ajax({
35                 url:'http://w2.com:8002/index',
36                 dataType: 'jsonp',
37                 jsonp: 'callback',
38                 jsonpCallBack: 'func'
39             })
40         }
41     </script>
42 </body>
43 </html>
44 
45 w1下面的index用来请求w2

w1下面的index用来请求w2

 1 #!/usr/bin/env python
 2 # coding=utf-8
 3 
 4 import tornado.web
 5 import tornado.ioloop
 6 
 7 
 8 class IndexHandler(tornado.web.RequestHandler):
 9     def get(self):
10         func = self.get_argument('callback')
11         self.write('%s([11,22])' % func)
12 
13     def post(self, *args, **kwargs):
14         self.write('w2.post')
15 
16 
17 settings = {
18     'template_path': 'views',
19     'static_path': 'statics',
20     "static_url_prefix": '/statics/',
21 }
22 
23 application = tornado.web.Application([
24     (r'/index', IndexHandler),
25 
26 ], **settings)
27 
28 if __name__ == '__main__':
29     application.listen(8002)
30     tornado.ioloop.IOLoop.instance().start()
31 
32 w2下面的start文件

w2下面的start文件

 1 #!/usr/bin/env python
 2 # coding=utf-8
 3 
 4 import tornado.web
 5 import tornado.ioloop
 6 
 7 
 8 class IndexHandler(tornado.web.RequestHandler):
 9     def get(self):
10         self.render('index.html')
11 
12     def post(self, *args, **kwargs):
13         self.write('w1.post')
14 
15 
16 settings = {
17     'template_path': 'views',
18     'static_path': 'statics',
19     "static_url_prefix": '/statics/',
20 }
21 
22 application = tornado.web.Application([
23     (r'/index', IndexHandler),
24 
25 ], **settings)
26 
27 if __name__ == '__main__':
28     application.listen(8001)
29     tornado.ioloop.IOLoop.instance().start()
30 
31 w1下的start文件

w1下的start文件

2、CORS

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

说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

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

简单请求：　一次请求

非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，

　　　　　　只有“预检”通过后才再发送一次请求用于数据传输。

1、简单请求

简单请求由于没有预检，所以比较简单，只需要在被请求的一方设置响应头 Access-Control-Allow-Origin，value为请求响应的域名，如果写上一个*的话，代表所有的域都可以来这里请求。

2、非简单请求

“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers
“预检”缓存时间，服务器设置响应头：Access-Control-Max-Age 设置完成后再该时间里只需通过一次预检
默认获取到的所有响应头只有基本信息，如果想要获取自定义的响应头，则需要再服务器端设置Access-Control-Expose-Headers。

此外在跨域请求中，默认情况下，HTTP Authentication信息，Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送：

浏览器端：XMLHttpRequest的withCredentials为true
服务器端：Access-Control-Allow-Credentials为true
注意：此时服务器端响应的 Access-Control-Allow-Origin 不能是通配符 *

下面来看一下代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input  type="button" value="Ajax" onclick="DoAjax();"/>
 9     <input  type="button" value="DoAjaxComplex" onclick="DoAjaxComplex();"/>
10 
11     <script src="/statics/jquery-1.12.4.js"></script>
12     <script>
13 
14         function DoAjax() {
15             $.ajax({
16                 url: 'http://w2.com:8002/cors',
17                 type: 'POST',
18                 data: {'k1': 'v1'},
19                 success: function (arg) {
20                     console.log(arg);
21                 }
22                 
23             });
24         }
25         function DoAjaxComplex() {
26             $.ajax({
27                 url: 'http://w2.com:8002/cors',
28                 type: 'PUT',
29                 headers: {'h1': 'xxoo'},
30                 data: {'k1': 'v1'},
31                 xhrFields:{withCredentials: true},
32                 success: function (arg) {
33                     console.log(arg);
34                 }
35 
36             });
37         }
38 
39     </script>
40 </body>
41 </html>
42 
43 w1下的html文件

w1下的html文件

 1 #!/usr/bin/env python
 2 # coding=utf-8
 3 
 4 import tornado.web
 5 import tornado.ioloop
 6 
 7 
 8 class IndexHandler(tornado.web.RequestHandler):
 9     def get(self):
10         func = self.get_argument('callback')
11         self.write('%s([11,22])' % func)
12 
13     def post(self, *args, **kwargs):
14         self.write('w2.post')
15 
16 class CorsHandler(tornado.web.RequestHandler):
17     def get(self):
18         self.write('{"status": 1, "message": "get"}')
19 
20     def post(self, *args, **kwargs):
21         self.set_header('Access-Control-Allow-Origin', "*")
22         self.write('{"status": 1, "message": "post"}')
23 
24     def options(self, *args, **kwargs):
25         # 允许put方法来
26         # self.set_header('Access-Control-Allow-Origin', "*")
27         self.set_header('Access-Control-Allow-Origin', "http://w1.com:8001")
28         self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
29         self.set_header('Access-Control-Allow-Headers', "h1,h2")
30         self.set_header('Access-Control-Allow-Credentials', "true")
31         self.set_header('Access-Control-Max-Age', 10)
32 
33     def put(self, *args, **kwargs):
34         print(self.cookies)
35         self.set_cookie('k1', 'kkk')
36         self.set_header('Access-Control-Allow-Origin', "http://w1.com:8001")
37         self.set_header('Access-Control-Allow-Credentials', "true")
38 
39         self.set_header('xxoo', "seven")
40         self.set_header('bili', "daobidao")
41         self.set_header('Access-Control-Expose-Headers', "xxoo,bili")
42 
43         self.write('ok')
44 
45 settings = {
46     'template_path': 'views',
47     'static_path': 'statics',
48     "static_url_prefix": '/statics/',
49 }
50 
51 application = tornado.web.Application([
52     (r'/index', IndexHandler),
53     (r'/cors', CorsHandler),
54 
55 ], **settings)
56 
57 if __name__ == '__main__':
58     application.listen(8002)
59     tornado.ioloop.IOLoop.instance().start()
60 
61 w2的start文件

w2的start文件

八、上传文件

form表单上传文件的时候一定要记得加上 enctype="multipart/form-data"

 1 <div class="publish">
 2     <form action="publish" method="post" enctype="multipart/form-data">
 3         <div class="title">
 4             <label class="title-label">标题:</label>
 5             <input type="text" name="title" >
 6         </div>
 7         <div class="content1">
 8             <label class="content-label">内容:</label>
 9             <textarea  name="content"></textarea>
10         </div>
11         <input type="file" name='up_picture'>
12         <input class="submit" type="submit" value="提交">
13     </form>
14 </div>
15 
16 
17 
18 class PubHandler(account.BaseHanlder):
19     def get(self, *args, **kwargs):
20         USER_INFO['is_login'] = self.session.get_value("is_login")
21         USER_INFO['username'] = self.session.get_value("username")
22         if USER_INFO['is_login']:
23             self.render('publish/publish.html', user_info=USER_INFO)
24         else:
25             self.write('请先登录')
26 
27     def post(self):
28         title = self.get_argument('title', None)
29         content = self.get_argument('content', None)
30 
31         if self.request.files:
32             file_pic = self.request.files['up_picture'][0]
33             # print(file_pic, file_pic['filename'], file_pic['body'])
34             file_path = os.path.join('static', 'pic', 'upload', file_pic['filename'])  # 上传的图片保存
35             print(file_path)
36             with open(file_path, 'wb') as f:
37                 f.write(file_pic['body'])
38 
39 form表单上传文件

form表单上传文件

下面来看一下几种ajax上传

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="file" id="img">
 9     <input type="button" onclick="Uploadfile();" value="提交">
10 
11     <script>
12         function Uploadfile() {
13             var fileobj = document.getElementById('img').files[0];
14             var form = new FormData();
15             form.append('file_img',fileobj);
16 
17             var xhr = new XMLHttpRequest();
18             xhr.open("post", '/file', true);
19             xhr.send(form);
20         }
21     </script>
22 </body>
23 </html>
24 
25 XmlHttpReq上传文件

XmlHttpReq上传文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="file" id="img">
 9     <input type="button" onclick="Uploadfile();" value="提交">
10     <script src="/statics/jquery-1.12.4.js"></script>
11     <script>
12         function Uploadfile() {
13             var fileobj = $('#img')[0].files[0];  //
14             var form = new FormData();
15             form.append('file_img',fileobj);
16 
17             $.ajax({
18                 type: 'POST',
19                 url: '/file',
20                 data: form,
21                 processData: false,     // 这两行需要加上，不然jquery会自动对传输的数据进行转换
22                 contentType:false,
23                 success:function (callback) {
24                     console.log(callback)
25                 }
26             })
27         }
28     </script>
29 </body>
30 </html>
31 
32 jquery上传文件

jquery上传文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13     <form id="my_form" name="form" action="/file" method="POST" enctype="multipart/form-data">
14         <input type="file" id="img" name="file_img">
15         <input type="button" onclick="redirect();" value="提交">
16         <iframe id="my_iframe" name="my_iframe" src="" class="hide"></iframe>
17     </form>
18 
19 
20     <script src="/statics/jquery-1.12.4.js"></script>
21     <script>
22         function redirect() {
23             document.getElementById('my_iframe').onload = callBk;
24             document.getElementById('my_form').target = 'my_iframe';
25             document.getElementById('my_form').submit();
26         }
27         
28         function callBk() {
29             var t = $("#my_iframe").contents().find('body').text();
30             console.log(t)
31         }
32     </script>
33 </body>
34 </html>
35 
36 利用iframe上传文件

利用iframe上传文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/statics/jquery-1.12.4.js"></script>
 7 </head>
 8 <body>
 9     <script type="text/javascript">
10 
11     $(document).ready(function () {
12 
13         $("#formsubmit").click(function () {
14 
15             var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>');
16 
17             $("body").append(iframe);
18 
19             var form = $('#theuploadform');
20             form.attr("action", "/file");
21             form.attr("method", "post");
22 
23             form.attr("encoding", "multipart/form-data");
24             form.attr("enctype", "multipart/form-data");
25 
26             form.attr("target", "postiframe");
27             form.attr("file", $('#userfile').val());
28             form.submit();
29 
30             $("#postiframe").load(function () {
31                 iframeContents = this.contentWindow.document.body.innerHTML;
32                 $("#textarea").html(iframeContents);
33             });
34 
35             return false;
36 
37         });
38 
39     });
40 
41 </script>
42 
43 
44 <form id="theuploadform">
45     <input id="userfile" name="file_img" size="50" type="file" />
46     <input id="formsubmit" type="submit" value="Send File" />
47 </form>
48 <div id="textarea">
49 </div>
50 </body>
51 </html>
52 
53 基于iframe实现ajax上传

基于iframe实现ajax上传

 1 class UploadHandeler(BaseHandler):
 2     def get(self, *args, **kwargs):
 3         # self.render("Xhr_img.html")
 4         # self.render("jquery_img.html")
 5         # self.render("iframe_img.html")
 6         self.render("iframe_ajax_img.html")
 7 
 8     def post(self, *args, **kwargs):
 9         if self.request.files:
10             file_img = self.request.files['file_img'][0]
11             with open(file_img['filename'], 'wb') as f:
12                 f.write(file_img['body'])
13         self.write('ok')
14 
15 服务端处理类

服务端处理类

posted @ 2016-08-11 09:02 龙哥1995xyabc 阅读(266) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

龙哥1995xyabc

cookie和session ,ajax知识

一、cookies

二、session

三、Xss和csrf

四、随机验证码图片

五、自定义分页类

六、AJAX

七、跨域ajax

1.JSONP实现跨越请求

2、CORS

1、简单请求

2、非简单请求

八、上传文件

公告

二、session　　

三、Xss和csrf　　

四、随机验证码图片　　

五、自定义分页类　　

六、AJAX　

七、跨域ajax　　