原生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;}}}//判断 异步对象 是否创建 成功，如果 成功，则返回异步对象，否则返回falsereturn 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以下不支持JSONret = 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=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封装的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。