【原生Ajax的封装】简单易理解

Shaw Jie�

已于 2022-10-10 09:43:18 修改

阅读量363

点赞数 2

文章标签： ajax 前端 json

于 2022-09-30 17:01:45 首次发布

本文链接：https://blog.csdn.net/Shaw_Jie/article/details/127126376

版权

这篇博客详细介绍了如何封装Ajax请求，包括GET和POST两种方式，以及如何处理请求参数和响应数据。通过创建XMLHttpRequest对象，设置请求头，处理请求状态，实现了数据的异步交互。同时，文章强调了错误处理和数据格式化的重要性。

摘要由CSDN通过智能技术生成

第一步、先确定调用接口所需的参数

 // 确定调用需要的参数
 ajax({
   method: "get" || "post",
   url: "",
   data: "",
   type: "application/json" || "application/x-www-form-urlencoded",
   success: function (result) {
     console.log(result);
   },
   error: function (result) {
     console.log(result);
   }
 })

第二步、封装Ajax请求，判断请求类型，并作出相应的逻辑操作

function ajax(options) {
  // 1.创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 2.连接服务器发送请求
  //   判断请求类型
  if (options.method.toLowerCase() == "get") {
    // 初始化一个参数
    let params = "";
    // 遍历传过来的对象,键和值用"="相连，键值对用"&"相连，组成一个字符串
    for (var key in options.data) {
      params += key + "=" + options.data[key] + "&";
    }
    // 在由传过来的对象组成的字符串前加"?"，以便拼接在url传递参数
    params = "?" + params.slice(0, -1);
    // 把参数拼接到url后面，发起open连接
    xhr.open("GET", options.url + params);
    xhr.send(null);
  } else if (options.method.toLowerCase() == "post") {
    // 发起open连接
    xhr.open("POST", options.url);
    // 设置请求头
    xhr.setRequestHeader("Content-type", options.type);
    // 把传过来的数据对象，转为JSON字符串
    xhr.send(JSON.stringify(options.data));
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        // 如果请求成功，把数据转成对象，传给成功的回调函数
        options.success(JSON.parse(xhr.response));
      } else {
        options.error(xhr);
      }
    }
  };
}

大功告成！