AJAX技术是 Async Javascript And XML，用JS发请求和收响应就是Ajax的全部内容

AJAX是浏览器上的功能

浏览器可以发请求，收响应
浏览器在window上加了一个 XMLHttpRequest 函数
用这个构造函数（类）可以构造出一个对象
JS通过它实现发请求，收响应

AJAX 的特点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

AJAX 的缺点

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

一个请求的一生

想要用 JS 发起一个AJAX请求很简单，一共 4 步

创建一个XMLHTTPRequest对象

let request = new XMLHttpRequest()

设置请求参数

request.open('GET', '/style.css')

3 监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.response)
  }
};

4发送请求

request.send()

readyState

请求在不同阶段会有不同的readyState

请求的不同阶段	readyState
let request = new XMLHttpRequest()	0
request.open('GET', '/style.css')	1
request.send()	2
第一个响应信息出现在浏览器	3
所有响应下载完成	4

虽然request.readyState可以判断是否下载完，但是无法判断加载成功与否

request.status >= 200 && request.status < 300)执行否则失败

onreadystatechange事件

也就是ajax请求的过程

const request = new XMLHttpRequest();
    request.open('GET', '/style.css');
    request.onreadystatechange = () => {
        console.log(request.readyState)
        //只能判断是否下载成功，不知是否加载成功2xx 失败4xx 5xx
        if (request.readyState === 4) {
            console.log('下载完成')
            if (request.status >= 200 && request.status < 300) {
                // 成功
            } else {
               // 失败
            }
        }
    }
    request.send()

AJAX总结