Ajax的Get和Post请求封装_封装一个ajax请求库实现get和post方法

// ajax的get请求的封装
 
 
 
  ajaxGet({
    url:"http://10.11.55.86:3000/login",
    data:{
      username: "admin1",
      password: 12345
    },
    success: function(xhr){
      const res = JSON.parse(xhr.responseText);
      if( res.code === 0 ){
        console.log("登录成功，跳转到首页")
      }else{
        alert(res.msg);
        console.log(res.msg)
        console.log("表单已被清空，请重新输入相关信息")
      }
    },
    error:function(code){
      console.log("请求失败了", code)
    }
  });
 
  // 函数定义时，接收数据
  // 函数执行时，发送数据
 
 
  function ajaxGet( {url, data={}, success, error} ){
    // 解析请求时要携带的数据
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`;
    }
    // 拼接到url
    url += "?" + str.slice(0,-1);
    // 开启ajax
    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();
    xhr.onload = function(){
      if(xhr.status === 200){
        // 请求成功，执行成功功能
        success(xhr);
      }else{
        // 请求失败，执行失败功能
        error(xhr.status);
      }
    }
  }

const url = "http://10.11.55.86:3000/adduser";
 
  // token
  // uName：用户名
  // tel：手机号，登录账号
  // 密码为手机号后6位
 
  const o = JSON.parse(localStorage.getItem("userData")) || {};
 
  ajaxPost({
    url,
    data:{
      token: o.token,
      tel:"17600901917",
      uName:"张三三"
    },
    success(xhr){
      console.log(xhr.responseText);
    }
  });
 
 
  function ajaxPost( {url, data={}, success, error} ){
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`;
    }
    const xhr = new XMLHttpRequest;
    // 1. open的第一个参数：post
    xhr.open("post", url, true);
    // 2. 修改请求头信息中的content-type类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 3. 发送的数据的位置：不再是url后了，而是在send的参数内
    // 名=值&名=值
    xhr.send(str.slice(0, -1));
    xhr.onload = function(){
      if(xhr.status === 200){
        success(xhr);
      }else{
        error(xhr.status);
      }
    }
  }