JavaScript AjaxAjax 什么是 Ajax Ajax 基本用法 XMLHttpRequest Ajax 的

Ajax

什么是 Ajax

- Ajax 是 Asynchronous JavaScript and XML (异步 JavaScript 和 XML) 的简写
- Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程装，不会阻止当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
- XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
- XML 现在已经不怎么用了，现在比较常用的是 JSON
- Ajax 其实就是浏览器与服务器之间的一种异步通信方式
- 使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新

Ajax 基本用法

XMLHttpRequest

- Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，他是一个构造函数
- 不论是 XMLHttpRequest，还是 Ajax，都没有具体的某种数据格式绑定

Ajax 的使用步骤

1. 创建 XMLHttpRequest
   - const xhr = new XMLHttpRequest();
2. 监听事件，处理响应
   - xhr.onreadystatechange = ()=>{}
   - xhr.addEventListener('onreadystatechange',()=>{},false)
3. 准备发送请求 open
   - xhr.open('HTTP方法/请求方法','url',是否异步(boole));
   - 不是异步会很糟糕
4. 发送请求 send
   - xhr.send(null);
   - send传递参数可以为空，值设为 Null 可以解决兼容问题

```js
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;

        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            console.log(xhr.responseText);
        }
    }

    xhr.open('GET', 'url', true);

    xhr.send(null);
```

readystatechange 事件监听 readyState 这个状态的变化

- 一共有 0~4个值
- 0：未初始化，尚未调用 open()
- 1：启动，已经调用 open(), 但尚未调用 send()
- 2: 发送，已经调用 send(), 但尚未接收到响应
- 3: 接收，已经接收到部分响应数据
- 4: 完成，已经接收到全部响应数据，而且已经可以在浏览器中使用了