How to implement native AJAX encapsulation

This time I will show you how to implement native AJAX encapsulation and what are the precautions for implementing native AJAX encapsulation. The following is a practical case, let's take a look.

Returning to native js, I saw the AJAX package on the Internet, so I used it to change it. I don’t know if there are any disadvantages. I hope you can point it out!

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

Assume a requirement. The backend requires the input of two numbers n1 and n2, and then returns the sum.

When one of the parameters is empty or not a number, return: {"status":"0", "msg":"The parameter is wrong!"}

When it is correct, Return: {"status":"1", "sum":"//The sum of n1 plus n2"}

The back-end code will not be posted.

Front-end call:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

The difference between the use of Ajax and JavaScript

Detailed explanation of the use of Ajax and browser cache

The above is the detailed content of How to implement native AJAX encapsulation. For more information, please follow other related articles on the PHP Chinese website!