【JS】Ajax的基本概念

情景

当用户在浏览器地址栏输入 我是乱打的.com 并点击跳转按钮时，浏览器会向服务器发送一条请求，服务器接受到浏览器发送的请求之后，会对这个请求进行响应，然后浏览器把响应数据渲染到页面上，这样用户就看到自己想要看的网页了。

那假如我的这个网页是一个实时投票网页，我要是想要获得最新数据，就得不停地刷新网页，不停地让浏览器重新发送请求，再根据响应数据重新渲染整个页面，可是事实上，我整个网页改变的只有我的票数那么一小个地方，没必要整个页面都重新渲染一次，这样一想，用上面的这种方法太浪费资源了，那么有没有办法能让我不重新加载整个页面，而只更新局部网页内容呢？

答案就是AJAX了。

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

---

JavaScript不具有网络通信能力，但是可以操控网页。

浏览器具有网络通信能力（不然我们也不会用浏览器来上网了），但是无法获知用户需求。

因此我们（用户）通过JavaScript操控网页，来告知浏览器用户的需求（想更新数据），然后浏览器根据需求向后台发送请求，获取数据。

浏览器如何与服务器取得联系呢（怎么把请求发送到服务器？）
使用浏览器内建的 XMLHttpRequest 构造函数。

我们可以通过JavaScript操控XMLHttpRequest来控制浏览器向服务器发送请求。

XMLHttpRequest

既然是一个构造函数，也就是说它可以创建新的实例对象，也就是说它有自己的属性以及方法。

//创建实例
const xhr = new XMLHttpRequest();
console.log(xhr);

HTTP协议状态码

方法：send（请求体）

方法：open（请求方式，URL，是否异步）

请求方式就是POST、GET这些。
是否异步：true为异步，false为同步。

属性：readyState

这个属性会记录请求响应处于哪个过程。

1. 0表示未调用open()方法；
2. 1表示调用了open()方法，但是未调用send()方法；
3. 2表示发送请求但是还没收到响应；
4. 3表示收到了部分响应；
5. 4表示响应都接收完了；

看上面的那张图片，因为我们只是创建了一个实例对象，所以此时它的readyState属性的值为0。

该属性的数字是从头到尾在变化的。

所以一次成功的网页请求应该是请求成功了响应也成功了。也就是说，当该属性的值为4的时候，我们就可以把响应内容显示在页面上了。

那我们怎么知道这个属性的值什么时候变为4呢？
readyState属性值发生变化时会触发readystatechange事件，所以我们可以使用onreadystatechange来监听readystate属性值的变化。

实例

每次点击页面中的按钮，都会在页面中新增一个点击时间。

<div id="content">

</div>
<button onclick="ajax()">点击我获取更多数据</button>
<script src="./ajax.js"></script>

function ajax() {
    //获取页面中的元素
    const div = document.getElementById('content');
    //创建实例
    let xhr = new XMLHttpRequest();
    //定义请求
    xhr.open('get', './text.php', true);
    //监控readyState属性值的变化
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {//成功接收响应不代表成功接收到文件了
            if (xhr.status === 200) {//HTTP状态码为404的时候就是成功响应但是找不到文件
                //接受到的文本内容存在responseText
                div.innerHTML += `<p>${xhr.responseText}</p>`;
            }
        }
    }
    //发送请求
    xhr.send(null);//这个不需要发送请求体
}