ajax的get/post請求及其封裝，以及ajax/HTTP狀態碼是啥子意思

ajax是什么？

• AJAX即“Asynchronous Javascript And XML”（異步javaScript和XML），是指一種創建交互式網頁應用的網頁開發技術,可以用于創建快速動態網頁的技術，通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。剛好解決了傳統方法的缺陷。

• 異步：瀏覽器在請求數據的過程中，不會一直等待，這段時間還可以做其他的操作。

• 同步：瀏覽器在請求數據的過程中，會一直等待事件的響應，直到返回結果才會執行其他的操作。

• 使用步驟:

  • 創建XMLHTTPRequest對象
  • 使用open方法設置與服務器的交互信息
  • 設置發送的數據,開始與服務器交互
  • 注冊事件
  • 更新界面

ajax-get

// 創建XMLHTTPRequest對象 var xhr = new XMLHttpRequest(); // console.log(xhr);// 使用open方法設置與服務器的交互信息 // open(請求類型, 請求的url, 是否異步) xhr.open('get', 'bendi.txt', true);// 設置發送的數據,開始與服務器交互 xhr.send();// 注冊事件 xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {// 更新界面console.log(xhr.responseText);document.getElementById('content').innerHTML = xhr.responseText;}} }

ajax-post

// - 創建XMLHTTPRequest對象 var xhr = new XMLHttpRequest();// - 使用open方法設置與服務器的交互信息 xhr.open('post', 'bendi.txt', true);// post請求發送之前需要設置請求頭, 編碼方式 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // - 設置發送的數據,開始與服務器交互 xhr.send();// - 注冊事件 xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {// - 更新界面console.log(xhr.responseText);document.querySelector('h3').innerHTML = xhr.responseText;}} }

ajax的封裝

function ajax(reqMes) {// 創建XMLHTTPRequest對象var xhr = new XMLHttpRequest();if (reqMes.type.toLowerCase() == 'get') { // get//判斷是否有參數,如果有就直接在url上拼接if (reqMes.data) {reqMes.url += '?' + reqMes.data;}// console.log(reqMes.url);// 使用open方法設置與服務器的交互信息// open(請求類型, 請求的url, 是否異步)xhr.open('get', reqMes.url, true);// 設置發送的數據,開始與服務器交互xhr.send();} else { // post// post// - 使用open方法設置與服務器的交互信息xhr.open('post', reqMes.url, true);// post請求發送之前需要設置請求頭, 編碼方式xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');// - 設置發送的數據,開始與服務器交互reqMes.data ? xhr.send(reqMes.data) : xhr.send();}// - 注冊事件xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {// - 更新界面(把請求的數據傳遞給success)reqMes.success(xhr.responseText);}}}}// 請求的參數集合(reqMes): 請求類型(type: get/post) 請求地址(url) 參數(data) 回調函數處理數據(success)ajax({type: 'get',url: 'bendi.txt',data: '',success: function (res) {console.log('success');console.log(res);// 渲染document.querySelector('h3').innerHTML = res;}});

ajax狀態碼：

通過readyState 可以獲取到ajax的狀態，由0-4表示，分別代表五個階段：

0 （初始化）

還沒有調用open（）方法；

1（載入）

已經調用了send（）方法，正在發送請求；

2（載入完成）

send（）方法已經執行完成，已收到全部響應內容；

3（解析）

正在解析響應的內容；

4（完成）

響應內容解析完成，可以在客戶端調用；這個時候說明ajax請求已經成功了，但是這個時候還需要查看服務器的狀態。

http狀態碼：

在請求ajax的時候，可以通過status屬性獲取返回來的網絡狀態碼。如果是200就表示請求成功。

1XX 系列

指定客戶端響應的某些動作，代表請求已經被接受，需要繼續處理。由于http/1.0協議中沒有定義任何的1xx狀態碼，所以除非在某些試驗條件下，服務器禁止向此類客戶端發送1xx響應。

2XX 系列

代表請求已經成功被服務器接收、理解、并接受。這系列中常見的是200、201狀態碼。

200：表示網絡請求成功。請求所希望的響應頭或數據體將隨此響應返回。

201：表示請求已經被實現，而且有一個新的資源已經依據請求的需要而建立，且其 URI 已經隨Location 頭信息返回。

3XX系列

代表需要客戶進行進一步操作才能完成請求。這個狀態碼用來重定向，后續的請求地址（重定向目標）在本次響應的location域中指明。這個系列的常見的有301、302、304狀態碼。

301：永久性重定向，表示請求的資源被分配了新的URL，之后應使用更改的URL；

302：請求的資源臨時從不同的 URI響應請求。

301與302的區別：前者是永久移動，后者是臨時移動（之后可能還會更改URL）

304：如果客戶端發送了一個帶條件的 GET 請求且該請求已被允許，而文檔的內容(自上次訪問以來或者根據請求的條件)并沒有改變，則服務器應當返回這個狀態碼。服務器端允許訪問資源，但是請求未滿足條件的情況下返回改狀態碼；

4XX系列

表示請求錯誤。代表客戶端可能發生了錯誤，妨礙了服務器的處理。常見的有400、401、404狀態碼。

400 ：

1、語義有誤，當前請求無法被服務器理解。除非進行修改，否則客戶端不應該重復提交這個請求。

2、請求參數有誤。

401：當前請求需要用戶驗證。該響應必須包含一個適用于被請求資源的 WWW-Authenticate 信息頭用以詢問用戶信息。客戶端可以重復提交一個包含恰當的 Authorization 頭信息的請求。

404：請求失敗，請求所希望得到的資源未被在服務器上發現。

5XX系列

代表了服務器在處理請求的過程中有錯誤或者異常狀態，也有可能是服務器意識到當前的軟硬件資源無法完成對請求的處理。常見500、503狀態碼。

500：一般來說，這個問題都會在服務器端的源代碼出現錯誤時出現，也有可能是web應用存在的bug或某些臨時的錯誤時。

503：表示服務器暫時處于超負載或正在進行停機維護，無法處理請求；這個狀況是臨時的，并且將在一段時間以后恢復。

總結

以上是生活随笔為你收集整理的ajax的get/post请求及其封装，以及ajaxHTTP状态码是啥子意思的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。