1.ajax是什么？

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
是一种能够与后端交互数据的技术。

2.原生JS实现方式

主要分为以下几步
其中请求方式分为两种，以下我们分开来写

get方式：
(如果需要传参的话，在url后面做字符串的拼接，比如’url?key=value’);
1.实例化ajax对象

var xhr = new XMLHttpRequest();

2.设置请求方式和请求地址

xhr.open('get', 'url')

3.发送请求

xhr.send();

4.注册回调函数

xhr.onload = function () {
                //请求成功，执行回调函数，执行响应体
                console.log(xhr.responseText) //相应内容
            }

get请求完整代码：

//1.实例化ajax对象
            var xhr = new XMLHttpRequest();
            //2.设置请求方式和地址
            xhr.open('get', 'url') //如果要传参的话，在url后面拼接
            //3.发送请求
            xhr.send();
            //4.注册回调函数
            xhr.onload = function () {
                //请求成功，执行回调函数，执行响应体
                console.log(xhr.responseText) //相应内容
            }

post方式 post方式与get不同的就是，需要设置请求头，以及请求参数写在send方法里

1.实例化ajax对象

var xhr = new XMLHttpRequest();

2.设置请求方式和请求地址

xhr.open('get', 'url')

3.设置请求头

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //固定语法

4.发送请求

xhr.send('请求参数');

5.注册回调函数

xhr.onload = function () {
                //请求成功，执行回调函数，执行响应体
                console.log(xhr.responseText) //相应内容
            }

post请求完整代码

//(1).实例化ajax对象
        var xhr = new XMLHttpRequest();
        //(2).设置请求方法和地址
        xhr.open('post', '接口url');
        //(3).设置请求头（post请求才需要设置）
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //(4).发送请求 ： 参数格式  'key=value' 
        xhr.send('请求参数');
        //(5).注册回调函数
        xhr.onload = function () {
            console.log(xhr.responseText);
        };

3.XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest
方法： 加粗为常用方法
abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键值对返回
open(“method”, “url”, async) 参数1:请求方法(get,post) 参数2:请求url地址 参数3:true异步/false同步 （ajax默认是异步请求true）

send(content) 向服务器发送请求，post方式的话带参数进去
setRequestHeader(“header”, “value”) 设置请求头 固定格式
onreadystatechange 当状态值发生改变时触发
readyState 查看状态值 0-实例对象被创建，但是没用调用open方法
1-open()方法已经被调用
2-send()方法已经被调用，并且头部(请求头成功发送，无错误)和状态已经可以获取
3-请求的数据下载中
4-下载操作完毕
responseText 服务器的相应数据
responseXML 服务器的响应,表示为XML.这个对象可解析为DOM对象
status 服务器的状态码(500,404,200…)
statusText HTTP 状态码的相应文本