AJAX和JSON学习笔记

1.关系映射 - 多对多
对象名 = db.Table(
'关联表名',
db.Column('id',db.Integer,primary_key=True),
db.Column('外键列名',db.TYPE,db.ForeignKey('主表.主键')),
db.Column('外键列名',db.TYPE,db.ForeignKey('主表.主键'))
)

关联属性以及反向引用关系：
    在任意一个实体中：
        关联属性名=db.relationship(
            '关联的实体类',
            secondary='关联的第三张表名',
            lazy='dynamic',
            backref=db.backref(
                '反向引用属性名',
                lazy='dynamic'
            )
        )

2.cookies
1.保存cookie到客户端
响应对象.set_cookie(key,value,max_age)
2.获取cookie的值
request.cookies
包含了当前站点对应的所有的cookies的值

    request.cookies['key']
    request.cookies.get('key')

    判断数据是否在cookies中：
    if key in request.cookies:
        数据在cookies中
    else:
        数据不在cookies中
3.删除cookie的值
    响应对象.delete_cookie()

3.session
1.session在Flask中的实现
1.配置 SECRET_KEY
app.config['SECRET_KEY'] = 'xieshadouxing'
2.使用session
from flask import session

        1.向session中保存数据
            session['key'] = value;
        2.从session中获取数据
            value = session['key']
        3.从session中删除数据
            del session['key']

=======================================================
AJAX - 阿贾克斯
1.什么是AJAX
Asynchronous Javascript And Xml

Asynchronous : 异步的

    同步访问：
        当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等待，效率偏低
    异步访问：
        当客户端向服务器发送请求时，服务器在处理过程中，客户端可以做其他的操作，不需要一直等待，效率偏高

Xml：eXtensible Markup Language
         可扩展的   标签   语言


AJAX优点：
    1.异步 访问
    2.局部 刷新

AJAX的使用场合：
    1.搜索建议
    2.表单验证
    3.前后端完全分离

2.AJAX的核心对象-异步对象(XMLHttpRequest)
1.什么是XMLHttpRequest
简称为"xhr"
称为"异步对象"，代替浏览器向服务器发送请求并接收响应
xhr 是由JS来提供
2.创建异步对象(xhr)
主流的异步对象是 XMLHttpRequest 类型的，并且主流浏览器都支持(IE7+,Chrome,Firefox,Safari,Opera)全部支持。但在IE低版本浏览器中(IE6以及以下)，就不支持XMLHttpRequest,需要使用 ActiveXObject() 来创建异步对象

    支持 XMLHttpRequest ：
        new XMLHttpRequest()
    不支持 XMLHttpRequest ：
        new ActiveXObject("Microsoft.XMLHTTP")

    练习：
        1.创建Flask项目 - Ajax01
        2.创建访问路径 /01-xhr,并去往 01-xhr.html 模板
        3.在模板中
            创建一个按钮，单击时，通过一个 js方法，根据浏览器创建 xhr 对象并返回
3.xhr的成员
    1.方法 - open()
        作用：创建请求
        语法：open(method,url,async)
            method : 请求方法，取值为'get'或'post'
            url : 请求地址，字符串
            async : 是否采用异步的方式发送请求
                true : 使用异步方式发送请求
                false : 使用同步方式发送请求
        ex:
            xhr.open('get','/server',true)

    2.属性 - readyState
        作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况
        由0-4共5个值来表示5个不同的状态
        0 : 请求尚未初始化
        1 : xhr已经与服务器建立连接
        2 : 服务器端已经开始接收请求
        3 : 请求正在处理中
        4 : 响应已完成
    3.属性 - status
        作用：表示服务器端的响应状态码
            200：表示服务器正确处理所有的请求以及给出响应
            404：请求资源不存在
            500：服务器内部错误
    4.属性 - responseText
        作用：服务器端的响应数据
    5.事件 - onreadystatechange
        作用：每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数
            在该函数中，只有当readyState的值为4并且status的值为200的时候，就可以正常的接收 responseText 了
    6.方法 - send()
        作用：通知xhr向服务器端发送请求
        语法：send(body)
            body : 表示请求的主体
                get请求：是没有请求主体的，所以body的值为null    
                    xhr.send(null)
                post请求：是有请求主体的，所以body的位置处要表示请求数据
                    xhr.send("请求数据")
                    xhr.send("参数=值&参数=值")
4.AJAX的操作步骤
    1.GET请求
        1.创建 xhr 对象
        2.创建请求 - open()
        3.设置回调函数 - onreadystatechange
            判断状态并且接收数据
        4.发送请求 - send()


    2.GET 请求传递参数
        //1.获取 xhr
        //2.创建请求
            xhr.open('get','/02-server?name=value&name=value',true)
        //3.设置回调函数
        //4.发送请求

        服务器端：
            使用 request.args.get('name')接收请求参数 

    3.POST请求
        1.请求提交的数据要作为 send() 的参数进行提交
            xhr.send("参数=值&参数=值");
        2. 修改请求消息头
            在AJAX中，提交POST请求时，AJAX默认将Content-Type请求消息头的值修改为 "text/plain" 了，所以导致数据无法正常提交

            解决方案：将Content-Type的请求消息头再修改回"application/x-www-form-urlencoded"即可

            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")




    练习：
        1.创建数据库 - ajax
        2.创建实体类 - Users ，映射成表
            id - 主键，自增
            loginname - 登录名称
            loginpwd - 登录密码
            uname - 用户名称
        3.使用ajax验证登录名称是否存在

