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> 向伺服器傳送請求