django之cookie、session和ajax

cookie是什么？

保存在客户端浏览器上的键值对 {k:v}

cookie依附在请求头或响应头中出现

发送请求时，会自动携带自己网站的cookie

应用：

实现登录

投票

1.1 获取Cookie

request.COOKIES['key']
request.get_signed_cookie(key, default=RAISE_ERROR, salt='', max_age=None)
    参数： 
        default: 默认值
           salt: 加密盐
        max_age: 后台控制过期时间

1.2 设置Cookie

rep = HttpResponse(...) 或 rep ＝ render(request, ...)
 
rep.set_cookie(key,value,...)
rep.set_signed_cookie(key,value,salt='加密盐',...)
    参数： 
        key,              键
        value='',         值
        max_age=None,     超时时间
        expires=None,     超时时间(IE requires expires, so set it if hasn't been already.)
        path='/',         Cookie生效的路径，/ 表示根路径，特殊的：跟路径的cookie可以被任何url的页面访问
        domain=None,      Cookie生效的域名
        secure=False,     https传输
        httponly=False    只能http协议传输，无法被JavaScript获取（不是绝对，底层抓包可以获取到也可以被覆盖）

1.3 浏览器操作cookie

由于cookie保存在客户端的电脑上，所以，JavaScript和jquery也可以操作cookie

<script src='/static/js/jquery.cookie.js'></script> 
$.cookie("list_pager_num", 30,{ path: '/' });

1.4 总结

cookie存储到客户端

优点：

　　　　数据存在在客户端，减轻服务器端的压力，提高网站的性能。

缺点：

　　　　安全性不高：在客户端机很容易被查看或破解用户会话信息

2 session

session是什么？

保存在服务端的键值对

注意: session依赖cookie

Session是保存服务器端的键值对，依赖于cookie；django实现seesion，可以分为如下几步：

生成随机字符串
写到用户浏览器cookie中
保存到session中
在随机字符串对应字典中设置相关内容

Django中默认支持Session，其内部提供了5种类型的Session供开发者使用：

　　数据库（默认）

　　缓存

　　文件

　　缓存+数据库

　　加密cookie

2.1 配置 settings.py

    SESSION_ENGINE = 'django.contrib.sessions.backends.db'   # 引擎（默认）
     
    SESSION_COOKIE_NAME ＝ "sessionid"                       # Session的cookie保存在浏览器上时的key，即：sessionid＝随机字符串（默认）
    SESSION_COOKIE_PATH ＝ "/"                               # Session的cookie保存的路径（默认）
    SESSION_COOKIE_DOMAIN = None                             # Session的cookie保存的域名（默认）
    SESSION_COOKIE_SECURE = False                            # 是否Https传输cookie（默认）
    SESSION_COOKIE_HTTPONLY = True                           # 是否Session的cookie只支持http传输（默认）
    SESSION_COOKIE_AGE = 1209600                             # Session的cookie失效日期（2周）（默认）
    SESSION_EXPIRE_AT_BROWSER_CLOSE = False                  # 是否关闭浏览器使得Session过期（默认）
    SESSION_SAVE_EVERY_REQUEST = False                       # 是否每次请求都保存Session，默认修改之后才保存（默认）

2.2 使用

def index(request):
    # 获取、设置、删除Session中数据
    request.session['k1']
    request.session.get('k1',None)
    request.session['k1'] = 123
    request.session.setdefault('k1',123) # 存在则不设置
    del request.session['k1']

    # 所有 键、值、键值对
    request.session.keys()
    request.session.values()
    request.session.items()
    request.session.iterkeys()
    request.session.itervalues()
    request.session.iteritems()

    # 用户session的随机字符串
    request.session.session_key

    # 将所有Session失效日期小于当前日期的数据删除
    request.session.clear_expired()

    # 检查 用户session的随机字符串 在数据库中是否
    request.session.exists("session_key")

    # 删除当前用户的所有Session数据
    request.session.delete("session_key")

    request.session.set_expiry(value)
        * 如果value是个整数，session会在些秒数后失效。
        * 如果value是个datatime或timedelta，session就会在这个时间后失效。
        * 如果value是0,用户关闭浏览器session就会失效。
        * 如果value是None,session会依赖全局session失效策略。

2.3 Session用户验证

def login(func):
    def wrap(request, *args, **kwargs):
        # 如果未登陆，跳转到指定页面
        if request.path == '/test/':
            return redirect('http://www.baidu.com')
        return func(request, *args, **kwargs)
    return wrap

2.4 session注销

request.session.flush()
request.session.clear()

3 Ajax

3.1 特点

AJAX使用Javascript技术向服务器发送异步请求；

AJAX无须刷新整个页面；

因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

3.2 ajax入门

Html页面部分

<form id="f1">
    {% csrf_token %}
    <p>用户名：{{ form.user }}</p>
    <p>密码：{{ form.password }}</p>
    <p>邮箱：{{ form.email }}</p>
    <input type="button" value="提交" onclick="submitForm();"/>
</form>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function submitForm() {
        $('#f1 .error').remove();

        $.ajax({
            url: '/register.html',
            type: 'POST',
            data: $('#f1').serialize(),
            dataType: 'JSON',
            success: function (arg) {
                if (arg.status) {
                    location.href = "/login.html";
                } else {
                    /*
                     arg.msg = {
                     email: ['xxxxx',]
                     password: ['xxxxx',]
                     user: ['xxxxx',]
                     }
                     */
                    $.each(arg.msg, function (k, v) {
                        var tag = document.createElement('span');
                        tag.innerHTML = v[0];
                        tag.className = "error";
                        // <span class='error'>v[0]</span>
                        $('#f1 input[name="' + k + '"]').after(tag);
                    })
                }
            }
        })
    }
</script>

后台处理逻辑

class RegisterForm(Form):
    user = fields.CharField(required=True,min_length=6,max_length=18)
    email = fields.EmailField(required=True,min_length=6,max_length=18)
    password = fields.CharField(min_length=12)
import json

def register(request):
    if request.method == 'GET':
        form = RegisterForm()
        return render(request,'register.html',{'form':form})
    else:
        response = {'status': True,'data': None,'msg':None}
        form = RegisterForm(request.POST)
        if form.is_valid():
            print(form.cleaned_data)
            # 数据库中添加一条数据
            # return redirect('/login.html') # ajax跳转，错错错
        else:
            response['status'] = False
            response['msg'] = form.errors
        return HttpResponse(json.dumps(response))

3.3 $.ajax请求参数

data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
 (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

 function testData() {
   $.ajax("/test",{     //此时的data是一个json形式的对象
      data:{
        a:1,
        b:2
      }
   });
processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
    那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
    最后得到一个［object，Object］形式的结果。
            
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
 比如contentType:"application/json"，即向服务器发送一个json字符串：
   $.ajax("/ajax_get",{
 
      data:JSON.stringify({
           a:22,
           b:33
       }),
       contentType:"application/json",
       type:"POST",
 
   }); 

 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
 views.py:   json.loads(request.body.decode("utf8"))

 traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
    traditional为false会对数据进行深层次迭代；

3.4 $.ajax响应参数

dataType：预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。

默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；

比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容

进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式

的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用data Type。

dataType的可用值：html｜xml｜json｜text｜script

3.5 csrf跨站请求伪造

基于请求体：

<script src="/static/jquery-3.2.1.js"></script>
<script>
    function ajaxSubmit() {
        $.ajax({
            url: "/icbc.html",
            type: 'POST',
            data: {'k1': 'v1', 'k2': 'v2', 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},
            success: function (arg) {
                console.log(arg)
            }
        })
    }

    // 只能写在模板中
    function ajaxSubmit() {
        $.ajax({
            url: "/icbc.html",
            type: 'POST',
            data: {'k1': 'v1', 'k2': 'v2', 'csrfmiddlewaretoken': "{{ csrf_token }}"},
            success: function (arg) {
                console.log(arg)
            }
        })
    }

    function ajaxSubmit() {
        $.ajax({
            url: "/icbc.html",
            type: 'POST',
            data: $('#f1').serialize(),
            success: function (arg) {
                console.log(arg)
            }
        })
    }
</script>

基于请求头：

a. 在cookie中获取csrftoken对应的值 l2kEqQLhR1gH0hh3ioZ1dfxT3iSwjXoKTf7GNFggJZ7E6DROB6k33L7vdqe5lV1v

b. 发送请求时，放在请求头中也可以

<script src="/static/jquery-3.2.1.js"></script>
<script>
    function ajaxSubmit() {
        $.ajax({
            url: "/icbc.html",
            type: 'POST',
            data: {'k1': 'v1', 'k2': 'v2'},
            headers: {"X-CSRFToken": $.cookie('csrftoken')},
            success: function (arg) {
                console.log(arg)
            }
        })
    }
</script>