JavaScript前后端數(shù)據(jù)交互工具ajax使用教程
1. 介紹
1.1定義
Ajax(Asynchronous Javascript And XML) 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下,能夠更新部分 網(wǎng)頁(yè)的技術(shù)。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。 這意味著可以在不重新加載整個(gè)網(wǎng)
1.2傳統(tǒng)請(qǐng)求的問(wèn)題
瀏覽器地址欄發(fā)送請(qǐng)求,是同步的(阻塞代碼運(yùn)行),當(dāng)服務(wù)器很忙碌的時(shí)候會(huì)卡頓(等待),就造成 了資源浪費(fèi)
1.3Ajax請(qǐng)求與傳統(tǒng)請(qǐng)求的區(qū)別
ajax數(shù)據(jù)交互的優(yōu)點(diǎn)是 在請(qǐng)求數(shù)據(jù)的時(shí)候 不會(huì)阻塞后續(xù)js代碼的執(zhí)行
帶有ajax代碼的js代碼的執(zhí)行順序
1.從上到下執(zhí)行
2.遇到ajax代碼后 先發(fā)送請(qǐng)求
3.在等待服務(wù)器響應(yīng)數(shù)據(jù)的時(shí)間段內(nèi) 繼續(xù)向下執(zhí)行其他js代碼
4.等到服務(wù)器數(shù)據(jù)響應(yīng)回來(lái) 再執(zhí)行渲染數(shù)據(jù)的代碼
1.4應(yīng)用場(chǎng)景
但凡遇到動(dòng)態(tài)渲染的效果 我們都應(yīng)該使用ajax
2.原生ajax用法
2.1ajax的基礎(chǔ)語(yǔ)法
本質(zhì)上ajax其實(shí)是es5中提供的一個(gè)構(gòu)造函數(shù)——XMLHttpRequest
ajax實(shí)現(xiàn)前后端數(shù)據(jù)交互的步驟如下
//1.創(chuàng)建 ajax交互對(duì)象 通過(guò)XMLHTTPRequest來(lái)實(shí)例化出來(lái)
let ajax = new XMLHttpRequest();
//2.建立前端和服務(wù)器之間的連接 ajax對(duì)象有一個(gè)方法 open 調(diào)用即可建立連接
ajax.open("請(qǐng)求方式","服務(wù)器url地址");
//3.發(fā)送請(qǐng)求 ajax對(duì)象有一個(gè)方法 send 調(diào)用即可發(fā)送請(qǐng)求
ajax.send();
//4.接收服務(wù)器響應(yīng)數(shù)據(jù) ajax中是通過(guò)ajax對(duì)象的一個(gè)事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{
//5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時(shí)候 就可以獲取到響應(yīng)數(shù)據(jù)了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("請(qǐng)求失敗")
}
}
}ajax 的 通信狀態(tài)碼/生命周期
ajax的通信狀態(tài)碼/生命周期有五個(gè) 代表的含義 各不相同
分別是
0:請(qǐng)求未初始化(ajax對(duì)象還沒(méi)有聲明出來(lái))
1:已建立連接(ajax對(duì)象調(diào)用了open)
2:已發(fā)送請(qǐng)求(ajax對(duì)象調(diào)用了send)
3:服務(wù)器接收到請(qǐng)求并正在處理
4:服務(wù)器已響應(yīng)數(shù)據(jù)
隨著ajax數(shù)據(jù)交互的一步步推薦 通信狀態(tài)碼/生命周期 會(huì)自動(dòng)發(fā)生變化
每當(dāng)通信狀態(tài)碼/生命周期 發(fā)生變化 就會(huì)觸發(fā)一次onreadystatechange事件
在ajax中 我們可以通過(guò)ajax對(duì)象的一個(gè)屬性 readyState 來(lái)獲取通信狀態(tài)碼/生命周期
ajax對(duì)象.readyState
我們也可以通過(guò)ajax對(duì)象的一個(gè)屬性 responseText 來(lái)獲取響應(yīng)數(shù)據(jù)
ajax對(duì)象.responseText
我們還可以通過(guò)ajax對(duì)象的一個(gè)屬性 status 來(lái)獲取響應(yīng)狀態(tài)碼
ajax對(duì)象.status
2.2ajax提交數(shù)據(jù)
在不同的請(qǐng)求方式下 請(qǐng)求提交數(shù)據(jù)的寫法 也不同 我們主要了解一下 get 和 post兩種請(qǐng)求方式的提交數(shù)據(jù)的寫法
get
get請(qǐng)求提交數(shù)據(jù) 是在地址后面 添加 "?鍵名=鍵值&鍵名=鍵值&..."
//1.創(chuàng)建 ajax交互對(duì)象 通過(guò)XMLHTTPRequest來(lái)實(shí)例化出來(lái)
let ajax = new XMLHttpRequest();
//2.建立前端和服務(wù)器之間的連接 ajax對(duì)象有一個(gè)方法 open 調(diào)用即可建立連接
//get請(qǐng)求提交數(shù)據(jù) 提交在地址后面
ajax.open("get","服務(wù)器url地址?鍵名=鍵值&鍵名=鍵值&...");
//3.發(fā)送請(qǐng)求 ajax對(duì)象有一個(gè)方法 send 調(diào)用即可發(fā)送請(qǐng)求
ajax.send();
//4.接收服務(wù)器響應(yīng)數(shù)據(jù) ajax中是通過(guò)ajax對(duì)象的一個(gè)事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{
//5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時(shí)候 就可以獲取到響應(yīng)數(shù)據(jù)了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("請(qǐng)求失敗")
}
}
}post
post請(qǐng)求提交數(shù)據(jù) 是寫在 send方法中 將要提交的數(shù)據(jù)作為send方法的實(shí)參 傳入
post請(qǐng)求在提交之前 需要單獨(dú)設(shè)置請(qǐng)求頭 使用ajax對(duì)象的setRequestHeader方法 就可以設(shè)置請(qǐng)求頭了
//1.創(chuàng)建 ajax交互對(duì)象 通過(guò)XMLHTTPRequest來(lái)實(shí)例化出來(lái)
let ajax = new XMLHttpRequest();
//2.建立前端和服務(wù)器之間的連接 ajax對(duì)象有一個(gè)方法 open 調(diào)用即可建立連接
//get請(qǐng)求提交數(shù)據(jù) 提交在地址后面
ajax.open("post","服務(wù)器url地址?鍵名=鍵值&鍵名=鍵值&...");
//設(shè)置請(qǐng)求頭
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"/"application/json")
//3.發(fā)送請(qǐng)求 ajax對(duì)象有一個(gè)方法 send 調(diào)用即可發(fā)送請(qǐng)求
//將要提交的數(shù)據(jù) 作為實(shí)參 傳入send方法中
ajax.send("鍵名=鍵值&鍵名=鍵值&..."/JSON.stringify({}));
//注意:如果設(shè)置為 application/json 提交的數(shù)據(jù) 必須是一個(gè)對(duì)象格式的json字符串
//4.接收服務(wù)器響應(yīng)數(shù)據(jù) ajax中是通過(guò)ajax對(duì)象的一個(gè)事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{
//5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時(shí)候 就可以獲取到響應(yīng)數(shù)據(jù)了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("請(qǐng)求失敗")
}
}
}在不提交數(shù)據(jù)的時(shí)候的 post請(qǐng)求 即使不設(shè)置請(qǐng)求頭 也不會(huì)出問(wèn)題 但是我們一般為了語(yǔ)義和提高容錯(cuò)率,都會(huì)選擇設(shè)置請(qǐng)求頭。
3.jquery的ajax
3.1基本用法
jquery的ajax 是 $的一個(gè)方法——ajax 調(diào)用這個(gè)方法 并傳參 即可實(shí)現(xiàn)ajax數(shù)據(jù)交互
$(()=>{
//調(diào)用ajax方法 實(shí)現(xiàn)數(shù)據(jù)交互
$.ajax({
url:"服務(wù)器url地址",//必傳項(xiàng)
type:"請(qǐng)求方式",//可選項(xiàng) 默認(rèn)值為get
dataType:"數(shù)據(jù)交互的格式"http://可選項(xiàng) 默認(rèn)值為json 另外還可以選擇 xml text jsonp
data:{},//請(qǐng)求提交的數(shù)據(jù) 可選項(xiàng) 默認(rèn)不提交數(shù)據(jù) 如果想提交 在對(duì)象中 寫入屬性即可提交
timeout:數(shù)字,//超時(shí)時(shí)間 可選項(xiàng) 默認(rèn)為無(wú)限 如果設(shè)置了具體的超時(shí)時(shí)間 則會(huì)在請(qǐng)求發(fā)送后 超過(guò)超時(shí) 時(shí)間還沒(méi)接收到響應(yīng)數(shù)據(jù)的時(shí)候 停止請(qǐng)求 并報(bào)錯(cuò)404 單位為ms
beforeSend(){
//這個(gè)方法函數(shù) 會(huì)在ajax發(fā)送請(qǐng)求前 執(zhí)行
},
success(res){
//這個(gè)方法函數(shù) 會(huì)在ajax發(fā)送請(qǐng)求 并成功接收到響應(yīng)數(shù)據(jù)的時(shí)候 執(zhí)行 形參會(huì)接收到響應(yīng)數(shù)據(jù)
},
error(err){
//這個(gè)方法函數(shù) 會(huì)在ajax接收響應(yīng)數(shù)據(jù)失敗的時(shí)候執(zhí)行 形參會(huì)接收到 失敗信息
},
complete(){
//這個(gè)方法函數(shù) 會(huì)在ajax交互完成的時(shí)候 執(zhí)行
}
})
})注意:在實(shí)參對(duì)象中 四個(gè)方法 理論上都可以不傳 但是success在實(shí)際開發(fā)中必傳 因?yàn)閟uccess是用來(lái)接收響應(yīng)數(shù)據(jù)的
3.2jquery的ajax交互簡(jiǎn)化方法
get
用法:$.get("url地址?鍵值對(duì)&鍵值對(duì)...",(res)=>{ res形參用來(lái)接收響應(yīng)數(shù)據(jù) })
post
用法:$.post(url地址,{要提交的數(shù)據(jù)},(res)=>{ res形參用來(lái)接收響應(yīng)數(shù)據(jù) })
4.ajax原理說(shuō)明
ajax的數(shù)據(jù)交互方式 對(duì)比 傳統(tǒng)的輸入地址的交互方法 最大的優(yōu)點(diǎn)是
是不阻塞后續(xù)代碼
在等待響應(yīng)數(shù)據(jù)的時(shí)間段內(nèi) 會(huì)繼續(xù)向下執(zhí)行后續(xù)js代碼
這個(gè)優(yōu)點(diǎn)的原理 來(lái)源于 js的同步異步代碼的區(qū)分和執(zhí)行順序
js同步異步代碼的執(zhí)行順序
js代碼從上到下執(zhí)行
如果遇到同步代碼 就直接執(zhí)行
如果遇到異步代碼 會(huì)先存入 任務(wù)隊(duì)列 之后繼續(xù)向下執(zhí)行
直到所有同步代碼 都執(zhí)行完了 再去任務(wù)隊(duì)列中 將異步代碼 按照順序 依次取出并執(zhí)行
js中同步代碼和異步代碼的分類
異步代碼:事件、定時(shí)器、ajax
同步代碼:除了異步之外 都是同步
ajax代碼 為什么能不阻塞后續(xù)js代碼的執(zhí)行
//1.創(chuàng)建 ajax交互對(duì)象 通過(guò)XMLHTTPRequest來(lái)實(shí)例化出來(lái)
let ajax = new XMLHttpRequest();//同步代碼
//2.建立前端和服務(wù)器之間的連接 ajax對(duì)象有一個(gè)方法 open 調(diào)用即可建立連接
ajax.open("請(qǐng)求方式","服務(wù)器url地址");//同步代碼
//3.發(fā)送請(qǐng)求 ajax對(duì)象有一個(gè)方法 send 調(diào)用即可發(fā)送請(qǐng)求
ajax.send();//同步代碼
//4.接收服務(wù)器響應(yīng)數(shù)據(jù) ajax中是通過(guò)ajax對(duì)象的一個(gè)事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{//ajax的異步 體現(xiàn)在事件上 事件是異步代碼
//5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時(shí)候 就可以獲取到響應(yīng)數(shù)據(jù)了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("請(qǐng)求失敗")
}
}
}到此這篇關(guān)于JavaScript前后端數(shù)據(jù)交互工具ajax使用教程的文章就介紹到這了,更多相關(guān)JS ajax內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
AjaxUpLoad.js實(shí)現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了AjaxUpLoad.js實(shí)現(xiàn)文件上傳的具體代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03
JS for...in 遍歷語(yǔ)句用法實(shí)例分析
這篇文章主要介紹了JS for...in 遍歷語(yǔ)句用法,結(jié)合實(shí)例形式分析了javascript的for...in語(yǔ)句進(jìn)行數(shù)組遍歷的具體流程與使用技巧,需要的朋友可以參考下2016-08-08
如何解決webpack-dev-server代理常切換問(wèn)題
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy,代理到開發(fā)服務(wù)器,來(lái)解決本地跨域問(wèn)題。假如項(xiàng)目變大,可能需要proxy到不同環(huán)境,那么如何解決webpack-dev-server代理常切換問(wèn)題,下面就一起來(lái)了解一下2019-01-01
JS實(shí)現(xiàn)簡(jiǎn)單九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單九宮格抽獎(jiǎng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
純js代碼實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要介紹了純js代碼實(shí)現(xiàn)簡(jiǎn)單計(jì)算器,功能超簡(jiǎn)單,實(shí)現(xiàn)加減乘除簡(jiǎn)單運(yùn)算,感興趣的小伙伴們可以參考一下2015-12-12
詳解微信小程序-掃一掃 wx.scanCode() 掃碼大變身
這篇文章主要介紹了微信小程序-掃一掃wx.scanCode() 掃碼大變身,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04

