Ajax的js原生實現

一、Ajax簡介

Ajax全稱是，Asynchronous JavaScript + XML（異步JavaScript和XML）, 其本身不是一種新技術，是現有技術集合成的一個方法。當使用結合了這些技術的AJAX模型以後， 網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面。這使得程序能夠更快地迴應用戶的操作。

Ajax的工作原理相當於在用戶和服務器之間加了—箇中間層(AJAX引擎)，使用戶操作與服務器響應異步化。

二、用到的技術

1.使用CSS和XHTML or HTML頁面顯示

2. 使用DOM模型來交互和動態顯示

3.使用XMLHttpRequest來和服務器進行異步通信

4.使用javascript來綁定和調用

AJAX 的核心是 XMLHttpRequest 對象，而且不同的瀏覽器創建 XMLHttpRequest 對象的方法是有差異的

IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名爲 XMLHttpRequest 的 JavaScript 內建對象

二、XMLHttpReques

XMLHttpRequest 對象用於在後臺與服務器交換數據，它允許網頁在不影響用戶的操作的情況下更新頁面的局部內容。

構造函數：

XMLHttpRequest()

該構造函數用於初始化一個 XMLHttpRequest 對象。在調用其他方法之前，必須先調用該構造函數，或通過其他方式間接得到一個 XMLHttpRequest 對象。

常用屬性：

1.XMLHttpRequest.onreadystatechange

當 readyState 屬性發生變化時調用的 EventHandler

2.XMLHttpRequest.readyState 

返回 一個無符號短整型（unsigned short）數字，代表請求的狀態碼

3.XMLHttpRequest.responseText 

返回一個 DOMString，該 DOMString 包含對請求的響應，如果請求未成功或尚未發送，則返回 null

4.XMLHttpRequest.status 

返回一個無符號短整型（unsigned short）數字，代表請求的響應狀態

常用方法：

1.XMLHttpRequest.abort()

如果請求已被髮送，則立刻中止請求

2.XMLHttpRequest.open()

初始化一個請求。該方法只能在 JavaScript 代碼中使用

3.XMLHttpRequest.send()

發送請求。如果請求是異步的（默認），那麼該方法將在請求發送後立即返回

4.XMLHttpRequest.setRequestHeader()

設置 HTTP 請求頭的值。您必須在 open() 之後、send() 之前調用 setRequestHeader() 方法

三、js原生實現

實現AJAX，有如下四步：

1.創建XMLHttpRequest對象。

2.設置請求方式及參數。

3.調用回調函數（非異步無）。

4.發送請求。

//第一步：創建XMLHttpRequest對象
var xmlHttp = new XMLHttpRequest();

//第二步：初始化一個請求，設置請求方式及參數,true表示異步處理
var url = 'xxxxxx';
xmlHttp.open('POST', url, true);

//第三步：調用回調函數
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState === 4) {
        if (xmlHttp.status === 200) {
            console.log(xmlHttp.responseText);
        } else {
            alert("ajax服務器返回錯誤！");
        }
    }
}

//發送請求
var params = 'userName=' + document.getElementsByName('userName')[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value;
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(params);

本文章參考了https://blog.csdn.net/weixin_37580235/article/details/81459282部分內容。