Ajax實現步驟和原理

一、什么是Ajax?

　　Ajax = 異步 JavaScript 和XML。
　　Ajax是一種用於創建快速動態網頁的技術。
　　通過在后台與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
　　傳統的網頁（不使用 Ajax）如果需要更新內容，必需重載整個網頁面。

二、Ajax工作原理

　　Ajax的工作原理相當於在用戶和服務器之間加了—個中間層(AJAX引擎),使用戶操作與服務器響應異步化。並不是所有的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。

 　   Ajax（Asynchronous javascript and xml），實現了客戶端與服務器進行數據交流過程。使用技術的好處是：不用頁面刷新，並且在等待頁面傳輸數據的同時可以進行其他操作。

三、Ajax的使用及實現步驟

　　(1) 創建XMLHttpRequest對象,也就是創建一個異步調用對象. 

　　(2) 創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息. 

　　(3)設置響應HTTP請求狀態變化的函數. 

　　(4)發送HTTP請求. 

　　(5)獲取異步調用返回的數據. 

　　(6)使用JavaScript和DOM實現局部刷新.

AJAX運行步驟與狀態值說明
　　在AJAX實際運行當中，對於訪問XMLHttpRequest（XHR）時並不是一次完成的，而是分別經歷了多種狀態后取得的結果，對於這種狀態在AJAX中共有5種，分別是：
　　0 - (未初始化)還沒有調用send()方法
　　1 - (載入)已調用send()方法，正在發送請求
　　2 - (載入完成)send()方法執行完成，
　　3 - (交互)正在解析響應內容
　　4 - (完成)響應內容解析完成，可以在客戶端調用了
　　對於上面的狀態，其中“0”狀態是在定義后自動具有的狀態值，而對於成功訪問的狀態（得到信息）我們大多數采用“4”進行判斷。

第一種：

　　通過 Promise 分裝的 Ajax

 

function Param(json) {
    var arr = [];
    for (var i in json) {
        arr,
        arr.push(i + "=" + json[i])
    }
    return arr.join("&");
}


function ajax(a) {
    return new Promise(function(resolve, reject) {
        a = a || {};
        a.type = a.type || "get";
        a.data = a.data || "";
        var xhr = null;
　　　　　
　　　　　// 處理兼容問題
        xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        if (a.type === "get") {
            a.url += "?" + Param(a.data) + "&t=" + new Date().getTime();
　　　　　　　//調用open()方法並采用異步方式
            xhr.open("get", a.url, true);
　　　　　　　//使用send()方法將請求發送出去
            xhr.send();
        } else if (a.type === "post") {
            xhr.open("post", a.url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(Param(a.data))
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject("Err:" + xhr.status)
                }
            }
        }

    })
}

 

第二種：

　　通過 class 構造函數分裝的 Ajaxclass Ajax {    constructor() {

this.xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP') } fn() { this.xhr.onreadystatechange = () => { if (this.xhr.readyState === 4) { if (this.xhr.status === 200) { if (responseType === 'json') { resolve(JSON.parse(this.xhr.responseText)) } else { resolve(this.xhr.responseText) } } else { reject(new Error(this.xhr.status)) } } } } get(opt) { return new Promise((resolve, reject) => { let { url, async = true, params = {}, responseType = 'json' } = opt; if (!url) { return; } url = this.formatData(params) ? url + '?' + this.formatData(params) : url this.xhr.open('get', url, async); this.fn(); this.xhr.send(); }) } post(opt) { return new Promise((resolve, reject) => { let { url, async = true, params = {}, responseType = 'json', paramsType = 'application/x-www-form-urlencoded' } = opt; if (!url) { return; } this.xhr.open('post', url, async); this.fn(); this.xhr.setRequestHeader('content-type', paramsType) this.xhr.send(this.formatData(params, paramsType)); }) } formatData(params, paramsType = 'application/x-www-form-urlencoded') { if (paramsType === 'application/x-www-form-urlencoded') { return Object.entries(params).map(val => val[0] + '=' + val[1]).join('&') } else { return JSON.stringify(params); } } }

AJAX狀態碼說明

　　1**：請求收到，繼續處理
　　2**：操作成功收到，分析、接受
　　3**：完成此請求必須進一步處理
　　4**：請求包含一個錯誤語法或不能完成
　　5**：服務器執行一個完全有效請求失敗

　再具體就如下：

　　100——客戶必須繼續發出請求
　　101——客戶要求服務器根據請求轉換HTTP協議版本
　　200——交易成功
　　201——提示知道新文件的URL
　　202——接受和處理、但處理未完成
　　203——返回信息不確定或不完整
　　204——請求收到，但返回信息為空
　　205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
　　206——服務器已經完成了部分用戶的GET請求
　　300——請求的資源可在多處得到
　　301——刪除請求數據，重定向
　　302——在其他地址發現了請求數據
　　303——建議客戶訪問其他URL或訪問方式
　　304——客戶端已經執行了GET，但文件未變化
　　305——請求的資源必須從服務器指定的地址得到
　　306——前一版本HTTP中使用的代碼，現行版本中不再使用
　　307——申明請求的資源臨時性刪除
　　400——錯誤請求，如語法錯誤
　　401——請求授權失敗
　　402——保留有效ChargeTo頭響應
　　403——請求不允許
　　404——沒有發現文件、查詢或URl
　　405——用戶在Request-Line字段定義的方法不允許
　　406——根據用戶發送的Accept拖，請求資源不可訪問
　　407——類似401，用戶必須首先在代理服務器上得到授權
　　408——客戶端沒有在用戶指定的餓時間內完成請求
　　409——對當前資源狀態，請求不能完成
　　410——服務器上不再有此資源且無進一步的參考地址
　　411——服務器拒絕用戶定義的Content-Length屬性請求
　　412——一個或多個請求頭字段在當前請求中錯誤
　　413——請求的資源大於服務器允許的大小
　　414——請求的資源URL長於服務器允許的長度
　　415——請求資源不支持請求項目格式
　　416——請求中包含Range請求頭字段，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭字段
　　417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
　　500——服務器產生內部錯誤
　　501——服務器不支持請求的函數
　　502——服務器暫時不可用，有時是為了防止發生系統過載
　　503——服務器過載或暫停維修
　　504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
　　505——服務器不支持或拒絕支請求頭中指定的HTTP版本

 

參考文件：

　　https://www.jb51.net/article/74357.htm

　　https://blog.csdn.net/weixin_39194176/article/details/80933777