原生AJAXパッケージのシンプル実現

元の生のjsに帰って、ネット上で見たAJAXのカプセル化、そして改善してきました。

var ajaxHelper = {
  /*1.0               */
  makeXHR: function () {
    //        
    var xmlHttp = false;
    //       
    var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"];
    //          XMLHttpRequest，    ，       ，      
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
      //  ，                ，    ，        
    else if (window.ActiveXObject) {
      for (i = 0; i < xmlHttpObj.length; i++) {
        xmlHttp = new ActiveXObject(xmlHttpObj[i]);
        if (xmlHttp) {
          break;
        }
      }
    }
    //               ，     ，       ，    false
    return xmlHttp ? xmlHttp : false;
  },
  /*2.0   Ajax  */
  doAjax: function (method, url, data, isAyn, callback, type) {
    method = method.toLowerCase();
    //2.1      
    var xhr = this.makeXHR();
    //2.2      （   get，  url  ，    ，   ）
    xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn);
    //2.3      (get/post)，        
    if (method == "get") {
      xhr.setRequestHeader("If-Modified-Since", 0);
    } else {
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    //2.4      
    xhr.onreadystatechange = function () {
      //                  
      if (xhr.readyState == 4) {
        //         
        if (xhr.status == 200) {
          if (type.toLowerCase() == "json") {
            var ret = {};
            try {
              if (typeof JSON != "undefined") {
                ret = JSON.parse(xhr.responseText);
              } else {
                //IE8     JSON
                ret = new Function("return " + xhr.responseText)();
              }
              callback(ret);
            } catch (e) {
              console.log(e.message);
              callback(false);
            }
          } else {
            //      
            callback(xhr.responseText);
          }
        } else {
          console.log("AJAX Status Code:" + xhr.status);
          callback(false);
        }
      }
    };
    //2.5  （   post，    ，    ）
    xhr.send(method != "get" ? data : null);
  },
  /*3.0     Post  */
  doPost: function (url, data, isAyn, callback, type) {
    this.doAjax("post", url, data, isAyn, callback, type);
  },
  /*4.0     Get  */
  doGet: function (url, data, isAyn, callback, type) {
    this.doAjax("get", url, data, isAyn, callback, type);
  }
};

1つの需要を仮定して、バックエンドは、2つの数字n 1、n 2に入ってきて、合計を返します。
一つのパラメータが空か数字でない場合は、「status」:「0」，「msg」:「パラメータが間違っています。」
正しい時には、{status}、「＃1」、「sum」:「/n 1加n 2の和」を返します。
バックエンドのコードは貼り付けません。
フロントエンドの呼び出し:

document.getElementById("btnSubmit").onclick = function () {
      ajaxHelper.doPost("  url", "n1=10&n2=25", true, function (ret) {
        if (!ret) { return; }
        if (ret.status != 1) {
          alert(ret.msg);
          return;
        }
        var n = ret.sum;
        var s = ret.status;
      }, "json");
};

以上の原生AJAXパッケージの簡単な実現は小編集が皆さんに提供した内容の全部です。参考にしていただければと思います。よろしくお願いします。