ajax 无返回_AJAX技术学习
水里的游魚是緘默沉靜的，陸地上的獸類是喧嘩的，空中的飛鳥是喧嘩著的。人類卻兼有海洋的緘默沉靜、陸地的喧嘩與天空的音樂。? ? ??
? ? ? ? ? ? ? ? ? ? ?——泰戈爾
佳
著
薦
AJAX技術
AJAX全稱為Asynchronous Javascript And XML,即異步的JS和XML;通過AJAX可以在瀏覽器中向服務端發(fā)送異步請求，最大的優(yōu)勢就是：無刷新獲取數(shù)據(jù)。
AJAX的特點1
ajax
AJAX的優(yōu)點與缺點
優(yōu)點：
1、可以無需刷新頁面而與服務器端進行通信。
2、允許你根據(jù)用戶事件來更新部分頁面內容。
缺點：
1、沒有瀏覽歷史，不能回退
2、存在跨域問題(同源策略)
3、SEO不友好
HTTP請求報文與響應報文結構
2
ajax
請求報文與響應報文
請求報文：
重點是格式與參數(shù)
行 ?????POST ??/s?ie=utf-8 ?HTTP/1.1
頭 ?????Host: atguigu.com
????????Cookie: name=guigu
????????Content-type: application/x-www-form-urlencoded
????????User-Agent: chrome 83
空行
體 ?????username=admin&password=admin
響應報文：
行 ?????HTTP/1.1 ??200 ??OK
頭 ?????Content-Type: text/html;charset=utf-8
????????Content-length: 2048
????????Content-encoding: gzip
空行
體 ?????
????????????????
尚硅谷
AJAX中的GET與POST請求
3
AJAX
GET&POST&請求頭設置
GET請求
//創(chuàng)建ajax對象
Const xhr = new XMLHttpRequest();
//初始化，設置請求方法和url
Xhr.open(“GET”,”http://127.0.0.1/server?a=100&b=200&c=300”);
//發(fā)送請求
Xhr.send();
//時間綁定，處理服務端返回結果
Xhr.onreadystatechange=function(){
//判斷服務端返回了所有的結果
If(xhr.readState==4){
//判斷響應狀態(tài)碼
If(xhr.status>=200 && xhr.status <300){
Console,log(xhr.response);
}
}
}
POST請求
//創(chuàng)建ajax對象
Const xhr = new XMLHttpRequest();
//初始化，設置請求方法和url
Xhr.open(“GET”,”http://127.0.0.1/server”);
//發(fā)送請求
Xhr.send(“a=3&b=4”);
//時間綁定，處理服務端返回結果
Xhr.onreadystatechange=function(){
//判斷服務端返回了所有的結果
If(xhr.readState==4){
//判斷響應狀態(tài)碼
If(xhr.status>=200 && xhr.status <300){
Console,log(xhr.response);
}
}
}
請求頭設置
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
?xhr.setRequestHeader("name1","ddd");
自動重啟工具nodemon
3
AJAX
nodemon
安裝npm install -g nodemon
使用nodemon [your node app]
AJAX中的一系列問題
3
AJAX
iE緩存&超時&網(wǎng)絡異常&取消請求&重復發(fā)送
Ie中ajax緩存問題解決
初始化對象時路徑后面加上時間戳
xhr.open("POST","http://localhost:8000/ie?t="+Date.now());
Ajax請求超時(ontimeout)與網(wǎng)絡異常(onerror)
xhr.timeout=2000;
?//超時回調
xhr.ontimeout=function(){
alert("你的網(wǎng)絡超時了")
}
//網(wǎng)絡異常
xhr.οnerrοr=function(){
alert("你斷網(wǎng)了")
}
Ajax取消請求
xhr.abort();//執(zhí)行之后就會取消
Ajax請求重復發(fā)送問題
????//獲取所有button
????const btns = document.querySelectorAll("button");
????let x = null;
????let isSending=false;//判斷是否重復點擊
????btns[0].οnclick=function(){
???????//判斷是否重新請求，是就取消掉
???????if(isSending) x.abort();
????????x = new XMLHttpRequest();
????????//初始化
????????isSending = true;
????????x.open("GET","http://localhost:8000/server");
????????//發(fā)送請求
????????x.send();
????????x.onreadystatechange=function(){
????????????if(x.readyState === 4){ //判斷是否成功發(fā)送請求，如果成功就將狀態(tài)改為false
????????????????isSending = false;
????????????}
??????????}
????}
????//取消發(fā)送的請求
????btns[1].οnclick=function(){
????????x.abort();//執(zhí)行之后就會取消
????}
Jqurey發(fā)送AJAX請求
3
AJAX
GET&POST&通用方式
$.get(“http://127.0.0.1/server”,{a:100,b:200},function(){
Console.log(data)
},”json”);
POST請求
$.post(“http://127.0.0.1/server”,{a:100,b:200},function(){
Console.log(data)
},”json”);
Jquery通用發(fā)送請求方式
$.ajax({
//url
Url:”http://127.0.0.1/server”,
//參數(shù)
Data:{a:100,b:200},
//請求類型
Type:”GET/POST”,
//響應體結果
dataType:”json”,
//成功的回調
Sucess:function(data){
Console.log(data);
}
//超時時間
Timeout:2000,
//失敗的回調
Error:function(){
Console.log(“錯誤”)
},
//頭信息
Headers:{
C:200,
D:400
}
})
Axios發(fā)送AJAX請求
3
AJAX
GET&POST&函數(shù)發(fā)送
GET請求
Axios.get(“/axios-server”,{
//url參數(shù)
Params:{
Id:200,
Vip:7
},
//請求頭信息
Headers:{
Name:”mmm”,
Age:20
}
}).then(val =>{
Console.log(val)
})
POST請求
Axios.post(“/axios-server”,{
A:100,
B:200
},{
//url參數(shù)
Params:{
Id:200,
Vip:7
},
//請求頭信息
Headers:{
Name:”mmm”,
Age:20
}
})
Axios函數(shù)發(fā)送ajax請求
Axios({
//請求方法
Method:”POST”,
//url
Url:”/axios-server”,
//url參數(shù)
Params:{
Vip:10,
Leavel:30
},
//頭信息
Headers:{
A:100,
B:200
},
//請求體參數(shù)
Data:{
Username:”admin”,
Password:”admin”
}
}).then(response =>{
Console.log(response)
})
Fetch函數(shù)發(fā)送AJAX請求
3
AJAX
fetch函數(shù)
GET&POST請求
fetch(“http://127.0.0.1/fetch-server?vip=10”,{
//請求方法
Method:”GET/POST”,
//請求頭
Headers:{
Name:”ad”,
},
//請求體
Body：”username=admin&password=admin”
}).then(response=>{
//如果返回結果是字符串
Return response.text();
//如果返回結果是json格式
Return response.json()
}).then(response=>{
Console.log(response)
})
AJAX中的跨域問題解決
3
AJAX
原生JsonP&Cors
原生jsonp(只支持get請求)
//創(chuàng)建script標簽
Const script = document.createElement(“script”);
//設置標簽的src屬性
Script.src=”http://127.0.0.1:200/srrver”;
//將script插入文檔中
Document.body.appendChild(script);
服務端返回函數(shù)體(js代碼)才行，字符串不行
Cors
//服務端設置一個響應頭,設置允許跨域
?response.setHeader("Access-Control-Allow-Origin","*");
//服務端設置請求頭 所有請求頭都可以通過
?response.setHeader("Access-Control-Allow-Headers","*");
有些書也許現(xiàn)在你讀不懂，但你一定要去讀它。時間會告訴你經典存在的意義。
——寄語
掃碼關注我們公眾號：健偉學習平臺更多前端知識推薦給你總結
以上是生活随笔為你收集整理的ajax 无返回_AJAX技术学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python expect模块_成为顶级
- 下一篇： 千兆路由器怎么设置网速最快_200M的网