详细解析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/