如何用JS封装Ajax呢?问得好,一起来学习下。框架之间会有冲突,这是源生JS就起到作用了,下面介绍一种原生JS封装的ajax请求。
function ajax(options) { options = options || {}; options.type = (options.type || "get").toUpperCase(); options.dataType = options.DAtaType || "json"; var params = FORMatParams(options.data); //创建xhr对象 - 非IE6 if (window.XMLHttpRequest) { var xhr = new xmlhttpRequest(); } else { //ie6及其以下版本浏览器 var xhr = new ActiveXObject('microsoft.XMLHTTP'); } //GET post 两种请求方式 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestheader("Content-Type", "APPlication/x-www-form-urlencoded"); xhr.send(params); } //接收 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responsetext); } else { options.fAIl && options.fail(status); } } } } //格式化参数 function FormatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.ranDOM()).Replace(".","")); return arr.join("&"); }
如何调用呢?
ajax({
url: "data.JSON",
type: "GET",
data: {},
dataType: "json",
success: function (response) {
// 此处放成功后执行的代码
// 解析返回的字符串 转为JSON对象
var usingdata = eval("("+response+")").data;
}
fail: function (status) {
// 此处放失败后执行的代码
}
}); 







网友评论文明上网理性发言 已有0人参与
发表评论: