js原生使用axios 原生js实现ajax步骤

转载

梦里忧郁 2024-01-03 15:03:37

文章标签 js原生使用axios ajax javascript 前端封装 文章分类 iOS 移动开发

1.什么是 ajax

ajax的出现刚好解决了传统方法的缺陷，ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使i网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.XMLHttpRequest 对象

XMLHttpRequest 对象是 ajax 的基础，XMLHttpRequest 用于在后台与服务器交换数据。也是实现页面更新的核心部分。

3.五步使用法

1.创建 XMLHttpRequest 对象

2.使用 open 方法设置和服务器的交互信息

3.设置发送的数据

4.注册事件

5.更新界面

下面是 get 请求和 post 请求的例子

get请求:

// 步骤一:创建异步对象
    var xhr = new XMLHttpRequest()
    // 步骤二:注册事件 onreadystatechange 当ajax请求完成后 会触发该事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var res = xhr.response // 接收响应结果
      }
    }
    // 步骤三:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态传递参数startName到服务端
    xhr.open('get', 'http://www.aaaaaaa/getmessage?id=1&username=小甜甜')
    // 步骤四:发送请求
    xhr.send()

post请求:

// 步骤一:创建异步对象
    var xhr = new XMLHttpRequest()

    // 步骤二:注册事件 onreadystatechange 当ajax请求完成后 会触发该事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var res = xhr.response // 接收响应结果
      }
    }
    // 步骤三:调用 open 设置请求方式及请求的 url 地址
    xhr.open('post', 'http://www.aaaaaaa/addmessage')
    // 步骤四:设置请求头
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    // 步骤五:发送请求
    xhr.send('name=cat&age=18')

4.封装成方法

01-测试这个封装的方法

// 测试这个封装的函数'
    let baseURL = 'http://www.aaaaaaa'
    ajax({
      method: 'GET',
      url: baseURL + '/getmessage',
      data: {
        id: 11
      },
      success: function (res) {
        console.log(res);
      }
    })

02-封装的方法

// 封装ajax/
    function ajax(options) {
      // 1.创建
      var xhr = new XMLHttpRequest()
      // 2.绑定事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          let obj = JSON.parse(xhr.response)
          options.success(obj)
        }
      }
      // 处理参数 Object => String
      let qs = objectToString(options.data)

      // 判断请求方式
      if (options.method.toUpperCase() == 'GET') {
        // 3.设置请求方式和资源路径
        xhr.open('GET', options.url + '?' + qs)
        // 4.发送
        xhr.send()

      } else if (options.method.toUpperCase() == 'POST') {
        // 3.设置请求方式和资源路径 + 请求头
        xhr.open('GET', options.url + '?' + qs)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        // 4.发送
        xhr.send()
      }
    }
    // 封装函数把对象转换成字符串
    let objectToString = (obj) => Object.keys(obj).map((item) => item + '=' + obj[item]).join('&')

注释:

1.onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

2.readyState：存有服务器响应的状态信息。