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\');
      }
    });