今天來聊一聊前後端交互的重要工具AJAX
結合上次跟大家分享的前後端交互基礎，如果還沒有看過的童鞋，以下是傳送門
【前後端交互詳解】
1. AJAX
- 到底什麼是Ajax?
-
ajax 全名 async javascript and XML(異步JavaScript和XML)
-
是
前後臺交互的能⼒也就是我們客戶端給服務端發送消息的⼯具，以及接受響應的⼯具 -
AJAX
不是新的編程語言，而是一種使用現有標準的新方法。 -
AJAX 是與服務器交換數據並更新部分網頁的藝術，
在不重新加載整個頁面的情況下。 -
是⼀個
默認異步執⾏機制的功能,AJAX分爲同步（async = false）和異步（async = true）
- 什麼是同步請求？(false)
同步請求是指當前發出請求後，瀏覽器什麼都不能做，
必須得等到請求完成返回數據之後，纔會執行後續的代碼，
相當於生活中的排隊，必須等待前一個人完成自己的事物，後一個人才能接着辦。
也就是說，當JS代碼加載到當前AJAX的時候會把頁面裏所有的代碼停止加載，頁面處於一個假死狀態，
當這個AJAX執行完畢後纔會繼續運行其他代碼頁面解除假死狀態
- 什麼是異步請求？(默認:true)
默認異步：異步請求就當發出請求的同時，瀏覽器可以繼續做任何事，
Ajax發送請求並不會影響頁面的加載與用戶的操作，相當於是在兩條線上，各走各的，互不影響。
一般默認值爲true，異步。異步請求可以完全不影響用戶的體驗效果，
無論請求的時間長或者短，用戶都在專心的操作頁面的其他內容，並不會有等待的感覺。
2. AJAX 的優勢
- 不需要插件的⽀持，原⽣ js 就可以使⽤
- ⽤戶體驗好（
不需要刷新⻚⾯就可以更新數據） 減輕服務端和帶寬的負擔- 缺點：搜索引擎的⽀持度不夠，因爲數據都不在⻚⾯上，搜索引擎搜索不到
3. AJAX 的操作流程
具體操作流程：
- 首先通過PHP頁面將數據庫中的數據取出
- 取出後
轉成json格式的字符串，後利用ajax把字符串返還給前臺 - 再利用
json.parse解析通過循環添加到頁面上 - 那麼反之，前端的數據可以利用ajax提交到後臺
- 但是後臺是沒有辦法直接把這些數據插入到數據庫中，所以要
先提交到PHP頁面上 - 最後再
由PHP將數據插入到數據庫中
4. AJAX 的使用
-
在 js 中有內置的構造函數來創建 ajax 對象
-
創建 ajax 對象以後，我們就使⽤ ajax 對象的⽅法去發送請求和接受響應
-
Ajax的一個最大的特點是
無需刷新頁面便可向服務器傳輸或讀寫數據(又稱無刷新更新頁面),這一特點主要得益於XMLHTTP組件XMLHTTPRequest對象。
XMLHttpRequest 對象方法描述
![在這裏插入圖片描述]()
1.創建⼀個 ajax 對象
// IE9及以上 const xhr = new XMLHttpRequest() // IE9以下 const xhr = new ActiveXObject('Mricosoft.XMLHTTP')上⾯就有了⼀個 ajax 對象
我們就可以使⽤這個xhr 對象來發送 ajax 請求了2.配置鏈接信息
XMLHttpRequest 對象屬性描述(
用於和服務器交換數據。)
![在這裏插入圖片描述]()
//所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。 const xhr = new XMLHttpRequest() // xhr 對象中的 open ⽅法是來配置請求信息的 // 第⼀個參數是本次請求的請求⽅式 get / post / put / ... // 第⼆個參數是本次請求的 url // 第三個參數是本次請求是否異步，默認 true 表示異步，false 表示同步 // xhr.open('請求⽅式', '請求地址', 是否異步) xhr.open('get', './data.php')上⾯的代碼執⾏完畢以後，本次請求的基本配置信息就寫完了
3.發送請求
//如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法： const xhr = new XMLHttpRequest() xhr.open('get', './data.php') // 使⽤ xhr 對象中的 send ⽅法來發送請求 xhr.send()上面代碼是把配置好信息的 ajax 對象發送到服務端
一個最基本的 ajax 請求就是上面三步 但是光有上面的三個步驟，我們確實能把請求發送到服務端 如果服務端正常的話，響應也能回到客戶端 但是我們拿不到響應 如果想要拿到響應，我們需要有兩個前提條件 1. 本次 HTTP 請求是成功的，也就是我們下面要說的 http 狀態碼爲 200 ~ 299 2. ajax 對象也有自己的狀態碼，用來表示本次 ajax 請求中各個階段
5.AJAX 狀態碼
-
ajax 狀態碼 - xhr.readyState
-
是用來表示一個
ajax 請求的全部過程中的某一個狀態readyState === 0 : 表示未初始化完成，也就是 open 方法還沒有執行 readyState === 1 : 表示配置信息已經完成，也就是執行完 open 之後 readyState === 2 : 表示 send 方法已經執行完成 readyState === 3 : 表示正在解析響應內容 readyState === 4 : 表示響應內容已經解析完畢，可以在客戶端使用了 -
這個時候我們就會發現，當一個 ajax 請求的全部過程中，
只有當 readyState === 4 的時候，我們纔可以正常使用服務端給我們的數據 -
所以，配合 http 狀態碼爲 200 ~ 299
一個 ajax 對象中有一個成員叫做 xhr.status 這個成員就是記錄本次請求的 http 狀態碼的 -
兩個條件都滿足的時候，纔是本次請求正常完成
readyStateChange
- 在 ajax 對象中有一個事件，叫做 readyStateChange 事件
- 這個事件是專⻔用
來監聽 ajax 對象的 readyState 值改變的的行爲 - 也就是說只要
readyState 的值發生變化了，那麼就會觸發該事件 - 所以我們就在這個事件中來監聽
ajax 的 readyState 是不是到 4 了
const xhr = new XMLHttpRequest() xhr.open('get', './data.php')
xhr.send()
xhr.onreadyStateChange = function () {
// 每次 readyState 改變的時候都會觸發該事件
// 我們就在這裏判斷 readyState 的值是不是到 4
// 並且 http 的狀態碼是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
// 這裏表示驗證通過
// 我們就可以獲取服務端給我們響應的內容了 }
}
使用 ajax 發送請求時攜帶參數
- 我們使用
ajax 發送請求也是可以攜帶參數的 - 參數就是和後臺交互的時候給他的一些信息
- 但是攜帶參數
get 和 post兩個方式還是有區別的
GET 還是 POST？
-
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
-
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫） 向服務器發送大量數據（POST 沒有數據量限制） 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
發送一個帶有參數的 get 請求
-
get 請求的參數就
直接在 url 後面進行拼接就可以const xhr = new XMLHttpRequest() // 直接在地址後面加一個 ?，然後以 key=value 的形式傳遞 // 兩個數據之間以 & 分割 xhr.open('get', './data.php?a=100&b=200') xhr.send()這樣服務端就能接受到兩個參數 一個是 a，值是 100，一個是 b，值是 200
發送一個帶有參數的 post 請求
-
post 請求的參數是攜帶在請求體中的，所以
不需要再 url 後面拼接const xhr = new XMLHttpRequest() xhr.open('post', './data.php') // 如果是用 ajax 對象發送 post 請求，必須要先設置一下請求頭中的 content- type // 告訴一下服務端我給你的是一個什麼樣子的數據格式 xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded') // 請求體直接再 send 的時候寫在 () 裏面就行 // 不需要問號，直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')// 1. 創建 ajax 對象 let xhr = new XMLHttpRequest() // 2. 配置請求信息 xhr.open(‘GET’, ‘./test.php’, true) // 3. 發送請求 xhr.send() // 4. 接受響應 xhr.onload = function () { console.log(xhr.responseText) }
6.AJAX封裝
-
.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /* type 代表 請求方式 url 代表 請求url路徑 data 代表 發送數據 success 代表 下載數據成功以後執行的函數 error 代表 下載數據失敗以後執行的函數 */ function $ajax({type = "get", url, data, success, error}){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } if(type == "get" && data){ url += "?" + querystring(data); } xhr.open(type, url, true); if(type == "get"){ xhr.send(); }else{ //設置提交數據格式 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); data ? xhr.send(querystring(data)) : xhr.send(); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ if(success){ success(xhr.responseText); } }else{ if(error){ error("Error：" + xhr.status); } } } } } function querystring(obj){ var str = ''; for(var attr in obj){ str += attr + "=" + obj[attr] + "&"; } return str.substring(0, str.length - 1); } window.onload = function(){ var aBtns = document.getElementsByTagName("button"); /* 當我們下載完數據以後需要對數據的處理方式不一樣 【注】$ajax，我們需要按照傳參的順序，依次傳入我們的參數。 */ aBtns[0].onclick = function(){ $ajax({ url: "code14/1.get.php", data: { username: "小明", age: 18, password: "123abc" }, success: function(result){ alert("GET請求到的數據：" + result); }, error: function(msg){ alert("GET請求數據錯誤：" + msg); } }) } aBtns[1].onclick = function(){ $ajax({ type: "post", url: "code14/2.post.php", data: { username: "小花", age: 18, password: "123abc" }, success: function(result){ alert("POST請求到的數據：" + result); }, error: function(msg){ alert("POST請求數據錯誤：" + msg); } }) } } </script> </head> <body> <button>GET請求</button> <button>POST請求</button> </body> </html>![]()
結:以上就是前後端交互工具AJAX的重點內容，下一次將更新http和cookie,喜歡的小夥伴們可以點贊，關注一波✨
