詳細解析Ajax的使用之向服務器發送GET請求

詳細解析Ajax的使用之向服務器發送GET請求

前面一篇博客我們講到了如何使用form表單像服務器發送請求，但是請求方式是同步的，效率太低，現在我們講一下如何使用Ajax的技術向服務器發送異步請求。

HTML代碼：

    <h1>ajax的get請求</h1>
    <button id="btn">獲取數據</button>
    <p>姓名：<span id="user"></span></p>
    <p>年齡：<span id="age"></span></p>

JavaScript代碼：

    var oBtn = document.getElementById("btn");
    var oUser = document.getElementById("user");
    var oAge = document.getElementById("age");
    // 1.初始化請求對象
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
        console.log(xhr.readyState);
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2.發送請求   
    // 2-1.設置請求的方式 地址等
    xhr.open("GET", "data.json", true);
    console.log(xhr.readyState);
    // 2-2.發送請求
    xhr.send();
    console.log(xhr.readyState);

    xhr.onreadystatechange = function () {
        oBtn.onclick = function () {
            console.log(xhr.readyState);
            if (xhr.readyState == 4 && xhr.status == 200) {    
                var obj=JSON.parse(xhr.responseText);
                // console.log(obj);
                // console.log(JSON.stringify(obj));
                oUser.innerText=obj.name;
                oAge.innerText=obj.age;
            }
        }
    }

    // onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
    // readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

    // 0: 請求未初始化
    // 1: 服務器連接已建立
    // 2: 請求已接收
    // 3: 請求處理中
    // 4: 請求已完成，且響應已就緒

JSON數據：

    {
        "name":"張三",
        "age":20
    }

注意： get請求對數據的大小有限制，其次是發送的數據會拼接在URL後面，所以安全性低。

視頻講解鏈接：
https://www.bilibili.com/video/BV1Lt4y1y7Ae/