Ajax 前后端数据交互

ajax 数据交互

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

什么是ajax？

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

ajax的优势

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

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

ajax的使用

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

具体步骤看下面代码

创建一个ajax对象

  let xhr=new XMLHttpRequest()

配置这个对象

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

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

发送请求

xhr.send()

接受返回过来的数据

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

1. 本次HTTP请求是成功的，也就是我们之前所说的http状态吗为200~299
2. 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
                }
            })
        }