ajax原生的方法

网上看了不少原生的写法，感觉或多或少都有点问题。后面想到可能是写了没有自己测试过。于是就一边参照着，一边自己改下。当然最重要都是测试。没经过测试都代码终究是存在问题的。

第一版get方法

_ajax = (url, data, call, err) => {
    console.log(url, data)
    let xml = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    let arr = [];
    for (let i in data) {
      arr.push(i + '=' + data[i]);
    }
    url = url + '?' + arr.join('&');
    xml.open('get', url);
    xml.send();
    xml.onreadystatechange = function() {
      let res;
      if ( xml.status === 200 || xml.status === 304) {
        res = JSON.parse(xml.response);
        call && call(res);
      } else {
        const errMessage = { //错误的处理
          errStatus: xml.status,
          errMsg: xml.statusText
        }
        err && err(errMessage);
      }

    }
  }

调用方法：

const a = { operation: 0, b: 1 };
    this._ajax(' /ofm/storeRules/print', a, function(res) {
      console.log(res, 'success');
    }, function(err) {
      console.log(err, 'error');
    });

　　

 

post

_ajax = (url, data, call, err) => {
    console.log(url, data)
    let xml = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    let arr = [];
    for (let i in data) {
      arr.push(i + '=' + data[i]);
    }
    xml.open('post', url, true);
    xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xml.send(arr.join('&'));
    xml.onreadystatechange = function() {
      let res;
      console.log(xml)
      if ( xml.status === 200 || xml.status === 304) {
        res = JSON.parse(xml.response);
        call && call(res);
      } else {
        const errMessage = { //错误的处理
          errStatus: xml.status,
          errMsg: xml.statusText
        }
        err && err(errMessage);
      }

    }
  }

 post这边的请求头需要单独设置，一般设置为

('Content-Type', 'application/x-www-form-urlencoded')。但是可能存在不同的情况，具体和后端对接修改。

使用

const a = {
      accesstoken: '***'
    };

　　this._ajax('https://cnodejs.org/api/v1/accesstoken', a, function(res) {

　　　　console.log(res, 'success');

　　}, function(err) {

　　　　console.log(err, 'error');

　　});

 

经过封装的方法

_ajax = (options) => {
    var opt = {
      url: '',
      type: 'get',
      data: {},
      success: function() { },
      error: function() { },
    };
    opt = Object.assign({}, opt, options);
    console.log(opt, 'opt')
    let xml = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    let arr = [];
    let data = opt.data;
    for (let i in data) {
      arr.push(i + '=' + data[i]);
    }

    if (opt.url) {
      let url = opt.url;
      if (opt.type == 'get') {
        url = url + '?' + arr.join('&');
        xml.open('get', url);
        xml.send();
      }
      if (opt.type == 'post') {
        xml.open('post', url, true);
        xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xml.send(arr.join('&'));
      }

      xml.onreadystatechange = function() {
        let res;
        if (xml.status === 200 || xml.status === 304) {
          if (opt.success && opt.success instanceof Function) {
            res = JSON.parse(xml.response);
            opt.success.call(xml, res);
          }

        } else {
          if (opt.error && opt.error instanceof Function) {
            const errMessage = { //错误的处理
              errStatus: xml.status,
              errMsg: xml.statusText
            }
            opt.error.call(xml, errMessage)
          }

        }

      }
    }

  }

 

调用：

const a = {
      accesstoken: '******'
    };
    this._ajax({
      url: 'https://cnodejs.org/api/v1/accesstoken',
      data: a,
      type: 'post',
      success: function(res) {
        console.log(res, 'success');
      },
      error: function(err) {
        console.log(err, 'error');
      }
    });