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