function ajax(options) {
options = options || {}; //调用函数时如果options没有指定,就给它赋值{},一个空的Object
options.type = (options.type || "GET").toUpperCase();/// 请求格式GET、POST,默认为GET
options.dataType = options.dataType || "json"; //响应数据格式,默认json
options.headers = options.headers || [];
var params = formatParams(options.data);//options.data请求的数据
var xhr;
//考虑兼容性
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveObject) {//兼容IE6以下版本
xhr = new ActiveXobject('Microsoft.XMLHTTP');
}
//启动并发送一个请求
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
for (let i = 0; i < options.headers.length; i++) {
xhr.setRequestHeader(options.headers[i][0], options.headers[i][1]);
}
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("post", options.url, true);
//设置表单提交时的内容类型
//Content-type数据请求的格式
xhr.setRequestHeader("Content-type", options.contentType || "application/json");
for (let i = 0; i < options.headers.length; i++) {
xhr.setRequestHeader(options.headers[i][0], options.headers[i][1]);
}
xhr.send(JSON.stringify(options.data));
}
// 设置有效时间
setTimeout(function () {
if (xhr.readySate != 4) {
xhr.abort();
}
}, options.timeout || 10000);
// 接收
// options.success成功之后的回调函数 options.error失败后的回调函数
//xhr.responseText,xhr.responseXML 获得字符串形式的响应数据或者XML形式的响应数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300 || status == 304) {
options.success && options.success(JSON.parse(xhr.responseText));
} else {
options.error && options.error(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封装
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- js脚本发起HTTP请求必须通过XMLHttpRequest对象,也是通过AJAX进行浏览器与服务器通信的接口,不...
- 原生Ajax封装 http://www.jianshu.com/p/ff9e1139ea51 jQuery-Aja...
- 同步、异步请求点击一个超链接、打开一个网站都属于同步请求JSP、ASP大多数情况属于混编模式,通过事件触发http...
- AJAX ajax 全名 async javascript and XML 是前后台交互的能力 也就是我们客户端给...