AJAX-异步的JS和XML一、AJAX 1.1 定义与优缺点 AJAX是异步的JS和XML（Asynchronous

一、 AJAX 定义与优缺点

AJAX是异步的JS和XML（Asynchronous Javascript And XML）。

简单来说，就是使用 window 下的 XMLHttpRequest 对象，与服务器通信。

可以实现，无刷新获取数据（不重新刷新页面的情况下，与服务器交换数据、更新页面）。

ajax的缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好

ajax的优点

可以不刷新页面就与服务器进行通讯
允许根据用户事件来更新部分页面的内容

二、 AJAX 基本使用

2.1 AJAX 基本使用

1.创建对象
2.初始化，设置请求方法和URL
3.发送
4.事件绑定，处理服务端返回结果

<button id="btn">获取省分</button>
<button>取消按钮</button>

<script>
    const btn = document.getElementsByTagName('button')[0];
    btn.onclick = () => {
        // 1.创建对象
        const xhr = new XMLHttpRequest();
        // 2.初始化，设置请求方法和url
        xhr.open('GET', 'http://www.nmc.cn/rest/province/all?_=');
        // 3.发送
        xhr.send();
        // 4.事件绑定，处理服务端返回结果
        xhr.onreadystatechange = () => {
            // readyState 是 xhr 对象属性，表示状态 值 0 1 2 3 4
            if(xhr.readyState === 4) {
                // 判断响应状态码
                if(xhr.status >= 200 && xhr.status < 300) {
                    console.log('状态码', xhr.status);
                    console.log('状态字符串', xhr.statusText);
                    console.log('响应头', xhr.getAllResponseHeaders());
                    console.log('响应体', xhr.response);
                }
            }
        }
    }
</script>

2.2 AJAX 其他常用设置

（1）AJAX 设置请求头

设置请求头，身份校验

也可自定义，需要后端配置

// 设置请求头
// Content-Type 设置请求体内容的，值为 参数查询字符串内容-固定写法
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 可自定义，需要后端配合 否则会报错
xhr。setRequ

（2）AJAX 请求超时和网络异常

// 设置超时，2s还没成功 回调
xhr.timeout = 2000;
xhr.ontimeout = () => {
    alert('请稍后重试');
}

// 网络异常-如，没网
xhr.onerror = () => {
    alert('网络异常');
}

（3）取消请求

btn[1].onclickc = () => {
    xhr.abort();
}

请求重复问题，可以使用变量解决

let xhr = null;
let isSending = false;

// 事件触发，判断标识变量 如有再发送的请求，就取消 创建新的请求
if(isSending) xhr.abort();
xhr = new XMLHttpRequest();

// 修改标识变量的值
isSending = true;

三、扩展

3.1 XML

XML 可扩展标记语言。是被设计用来传输和存储数据。

现在已经被JSON取代了。（更简洁，且数据处理更加容易、灵活）

XML 与 HTML（超文本标记语言）类似，不同的是 HTML 是预定义标签，XML 全是自定义标签用来表示数据

3.2 http协议

超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，信息是明文传输。

http与https

3.3 axios

Axios，是一个基于promise [5]的网络请求库，作用于node.js和浏览器中

可以理解为 axios 是 ajax 的一种封装，它基于 Promise 实现对原生的 XHR 的封装，提供了更丰富的功能和更好的用户体验

注：xhr注入技术是通过XMLHttpRequest来获取javascript的。

axios详情

AJAX-异步的JS和XML