xxx
request.args.get()
AJAX:
1.AJAX核心对象 - XMLHttpRequest
function getXhr(){
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject("Microsoft.XMLHTTP");
}
2.xhr的成员
1.方法 - open()
目的：创建请求
语法：open(method,url,async)
2.属性 - readyState
目的：表示xhr与服务器之间的交互状态
取值：0-4
4：响应完成
3.属性 - status
目的：表示服务器自身的响应状态码
取值：标准的HTTP响应码
200：服务器正常响应所有内容
4.属性 - responseText
目的：响应内容
5.事件 - onreadystatechange
目的：监控xhr的请求状态
取值：函数
只有当readyState的值为4并且status的值为200的时候才正常的接收数据
6.方法 - send()
目的：发送请求
语法：send(body)
get : send(null)
post : send("name=value&name=value")
7.方法 - setRequestHeader()
目的：设置请求消息头
语法：setRequestHeader(name,value)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

3.AJAX操作步骤
    1.GET请求
        1.创建/获取 xhr
        2.创建请求
        3.设置回调函数
        4.发送请求

        注意：如果有请求提交数据的话需要在 url 的后面拼查询字符串
    2.POST请求
        1.创建/获取 xhr
        2.创建请求
        3.设置回调函数
        4.设置 Content-Type 的请求消息头
        5.发送请求

        注意：如果有请求提交数据的话需要在 send() 中传递数据

1.JSON
1.JS 对象
语法：
1.通过一对 {} 表示一个对象
2.在 {} 中允许通过 key:value 的形式来表示属性
3.多对的属性和值之间使用 , 隔开
var obj = {
name:'MrWang',
age:37,
gender:'Unknown'
}
2.什么是JSON
JavaScript Object Notation
表现形式
按照JS对象的格式所构建出来的字符串就是JSON串

    在ajax中，允许将复杂格式的响应数据(如列表等)构建成JSON格式的字符串再进行响应输出
3.JSON的表现
    1.JSON表示单个对象
        1.使用 {} 表示单个对象
        2.在{}中使用key:value的格式表示数据
        3.多对属性和值之间使用 , 隔开
        4.key必须使用""引起来
        5.value如果是字符串的话，也需要用""引起来

        ex:
            var obj = {
                "name":"MrWang",
                "age":37,
                "gender":"Unknown"
            }

            var str = '{"name":"MrWang","age":37,"gender":"Unknown"}';
    2.JSON表示多个对象
        1.使用[](数组)来表示多个对象
        2.数组中允许包含多个JSON对象 或 字符串
            1.使用JSON数组来表示若干字符串
                var arr = ["王老师","王夫人","王小超"];
                var str = '["王老师","王夫人","王小超"]';
            2.使用JSON数组来表示若干对象
                var arr = [
                    {
                        "name":"王老师",
                        "age":37,
                        "gender":"男"
                    },
                    {
                        "name":"王夫人",
                        "age":15,
                        "gender":"男"
                    }
                ];

                var str = '[
                    {
                        "name":"王老师",
                        "age":37,
                        "gender":"男"
                    },
                    {
                        "name":"王夫人",
                        "age":15,
                        "gender":"男"
                    }
                ]';
4.使用jq的each()迭代数组
    1. $.each();
        语法：
            $.each(arr,function(index,obj){
                //index : 遍历出来的元素的下标
                //obj : 表示遍历出来的元素
            });
    2. $obj.each();
        语法：
            $obj.each(function(index,obj){
                //index : 遍历出来的元素的下标
                //obj : 表示遍历出来的元素
            });

            该函数用于循环遍历 $obj 元素

2.后台处理JSON
在后台查询数据时，需要先将数据转换为JSON格式的字符串，再响应给客户端。到了前端后再将字符串转换为JS对象再进行解析。

1.步骤
    1.后台先获取数据
        数据类型为:
            1.元组
            2.列表
            3.字典
    2.在后台将数据转换为符合JSON格式的字符串
    3.在后台将JSON格式字符串进行响应
    4.在前端将JSON格式的字符串解析成JS对象

2.Python中的JSON处理
    使用 Python 中的 json 类可以完成转换
    import json
    jsonStr = json.dumps(元组|列表|字典)
    return jsonStr
3.前端中的JSON处理
    通过以下方式，将JSON的串转换为JS对象或数组
    在JS中：js对象/数组 = JSON.parse(JSON串)

