Ajax 前后端数据交互

news2025/1/21 9:42:39

ajax 数据交互

今天又是奋斗的一天，行吧，来学习ajax

- ajax 数据交互
- - - 什么是ajax？
    - ajax的`优势`
    - ajax的使用
    - - 创建一个ajax对象
        配置这个对象
        发送请求
        接受返回过来的数据
    - ajax状态码
    - readystatechange
    - responseText
- ajax请求方式
- - 封装一个属于自己的ajax

在这里插入图片描述

什么是ajax？

ajax全称 async javascript and xml
具有前后端交互的能力，如果我们使用form表单向后端去提交数据，我们的页面在提交的时候将会刷新
ajax是客户端向服务端发送信息的工具，以及接受响应的工具！
ajax是一个 默认异步 执行机制的功能

ajax的`优势`

我总结起来归根于以下几点：

原生js就可以使用，不需要插件的支持
用户体验好，页面不需要刷新就可以更新数据
减少服务端和带宽的负担

ajax的使用

创建一个ajax对象 new XMLHttpRequest（）
配置这个对象–open
发送请求—send
接受相应 onload或者onreadystatechange事件监听

具体步骤看下面代码

创建一个ajax对象

  let xhr=new XMLHttpRequest()

配置这个对象

xhr.open(请求方式，请求地址，同步还是异步)

        xhr.open('get', 'https://www.baidu.com')
//第三个参数默认是异步

发送请求

xhr.send()

接受返回过来的数据

要想接收到响应，必须遵从下面条件:

本次HTTP请求是成功的，也就是我们之前所说的http状态吗为200~299
ajax对象也有自己的状态吗，用来表示本次ajax请求中各个阶段

 xhr.onload = () => {
            console.log(xhr.responseText);
        }
 
 //或者
 
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                console.log(xhr.responseText);
            }
        }

ajax状态码

ajax状态码—xhr.readyState

是用来表示一个ajax请求的全部过程中的某一个状态

readyState===0:表示初始化完成，也就是open方法还没执行
readyState===1：表示配置已经完成，也就是执行完open之后
readyState===2：表示send方法已经执行完毕
readyState===3：表示正在解析响应内容(只有一部分解析了)
readyState===4: 表示响应内容已经解析完成，可以在客户端使用了

当readyState===4的时候，我们就可以正常使用服务端的数据了。再配合http状态码为200~299

ajax对象中有一个是xhr.status，这个是用来记录请求的http状态码的

当两个条件都满足的时候，我们的请求就完成了！

readystatechange

在ajax对象中有一个事件，叫readystatechange
这个事件是专门来监听ajax对象的readystate的值的
只要值发生变化，就会触发这个事件
所以我们可以采用这个事件来监听readystate中的值

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')

xhr.send()

xhr.onreadyStateChange = function () {
  // 每次 readyState 改变的时候都会触发该事件
  // 我们就在这里判断 readyState 的值是不是到 4
  // 并且 http 的状态码是不是 200 ~ 299
  if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
    // 这里表示验证通过
    // 我们就可以获取服务端给我们响应的内容了
  }

responseText

记录服务端给我们的响应体内容的

ajax请求方式

再进入下面这个话题之前，我们先全局安装一个json-server，来利用json文件模拟后端阶段接口

npm i json-server -g

ajax请求方式有很多种，下面我总结了比较常用的五种

get —偏向于获取数据

post—偏向于提交数据

put —偏向于更新数据(整个覆盖)

patch —偏向于部分修改数据

delete —偏向于删除数据

以上五种，但工作中比较常用的是get和post

封装一个属于自己的ajax

我这里就简单封装，利用类似于这样的思路，封装完成,使用这个封装的ajax，请阅读一下下面这个手册--这个是配合json-server虚拟后端接口使用的

function changeObj(obj) {
    let arr = []
    for (i in obj) {
        arr.push(obj[i])
    }
    return arr
}

function shuAjax(options) {
    let obj1 = {
        url: '',
        method: 'GET',
        async: true,
        data: {},
        headers: {
            "Content-Type": "application/form-www-urlencoded",
            "Content-Type": "application/json"
        },
        success: function (res) {
            console.log(res);
        },
        error: function (err) {
            console.log(err);
        }
    }
    let { url, method, async, data, headers, success, error } = {
        ...obj1,
        ...options
    }

    switch (method.toUpperCase()) {
        case 'delete':
    }



    //首先设置基本的XML
    let xhr = new XMLHttpRequest()
    xhr.open(method, url, async)
    //设置请求头
    let newArr = changeObj(headers)
    for (let i = 0; i < newArr.length; i++) {
        xhr.setRequestHeader("Content-Type", newArr[i])
    }

    //作个判断，如果不是get和delete的话就要传值
    if (method.toUpperCase() === 'get' || method.toUpperCase === 'delete') {
        xhr.send()
    }
    else {
        xhr.send(JSON.stringify(data))
    }
    xhr.onload = () => {
        console.log(xhr.responseText);
    }
}

shuAjax使用方法：

格式：shuAjax({})

对象中的参数：

url 必须传的参数 --如果是要使用put PATCH delete需要在路由最后面加上所要访问的id值

method 可选不选为get

data 可选当用post PATCH put的时候传入一个对象形式的参数

使用示例

 <button id="btn1">get</button>
    <script src="./shuAjax.js"></script>
    <script>
        btn1.onclick = () => {
            shuAjax({
                url: 'http://localhost:3000/users/22',
                method: 'PUT',
                data: {
                    username: 'kang',
                    password: 1234556565
                }
            })
        }