• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    原生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);
      }
    };

    假设一个需求,后端要求传入两个数字n1、n2,然后返回总和。

    当其中一个参数为空或者不是数字时,返回:{"status":"0", "msg":"参数有误!"}

    当正确的时候,返回:{"status":"1", "sum":"//n1加n2的和"}

    后端的代码就不贴出来了。

    前端调用:

    document.getElementById("btnSubmit").onclick = function () {
          ajaxHelper.doPost("后端url", "n1=10n2=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封装的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • 用原生JS对AJAX做简单封装的实例代码
    • 原生Javascript封装的一个AJAX函数分享
    • js原生Ajax的封装和原理详解
    • 原生js实现ajax方法(超简单)
    • 基于原生ajax与封装的ajax使用方法(详解)
    上一篇:Boa服务器下的ajax与cgi通信
    下一篇:关于ajax网络请求的封装实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    原生AJAX封装的简单实现 原生,AJAX,封,装的,简单,