Ajax请求的原理

什么是ajax？有什么作用？

Ajax（Asunchronous Javascript and XML）即异步的javascript和XML。
作用：是利用javascript在页面不被刷新、页面链接不被改变的情况下与服务器进行数据交换并进行页面更新渲染，可以使我们做到前后端分离的技术

原理：

发送ajax请求到页面的渲染其实可以简单分为三个部分：
1、发送请求
2、解析数据
3、渲染页面

1、发送请求，具体的解释，都放在代码注释里面的

// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
/*
 *调用xhr对象里面的open方法
 *这个方法包含三个参数
 *第一个参数：method：表示需要请求的方法例如：GET、POST
 *第二个参数：url：表示你要请求的后台的api地址
 *第三个参数：如果为true就表示异步请求，如果为false就表示同步请求 
 */
xhr.open("GET",'/ajax/',true);
// xhr的setRequestHeader方法可以用来设置请求头部
xhr.setRequestHeader("");
/*
*调用xhr里面的send方法进行发送请求
*send（）方法里面可以跟参数，注意，这个参数只是用于请求方法为post的请求，用来发送数据
*/
xhr.send();
/**
 * 然后就是调用我们的xhr里面的的onreadystatechange方法，进行响应请求
 * 这里会收到后台返回给我们的数据
 * 使用xhr.responseText进行一个接收数据
 */
xhr.onreadystatechange = function(){
    console.log(xhr.responseText);
}

2、解析内容，使用js进行服务器返回数据的解析

xhr.onreadystatechange = function(){
    // 使用xhr里面的responseText方法，拿到服务器返回给我们的数据
    let data = xhr.responseText;
    /**
     * 解析内容
     * 如果服务器返回给我们的是JSON格式的字符串
     * 我们就要使用JSON.parse()进行转换为我们想要的json对象
     * 如果是其他格式也是一样的处理格式
     */
    let myData = JSON.parse(data);
    
}

3、渲染页面，我们通过以上拿到了我们的数据，用拿到的数据更新我们当前页面的内容

/*
* 渲染页面
* 以上我们拿到了服务器返回给我们的数据之后
* 我们就可以进行对页面的更新
*/
document.querySelector("div").innerHTML = myData

总结：这大致就是ajax工作原理的流程，谢谢~~