原生Ajax

AJAX (Asynchronous Javascript And XML)

其实就是异步的javaScript和XML。用来进行前后端的数据交互

XML：这是html标签，XML格式是一样的 可以自定义 满足标记语言的格式就可以了。

​ AJAX不是一门新语言，是综合HTTP异步通信 、JS、XML、以及JSON等多种网络技术的一种编程模型。

​ AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。

以上是一些关于ajax的简介，其实ajax大致就是用来链接前端和后端，进行数据交互的方法。写在script标签中。下面展示一下主要的代码

        var xhr;
        //考虑到兼容问题，对象的创建将分为在IE浏览器下和非IE浏览器下两种情况
        if (window.XMLHttpRequest) {
        // 非IE
            xhr = new XMLHttpRequest();
        } else {
        // IE下
            xhr = new ActiveXObject("Microsoft.XMLHTTP")
        }
        // 给xhr绑定状态改变事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
            // 此处写在拿到数据后需要执行的功能
        }

        // xhr建立连接
        xhr.open('GET', './ProCitArea.php', true);
        // 
        xhr.send(null)

上面在给xhr对象绑定readyStateChange监听事件时，有用到一个条件判断。
下面解释一下两个条件分别是什么

ReadyState

readyState代表Ajax进行数据交互时的状态，主要分为四种。分别是

1. readyState = 0 时，对应常量为unset
   XMLHttpRequest实例已生成，
   但是open()方法并未被调用。.
2. readyState = 1 时，对应常量为opend
   send()方法未被调用，但可以被使用
   setRequestHeader()设定Http请求头
3. readyState = 2 时，对应常量为header_received
   send()方法已执行，且头信息和状态码已收到
4. readyState = 3 时，对应常量为loading
   正在接受服务器传来的body数据，
   若responseType属性是text或空字符串,
   responseText就会包含已收到的部分信息。
5. readyState = 4 时，对应常量为loading
   表示服务器数据完全接收，
   或本次接收失败

Status

表示客户端的响应状态码
1xx Info 提示性信息：

100 Continue 告诉客户端继续发送请求，数据没有传输完成

101 Switching Protocols 协议转换

2xx Successful 成功的响应消息 ：

200 OK 请求-响应成功

201 Created 创建成功

3xx Redirection 请求需要重定向到另一个URL：

301 Moved Permanently 请求的资源已被永久移走

303 See Other 另请参见另外一个网站

304 Not Modified 请求资源没有修改，请直接使用客户端缓存的资源，并不是报错，是指缓存命中了，也就是说请求的这个资源客户端缓存中存在

4xx Client Error 客户端错误：

400 Bad Request 无效的请求消息

402 Payment Required 请求资源没有付费

403 Forbidden 请求的资源不被允许访问

404 Not Found 请求的资源不存在

405 Method Not Allowed 请求方法不被服务器允许

414 Request-URI Too Long 请求的URI太大，无法解析
5xx Server Error 服务器端错误

500 Internal Server Error 服务器内部错误

503 Service Unavailable 服务器被攻击了

505 HTTP Version Not Supported 服务器版本太低

原文链接：https://blog.csdn.net/whz199511/article/details/81871692