So implementieren Sie die native AJAX-Kapselung

Dieses Mal zeige ich Ihnen, wie Sie die native AJAX-Kapselung implementieren und welche Vorsichtsmaßnahmen für die Implementierung der nativen AJAX-Kapselung gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Zurück zu nativem js: Ich habe das AJAX-Paket verwendet, das ich online gesehen habe, und ich weiß nicht, ob es irgendwelche Nachteile hat. Ich hoffe, Sie können es aufzeigen.

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

Angenommen, das Backend erfordert die Übergabe von zwei Zahlen n1 und n2, und dann wird die Summe zurückgegeben.

Wenn einer der Parameter leer ist oder keine Zahl ist, geben Sie Folgendes zurück: {"status": "0", "msg": "Der Parameter ist falsch!"🎜>

Wenn dies der Fall ist korrekt, Rückgabe: {"status": "1", "sum"://Die Summe von n1 plus n2"🎜>

Der Backend-Code wird nicht veröffentlicht.

Front-End-Anruf:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Inhalt, achten Sie bitte auf andere chinesische PHP-Websites Verwandte Artikel!

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");
};

Empfohlene Lektüre:

Der Unterschied zwischen der Verwendung von Ajax und JavaScript

Detaillierte Erklärung der Verwendung von Ajax und Browser-Cache

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die native AJAX-Kapselung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!