JSON:JavaScript Object Notation
1.语法
1.使用{}括起来
2.使用key:value来描述属性(数据)
3.key必须使用""引起来
4.value如果是字符串的话也必须使用""引起来
5.多个key:value之间使用 , 隔开
2.后端处理
1.允许转换成JSON的类型
1.字典
2.列表
3.元组

    在实体类中，编写一个方法将实体对象转换成字典，以便于方便的转换成JSON

    class Users(db.Model):
        ... ...
        def to_dict(self):
            dic = {
                loginname:self.loginname
            }
            return dic
2.将元素装换为JSON字符串
    import json
    jsonStr=json.dumps(dic/tup/list)

3.前端处理
将后端得到的JSON字符串转换成JS对象，再解析
JSON.parse(str)
4.使用JQ的each函数进行数组的迭代
1.$.each(arr,function(i,obj){})
2.$arr.each(function(i,obj){});
=======================================================
1.JQUERY AJAX
1.$obj.load(url,data,callback);
作用：异步加载数据到$obj元素中
参数：
1.url：异步请求的地址
2.data：传递给服务器端的参数(可选)，该数据将决定请求方法是什么。
1.可以传递普通的字符串
"name=MrWang&age=30"
2.可以是JSON对象
{
"name":"MrWang",
"age":30
}
3.callback：异步请求成功后的回调函数(可选)
取值为 匿名函数
function(resText,statusText){
resText : 响应数据
statusText : 响应的状态文本
}

JSON:JavaScript Object Notation
1.语法
1.使用{}括起来
2.使用key:value来描述属性(数据)
3.key必须使用""引起来
4.value如果是字符串的话也必须使用""引起来
5.多个key:value之间使用 , 隔开
2.后端处理
1.允许转换成JSON的类型
1.字典
2.列表
3.元组

    在实体类中，编写一个方法将实体对象转换成字典，以便于方便的转换成JSON

    class Users(db.Model):
        ... ...
        def to_dict(self):
            dic = {
                loginname:self.loginname
            }
            return dic
2.将元素装换为JSON字符串
    import json
    jsonStr=json.dumps(dic/tup/list)

3.前端处理
将后端得到的JSON字符串转换成JS对象，再解析
JSON.parse(str)
4.使用JQ的each函数进行数组的迭代
1.$.each(arr,function(i,obj){})
2.$arr.each(function(i,obj){});
=======================================================
1.JQUERY AJAX
1.$obj.load(url,data,callback);
作用：异步加载数据到$obj元素中
参数：
1.url：异步请求的地址
2.data：传递给服务器端的参数(可选)，该数据将决定请求方法是什么。
1.可以传递普通的字符串
"name=MrWang&age=30"
2.可以是JSON对象
{
"name":"MrWang",
"age":30
}
3.callback：异步请求成功后的回调函数(可选)
取值为 匿名函数
function(resText,statusText){
resText : 响应数据
statusText : 响应的状态文本
}
2.$.get()
1.语法：
$.get(url,data,callback,type)
2.参数详解
1.url：异步请求地址
2.data：异步请求的参数
1.字符串 ：name=value&name=value
2.JSON ：{"name":"value","name":"value"}
3.callback：请求成功时的回调函数
function(resText){
resText:表示就是响应成功后的响应数据
}
4.type：响应回来的数据的类型
1.html ：响应回来的数据是html文本
2.text ：响应回来的数据是text文本
3.json ：响应回来的数据是JSON对象
4.script ：响应回来的数据是js脚本代码
注意：如果此处指定了类型的话，那么在callback中，就无需再做类型的转换
3.$.post()
4.$.ajax()
作用：自定所有的ajax行为
语法：$.ajax({ajax设置的参数数据对象});
参数们：
1.url : 字符串，表示异步请求的地址
2.type : 字符串，请求方式 (get,post)
3.data : 传递到服务器端的参数
1.字符串 ："name=value&name=value"
2.JSON对象 ：{"name":"value"}
4.dataType :字符串，响应回来的数据的格式
1.html
2.xml
3.text
4.script
5.json
6.jsonp ：有关跨域的响应格式
5.success : 回调函数，请求和响应成功时的回调函数
function(data){
data : 表示服务器端响应回来的数据
}
============================================
6.error : 回调函数，请求或响应失败时的回调函数
7.beforeSend : 回调函数，在发送ajax请求之前的回调函数，如果return false的话则表示终止本次请求
2.跨域 - Cross Domain
1.什么是跨域
HTTP协议中 - 同源策略
同源：多个地址中，相同协议，相同域名，相同端口被视为“同源”
在HTTP中，必须是同源地址才能相互发送请求，非同源地址被拒绝的( 和 )

    http://www.tedu.cn/a.html
    http://www.tedu.cn/b.html
    以上地址是 "同源"

    http://www.tedu.cn/a.html
    https://www.tedu.cn/b
    由于协议不同，以上两个地址"非同源"

    http://localhost:5000/a.html
    http://127.0.0.1:5000/b
    http://192.168.121.35/c
    由于域名不同，以上三个地址"非同源"

    跨域：非同源的网页，在相互发送请求时需要跨域
2.解决方案
    通过 <script> 向服务器发送请求