AJAX開發基礎及原生JS操作步驟

AJAX是什麼？

1. AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
2. AJAX = 異步 JavaScript和XML技術。
3. AJAX 是一種獨立於 Web 服務器軟件的瀏覽器技術。

AJAX用來做什麼？
前端頁面向服務器後端請求數據

AJAX用在哪裏？
主要在前端開發過程中，需要向服務器請求數據的時候。

AJAX核心？—操作XMLHttpRequest

實現AJAX操作步驟：

1. 創建XMLHttpRequest對象
2. 打開接口的連接，併發送請求
3. 獲取服務器返回的數據，DOM操作渲染到我們的網頁中

1、創建XMLHttpRequest對象

var _http;//聲明一個變量，存放XMLHttpRequest對象
if(window.XMLHttpRequest) {
    _http = new XMLHttpRequest();
} else {
    //創建IE瀏覽器中的XMLHttpRequest對象
     _http = new ActiveXObject("Microsoft.XMLHTTP");
}

if(window.XMLHttpRequest),是爲了防止一些瀏覽器既不支持ActiveX控件,也不支持XMLHttpRequest組件而進行的判斷.其中XMLHttpRequest也不是window對象的標準屬性,但可以用來判斷瀏覽器是否支持XMLHttpRequest組件.

else,用來判斷是否使用IE瀏覽器.其中ActiveXOject並不是Windows對象的標準屬性,而是IE瀏覽器中專有的屬性,可以用於判斷瀏覽器是否支持ActiveX控件.通常只有IE瀏覽器或以IE瀏覽器爲核心的瀏覽器才能支持Active控件.
2、打開接口的連接，併發送請求

_http.open(method,URL，flag,name,password);
_http.send();

代碼中的參數解釋如下所示:

method:指定http的請求的方式，一共有get、post、head、put、delete五種方法，常用的方法爲get和post。
URL：該參數用於指定HTTP請求的URL地址，可以是絕對URL，也可以是相對URL。
flag：該參數爲可選參數，參數值爲布爾型。該參數用於指定是否使用異步方式。true表示異步方式、false表示同步方式，默認爲true。
name：該參數爲可選參數，用於輸入用戶名。如果服務器需要驗證，則必須使用該參數。
password：該參數爲可選參數，用於輸入密碼。如果服務器需要驗證，則必須使用該參數。
3、獲取服務器返回的數據，DOM操作渲染到我們的網頁中

_http.onreadystatechange = function() {
        if(_http.readyState == 4 && _http.status == 200){
            var _content = _http.responseText;//接受數據
            console.log(_content);
            var _jsonArr = JSON.parse(_content);// 將字符串轉換成JSON對象
            console.log(_jsonArr);
            for(var i = 0; i < _jsonArr.length; i++) {
                var _li = document.createElement("li");
                _li.textContent = _jsonArr[i].className;
                _ct.appendChild(_li);
            }
        }
    }

從創建XMLHttpRequest對象開始，到發送數據、接收數據、XMLHttpRequest對象一共會經歷以下5中狀態。

   ⑴未初始化狀態。在創建完XMLHttpRequest對象時，該對象處於未初始化狀態，此時XMLHttpRequest對象的readyState屬性值爲0。

   ⑵初始化狀態。在創建完XMLHttpRequest對象後使用open()方法創建了HTTP請求時，該對象處於初始化狀態。此時XMLHttpRequest對象的readyState屬性值爲1。

   ⑶發送數據狀態。在初始化XMLHttpRequest對象後，使用send()方法發送數據時，該對象處於發送數據狀態，此時XMLHttpRequest對象的readyState屬性值爲2。

   ⑷接收數據狀態。Web服務器接收完數據並進行處理完畢之後，向客戶端傳送返回的結果。此時，XMLHttpRequest對象處於接收數據狀態，XMLHttpRequest對象的readyState屬性值爲3。

只有在XMLHttpRequest對象完成了以上5個步驟之後，纔可以獲取從服務器端返回的數據。因此，如果要獲得從服務器端返回的數據，就必須要先判斷XMLHttpRequest對象的狀態。