前后端数据交互——ajax

前后端数据交互——ajax

1. 介绍

Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下，能够更新部分 网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的同时进行更新最新的数据，对比传统的请求而言，浏览器地址栏发送请求，是同步的（阻塞代码运行），当服务器很忙碌的时候会卡顿（等待），就造成了资源浪费

Ajax请求与传统请求的区别：
1.ajax数据交互的优点是 在请求数据的时候 不会阻塞后续js代码的执行
2.带有ajax代码的js代码的执行顺序
从上到下执行、遇到ajax代码后 先发送请求、在等待服务器响应数据的时间段内 继续向下执行其他js代码(异步）、等到服务器数据响应回来 再执行渲染数据的代码
所以但凡但凡但凡遇到动态渲染的效果 我们都应该使用ajax

2.原生ajax用法

本质上ajax其实是es5中提供的一个构造函数——XMLHttpRequest，ajax实现前后端数据交互的步骤如下

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }

ajax 的通信状态码/生命周期
ajax的通信状态码/生命周期有五个代表的含义各不相同
分别是
0：请求未初始化（ajax对象还没有声明出来）
1：已建立连接（ajax对象调用了open）
2：已发送请求（ajax对象调用了send）
3：服务器接收到请求并正在处理
4：服务器已响应数据
随着ajax数据交互的一步步推荐 通信状态码/生命周期会自动发生变化
每当通信状态码/生命周期 发生变化 就会触发一次onreadystatechange事件

在ajax中 我们可以通过ajax对象的一个属性 readyState 来获取通信状态码/生命周期
ajax对象.readyState
我们也可以通过ajax对象的一个属性 responseText 来获取响应数据
ajax对象.responseText
我们还可以通过ajax对象的一个属性 status 来获取响应状态码
ajax对象.status

在不同的请求方式下 请求提交数据的写法 也不同 我们主要了解一下 get 和 post两种请求方式的提交数据的写法

get请求提交数据 是在地址后面 添加 “?键名=键值&键名=键值&…”

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接  
​
//get请求提交数据 提交在地址后面
ajax.open("get"，"服务器url地址?键名=键值&键名=键值&...");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }
}

post请求提交数据 是写在 send方法中 将要提交的数据作为send方法的实参 传入

post请求在提交之前 需要单独设置请求头 使用ajax对象的setRequestHeader方法 就可以设置请求头了

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接  
​
//get请求提交数据 提交在地址后面
ajax.open("post"，"服务器url地址?键名=键值&键名=键值&...");
​
//设置请求头
ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json")
​
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
//将要提交的数据 作为实参 传入send方法中
ajax.send("键名=键值&键名=键值&..."/JSON.stringify({}));
//注意：如果设置为 application/json 提交的数据 必须是一个对象格式的json字符串
          
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }
}

在不提交数据的时候的 post请求 即使不设置请求头 也不会出问题 但是我们一般为了语义和提高容错率，都会选择设置请求头。