原生js简单封装自用ajax,小项目用

文章发布于2020年05月02日 18:03, 归类于: 前端
var Ajax = {
  xhr: function () {
    var xhr = null
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    }
    else {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (!xhr) {
      console.log("不支持ajax")
    }

    return xhr
  },
  get: function (url, query, success, fail) {
    var xhr = this.xhr()
    if (!xhr) return false
    xhr.open('GET', url + '?' + this.objToStr(query), true);
    xhr.onreadystatechange = function () {
      // 请求已完成
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 304) {
          success && success.call(JSON.parse(xhr.responseText));
        } else {
          fail && fail.call(JSON.parse(xhr.responseText));
        }
      }
    }
    xhr.send();
  },
  // data应为'a=a1&b=b1'这种字符串格式
  post: function (url, data, success, fail) {
    var xhr = this.xhr()
    if (!xhr) return false
    xhr.open('POST', url, true);
    // 添加http头,发送信息至服务器时内容编码类型
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 304) {
          success && success.call(JSON.parse(xhr.responseText));
        } else {
          fail && fail.call(JSON.parse(xhr.responseText));
        }
      }
    }

    xhr.send(this.objToStr(data));
  },
  // data 为formdata
  upload: function (url, data, success, fail) {
    var xhr = this.xhr()
    if (!xhr) return false
    xhr.open('POST', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 304) {
          success && success.call(JSON.parse(xhr.responseText));
        } else {
          fail && fail.call(JSON.parse(xhr.responseText));
        }
      }
    }

    xhr.send(data);
  },
  // url编码,对象转字符格式:返回a=1&b=2
  objToStr: function (obj) {
    let data = ''
    for (let key in obj) {
      data += encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) + '&'
    }
    // 将最后一个&号替换删除
    data = data.replace(/(.*)&/, '$1')
    return data
  }
}

部分代码copy于网上,响应成功和失败的回调函数使用this来操作返回的内容,返回的内容必须是Json字符串。

get请求

Ajax.get('/test', {
  name: '杨xxx',
  id: 123
},function(){
  // res
  console.log(this)
},function(){
  // err
  console.log(this)
})

post请求

Ajax.post('/test', {
  name: '杨xxx',
  id: 123
},function(){
  // res
  console.log(this)
},function(){
  // err
  console.log(this)
})

upload请求

var formData = new FormData();
formData.append("name", '杨xxx');
formData.append("id", '123');
Ajax.upload('/test', formData ,function(){
  // res
  console.log(this)
},function(){
  // err
  console.log(this)
})

补充

直接打印formData,可能打印出空的内容,正确打印方法:

var formData = new FormData();
formData.append("name", '杨xxx'); 
console.log(formData.get("name"))

转载请注明来源:《 原生js简单封装自用ajax,小项目用》- rojerYong's Blog

文章链接:https://www.eoway.cn /article/1588413788.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:第一篇说说 下一篇:git强制拉取代码覆盖本地代码