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