Web前端Javascript筆記（8）Ajax前後端交互

認識Ajax

    全名Asynchronous Javascript and XML（異步JavaScript和XML），節省用戶操作時間，提高用戶體驗，減少數據請求，傳輸獲取數據。Ajax相當於前後臺數據交互的搬運工

xml數據傳輸格式：

優點:

1. 種類豐富

2. 傳輸量大

缺點：

1. 解析麻煩

2. 不太適合輕量級數據

json數據傳輸格式：（移動端）

優點：
1. 輕量級數據

2. 解析比較輕鬆

缺點：

1. 數據種類少

2. 傳輸數據量少

同步：阻塞，當前程序的運行，必須等前一個程序運行完以後，才能運行。

異步：當前程序的運行不用等待前一個程序

<script>
        window.onload = function () {
            let tag_btn = document.getElementById("btn1");
            tag_btn.onclick = function () {
                let ajax = null;
                if(window.XMLHttpRequest)   // 做瀏覽器兼容 IE8以下不兼容
                {
                    ajax = new XMLHttpRequest();  // 創建一個Ajax對象
                }
                else
                {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 調用open(method, url, bool)方法
                // 參數： method: 請求方式  post, get
                // 參數： url: 請求的文件地址
                // 參數： bool: true 異步  false: 同步
                ajax.open("get", "../data/test.txt", true);
                // 調用send()方法，發送請求
                ajax.send();
                // 等待數據響應
                ajax.onreadystatechange = function () {
                    if (ajax.readyState === 4)
                    {
                        alert(ajax.responseText);
                    }
                }
            }
        }
</script>

新的ajax兼容方法：

try...catch{}

<script>
        window.onload = function () {
            let tag_btn = document.getElementById("btn1");
            tag_btn.onclick = function () {
                let ajax = null;
                try   // 做瀏覽器兼容 IE8以下不兼容
                {
                    ajax = new XMLHttpRequest();  // 創建一個Ajax對象
                    // throw new Error("異常信息");  // 同時可以拋出異常
                }
                catch (e) {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 調用open(method, url, bool)方法
                // 參數： method: 請求方式  post, get
                // 參數： url: 請求的文件地址
                // 參數： bool: true 異步  false: 同步
                ajax.open("get", "../data/test.txt", true);
                // 調用send()方法，發送請求
                ajax.send();
                // 等待數據響應
                ajax.onreadystatechange = function () {
                    if (ajax.readyState === 4)
                    {
                        alert(ajax.responseText);
                    }
                }
            }
        }
</script>

Ajax的onreadyStateExchange

在ajax中，onreadyStateExchange是一個事件，當readyState發生變化的時候，會觸發這一事件，readyState一共有5個值，0~4

0：(初始化)還沒有調用open()方法 

1：（載入）已調用send()方法，正在發送請求

2： (載入完成)send()方法完成，已收全部響應內容

3：（解析）正在解析響應內容

4： （完成）響應內容解析完成，可以在客戶端調用了

responseText: 以文本的格式返回數據

responseXML：以XML數據格式返回數據

status狀態碼：

200：下載成功

404：不存在

ajax中get與post請求：

get請求： 將數據拼接到url後面進行提交，參數通過查詢字符串的方式傳遞，這樣不安全，且地址欄的數據大小是有限的(最大2k),所以無法完成上傳資源。

post請求：不把數據拼接到url後面，通過瀏覽器內進行提交，更加安全。理論上沒有大小限制，適合完成上傳任務。

ajax函數的封裝

爲了使得ajax能夠適應各種請求，所以對ajax進行封裝

// ajax請求進行封裝
function $ajax({method, url, data}) {
    let ajax = null;
    try   // 做瀏覽器兼容 IE8以下不兼容
    {
        ajax = new XMLHttpRequest();  // 創建一個Ajax對象
    }
    catch (e) {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (method === "get" && data)
    {
        url += "?" + data;   // get方法需要將請求參數拼接到url上面
    }
    ajax.open(method, url, true);

    if (method === "get")
    {
        ajax.send();
    }
    else
    {
        // post方法的話需要設置請求頭
        ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        ajax.send(data);
    }
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4)
        {
            if (ajax.status === 200)
            {
                alert(ajax.responseText);
            }
            else
            {
                alert("Error: " + ajax.status);
            }
        }
    };
}

回調函數：

不同的下載需求，對於數據的處理是不同的，所以需要寫一段專門處理數據的代碼，這段代碼可以稱爲回調函數，回調函數的作用就是將一段代碼作爲參數，傳遞到函數裏面，在合適的地方進行調用。

// ajax請求進行封裝
function $ajax({method, url, data, success, error}) {
    let ajax = null;
    try   // 做瀏覽器兼容 IE8以下不兼容
    {
        ajax = new XMLHttpRequest();  // 創建一個Ajax對象
    }
    catch (e) {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (method === "get" && data)
    {
        url += "?" + data;   // get方法需要將請求參數拼接到url上面
    }
    ajax.open(method, url, true);

    if (method === "get")
    {
        ajax.send();
    }
    else
    {
        // post方法的話需要設置請求頭
        ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        ajax.send(data);
    }
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4)
        {
            if (ajax.status === 200)
            {
                if (success)    // 判斷如果傳入了回調函數，則調用回調函數
                {
                    success(ajax.responseText);    // 執行下載成功的回調函數
                }
            }
            else
            {
                if (error)   // 判斷是否傳入了下載失敗的回調函數
                {
                    error(ajax.status);    // 調用回調函數
                }
            }
        }
    };
}

JSON對象

數據在前端後端之間進行傳輸，需要將前端，後端中的數據結構，打包成一種傳輸效率更高的形式，即字符串。

系統提供了JSON對象，用於抓換JSON格式的數據

1. stringify()：用於將JSON格式的數據轉化爲JSON格式的字符串

2. parse()：用於將JSON格式的字符串轉化爲對應的格式

<script>
        let arr = [1,2,3,"hello"];
        let new_data = JSON.stringify(arr);
        alert(typeof new_data);

        let str = '[1,2,3,"hhh"]';
        let new_arr = JSON.parse(str);
        alert(new_arr);

        let obj = {
            name: "li",
            age: 22,
            sex: "female"
        };
        let new_arr1 = JSON.stringify(obj);
        alert(new_arr1);
</script>