AJAX
定義
Asynchronous JavaScript and XML（異步JS和XML）
一系列web技術的集合集合
使用
CSS和XHTML來標準化呈現。使用
DOM模型來交互和動態顯示。使用
XML 與 XSLT進行數據互換和操作技術，使用 XMLHttpRequest 來和服務器進行異步通信。
（核心接口）（JS對象）使用
javascript來綁定和調用。作用
在瀏覽器和Web服務器之間使用異步數據傳輸
向服務器獲取新數據不需要刷新頁面等待，提升用戶體驗-
方法
.onreadystatechange 給對象綁定函數，請求成功時執行
OPEN xhr.open('請求類型 get/post' , '請求路徑 URL' ,是否異步true/false)TIP↓
GET&POST
get方式
1比post方式簡單速度更快，但是向服務器傳送的數據不能大于2k；
2向服務器提交的數據會顯示在瀏覽器的url地址上，安全性較差；
結論：做數據查詢時，建議用Get方式
post方式
傳送數據量大，安全性高一般用于以下幾種情況：
1.無法使用緩存文件（更新服務器上的文件或數據庫）
2.向服務器發送大量數據（POST 沒有數據量限制）
3.發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
4.在做數據添加、修改或刪除時，建議用Post方式
URL
1.相對于當前頁面的路徑，也可以使用絕對路徑，
2.該文件可以是任何類型的文件，如.txt .xml，或腳本文件如 .asp .php;
3.只能向同一個域中使用相同協議和端口的URL發送請求，否則會因為安全原因報錯。
.setRequestHeader(請求頭 名,請求頭 值)設置自定義的請求Header信息
SEND xhr.send(null（用于get） / string（用于post）); 例↓
不帶數據發送
var xhr = XMLHttprequest();
1→ xhr.open('GET','xxx.php',true); -------->get方式 or
2→ xhr.open('POST','xxx.php',true);-------->post方式
xhr.send();帶數據發送 get方式↓ 將要發送的數據變成url地址添加到.open()方法的參數中，格式： url = "發送地址" + "?數據名=" + 數據值 + "&數據名=" + 數據值; <input type="text" name="username"> <input type="password" name="password"> var username = document.getElementsByName('username')[0].value; var password = document.getElementsByName('password')[0].value; var url = "xxx.php"+"?username="+username+"&password="+password; var xhr = new XMLHttpRequest(); xhr.open("GET",url,true); xhr.send(); post方式↓ send(string代表post方式向服務器發送的數據)。 需要使用 setRequestHeader() 來添加 HTTP Header信息。 var xhr = new XMLHttpRequest(); xhr.open("POST","xxx.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("name=Alex&age=16"); 屬性
responseText將響應信息 作為字符串返回。
responseXML將響應信息 格式化為Xml Document對象并返回
status ↓返回服務器狀態碼 200 404↓
statusText狀態碼對應情況 OK Not Found
readyState請求狀態 0 1 2 3下載中 4下載完成-
步驟
1 創建一個XMLHttpRequest對象
2 給這個XMLHttpRequest對象綁定一個監聽器，當請求成功后，執行操作。
3 設置請求參數，包括get/post方式，url地址，是否異步。var xmlhttp=new XMLHttpRequest(); ----------->步驟1 創建對象 xmlhttp.onreadystatechange=function () { --------------->步驟2 綁定事件 if(xmlhttp.readyState==4 && xmlhttp.status==200){ // 如果請求狀態ok，數據下載完畢 ------------------->步驟3 執行操作 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; --------->//得到非XML響應信息，作為字符串返回 xmlDoc=xmlhttp.responseXML; txt=""; --------------------------->//得到非XML響應信息，解析響應 x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++){ txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt; } } xmlhttp.open("get","page.json");-------------------->步驟4 設置請求參數，準備發送 xmlhttp.send();------------------------------------->步驟5 發送請求
點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊
方案1 設置開關
var lock =false; 初始狀態是 關
ele.addEventListener('click',function(){ 給lock綁定點擊事件
if(!lock){
lock = true; 點擊lock后狀態是 開
ajax(); 等待AXJX執行完畢
lock = false; 關閉lock
}
});方案2 禁用按鈕
btn.addEventListener('click',function(){
this.disabled=true; 使用button的disabled屬性
ajax(); 等待AXJX執行完畢
setTimeout(this.disabled=false,0); 延時打開按鈕
});3.限制一定的時間內重復提交
var oBtn=document.querySelector(".button");
var clockTime=null;
oBtn.addEventListener("click",function(){
if(clockTime){
clearTimeout(clockTime)
}
clockTime=setTimeout(function(){
console.log()
},5000) //5000毫秒內提交一次 重復點擊重新計時
})
前后端開發聯調
- 開發之前雙方定好接口
- 約定好頁面需要的數據和數據類型
- 約定接口的名稱、請求的參數、響應的格式
- 前端通過mock方法搭建本地服務器，模擬后臺數據實現數據交互效果
- 使用server-mock或mock.js搭建模擬服務器，進行模擬測試
- 使用XAMPP等工具，編寫PHP文件進行測試
- 后端發給前端數據之前做好本地測試
demo 1
Tip
如何mock(寫給負基礎同學如我)
1 安裝自帶npm的node what?
1.1 下載 這個就行
1.2 安裝一路next
1.3 配置環境變量 how
1.3 完成 右鍵+shift => 此處打開命令行窗口 ok
1.4 測試 node -v/返回版本號 => nmp -v/返回版本號ok
2 安裝mock-server what?
npm install -g server-mock
