JavaScript實現Ajax

1：基本概念

jQuery的Ajax請求其實是封裝的一個XHLHttpRequest，從字面意思來看是，XML是一種文件格式，Http是一個網絡請求，Request最開始是用於請求XML文件的，後來不斷擴展能夠請求多種類型的文件。

XHLHttpRequest，網絡請求模塊，或者是一個瀏覽器網絡線程。用於從URL網絡上獲取數據，有了對象，就能夠實現頁面的無刷新請求數據，就能夠作到一個局部的更新，也能夠獲取多種類型的數據(ftp、文件)。

2：要實現和使用XMLHttpRequest

它是一個對象，首先咱們須要實例化，定義一個：

var xhr = new XMLHttpRequest();

3：初始化請求，給定一些必要的配置，給它一些property

//Ajax請求時的參數設置
    method          請求方式
    url             請求地址
    async           是否異步
    user            用戶名
    password        密碼
    
    xhr.open(method,url,async,user,password);

4：發送請求(encodeURLComponent)4：發送請求(encodeURLComponent)

xhr.send(data);
    等待接收

5：接收網絡請求返回

通常有以下屬性：

• responseText，請求返回的數據內容，能夠是一段文本，是一段二進制或者是一個json
• responseXML

是一個文件，若是響應頭內容是text/xml，這個屬性將保留響應數據的XML、DOM文檔。

• status，響應的HTTP狀態，如 200(正常，200-300之間都表示成功) 304(使用緩存) 404(沒找到) 500(服務器內部錯誤)等
• statusText，HTTP狀態說明
• readyStatus，請求/響應過程的當前活動階段，一共有5個值：0(未被調用open)，1(已被調用open但未發送)，2(已調用send)，3(已接收到請求返回的數據)，4(請求已完成)。
• timeout，設置請求超時時間

  xhr.onreadystatechange = () => {
         if (xhr.readyStatus === 4) {
             /* HTTP 狀態在 200-300 之間表示請求成功 */
             /* HTTP 狀態爲 304 表示請求內容未發生改變，可直接從緩存中讀取 */
             if (xhr.status >= 200 &&
                 xhr.status < 300 ||
                 xhr.status == 304) {
                 console.log('請求成功', xhr.responseText)
             }
         }
     }

6：封裝(promise)

function ajax (options) {
        /* 獲取請求地址 */
        let url = options.url;
        /* 獲取請求方法 */
        const method = options.method.toLocaleLowerCase() || 'get';
        /* 默認異步 */
        const async = options.async != false;
        /* 獲取請求request數據 */
        const data = options.data;
        /* 實例化XMLHttpRequest */
        const xhr = new XMLHttpRequest();
        /* 設置超時時間 */
        if (options.timeout && options.timeout > 0) {
            xhr.timeout = options.timeout
        }
    
        return new Promise ( (resolve, reject) => {
            /* 添加超時回調 */
            xhr.ontimeout = () => reject && reject('請求超時');
            /* 成功回調 */
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        resolve && resolve(xhr.responseText);
                    } else {
                        reject && reject();
                    }
                }
            }
    
            /* 失敗回調 */
            xhr.onerror = err => reject && reject(err);
    
            /* 拼接參數 */
            let paramArr = [];
            let encodeData;
            if (data instanceof Object) {
                for (let key in data) {
                    paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) );
                }
                encodeData = paramArr.join('&');
            }
    
            /* get請求 */
            if (method === 'get') {
                const index = url.indexOf('?')
                if (index === -1) url += '?'
                else if (index !== url.length -1) url += '&'
                url += encodeData
            }
    
            /* 初始化請求 */
            xhr.open(method, url, async);
    
            /* get直接發送拼接的URL */
            if (method === 'get') xhr.send(null);
    
            if (method === 'post') {
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
                xhr.send(encodeData)
            }
        })
    }

總結： 關於網絡請求，通常經常使用的有四種：

• 一個是get，獲取網絡資源

• 而後是post，通常用於提交數據，提交數據的參數是放在請求的body裏面的

• delete，刪除

• put，標準的一個修改

關於Http的簡單請求和非簡單請求或者是跨域，在跨域時因爲瀏覽器的安全機制，涉及到一個問題關於在Ajax請求 ，是在請求以後仍是請求以前判斷跨域，這時候就須要瞭解一下簡單請求和複雜請求。

簡單請求是先把資源請求回來，而後再去判斷是否跨域。若是是一個複雜請求，瀏覽器會先去發送一個嗅探或者是欲請求（通常是一個option），先判斷是否跨域，若是不是跨域那就執行，若是是跨域那就直接不請求了。通常來說，若是get不修改它的Content-Type，那麼基本上都是簡單請求。post若是採用www-form的形式，也是一個簡單請求。

這篇文章主要是分享了Javascript中XMLHttpRequest對象的基本屬性和方法, 從實例化、初始化、發送和接受四個階段完成了Ajax網絡請求核心內容封裝。