什麼是AJAX
Asynchronous JavaScript And Xml
異步的 JS 和 Xml
通過js異步的向服務器發送請求並接受響應數據
同步訪問：
當客戶端向服務器發送請求時 服務器在處理的過程中瀏覽器只能等待
異步訪問：
當客戶端向服務器發送請求時 服務器在處理的過程中 客戶端可以做其他操作
不需要一直等待
AJAX優點：
異步訪問
局部刷新
使用場合：
搜索建議
表單驗證
前後端完全分離
AJAX核心對象 異步核心對象（XMLHttprequest）：
什麼是XMLHTTPRequest
代替瀏覽器向服務器發送異步請求並接受響應的 “異步對象”
是由js來提供的
創建異步對象
主流的異步對象是XMLHTTPRequest類型的
並且主流瀏覽器（IE+ Chrome Firefox Safari Opera）都支持
低版本瀏覽器中（IE6以下）就不支持XMLHTTPRequest
需要使用ActiveXObject() 來創建異步對象
1.AJAX
1.創建 xhr
/**
* common.js
*/
function createXhr(){
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject('Microsoft.XMLHTTP');
}@app.route('/02-get')
def get_views():
return render_template('02-get.html')
2.xhr 的成員
1.方法 - open()
作用：創建請求
語法：open(method,url,asyn)
method:請求方式，取值'get' 或 'post'
url:請求地址，字符串
asyn:是否採用異步的方式
true:異步
false:同步
ex:
xhr.open('get','/server',true);
2.屬性 - readyState
作用：請求狀態，通過不同的請求狀態來表示xhr與服務器的交互情況
由0-4共5個值來表示5個不同的狀態
0 ：請求尚未初始化
1 ：已經與服務器建立連接
2 ：服務器端已接收請求
3 ：請求正在處理中
4 ：響應已經完成
3.屬性 - status
作用：服務器端的響應狀態碼
200 ：表示服務器正確處理所有的請求以及給出響應
404 ：請求資源不存在
500 ：服務器內部錯誤
... ...
4.事件 - onreadystatechange
作用：每當xhr的readyState發生改變的時候都要觸發的操作 - 回調函數
只有當readyState的值爲4並且status的值爲200的時候，纔可以正常的去接收響應數據
5.屬性 - responseText
作用：響應數據
6.方法 - send()
作用：通知xhr向服務器端發送請求
語法：send(body)
get請求：body的值爲null
send(null)
post請求：此處爲要提交的數據
send("請求數據")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="send_ajax()">發送AJAX請求</button>
<p id="show"></p>
<script src="/static/js/common.js"></script>
<script>
function send_ajax(){
//1.創建xhr
var xhr = createXhr();
//2.創建請求
// xhr.open(method,url,asyn)
xhr.open('get','/02-server',true);
//3.設置回調函數(判斷狀態接收響應數據)
//xhr.onreadystatechange = function(){}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//xhr的自身狀態是4並且服務器的狀態是200就可以接收響應數據
document.getElementById('show').innerHTML = xhr.responseText;
}
}
//4.發送請求
xhr.send(null);
}
</script>
</body>
</html>
3.AJAX的操作步驟
1.GET請求
1.創建 xhr 對象
2.創建請求 - open()
3.設置回調函數 - onreadystatechange 判斷狀態並接收響應數據
4.發送請求 - send()
請求參數：
推薦：請求地址後拼QueryString
xhr.open('get','/02-server?key=value&key=value',true)
2.POST請求
1.創建 xhr 對象
2.創建請求 - open()
3.設置回調函數 - onreadystatechange 判斷狀態並接收響應數據
4.設置請求消息頭 - Content-Type
5.發送請求 - send()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
</head>
<body>
姓名：<input type="text" id="uname">
<button id="btnSend">發送AJAX請求</button>
<p id="show"></p>
<script>
$(function(){
$("#btnSend").click(function(){
//1.創建xhr
var xhr = createXhr();
//2.創建請求
var url = "/03-server?uname="+$("#uname").val();
xhr.open('get',url,true);
//3.設置回調函數
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
$("#show").html(xhr.responseText);
}
}
//4.發送請求
xhr.send(null);
});
});
</script>
</body>
</html>