[ 造轮子 ] 手动封装 AJAX (一) —— 基础版

52次阅读

共计 1412 个字符,预计需要花费 4 分钟才能阅读完成。

关于 AJAX 相信都用过,自己动手封装的也肯定有不少,但应该都只是简单的可以请求,不能设置同步异步以及返回的数据格式

兼容低版本 IE5、IE6
可以使用 get 和 post 请求数据
可以设置请求头 需要的思路以及语法都有了,需要小伙伴自己拓展哦
可以设置返回数据格式,不设置为默认
get 请求的数据拼接我没写,有需要的可以自己加
之后会有 ES6 语法的封装敬请期待
注:代码使用 ES5 语法,我写的这个版本的传参只能按照顺序来

直接上代码
//1. 用 ES5 写 ajax
var ajax = function (url,method,data,async,success,error,resType) {

// 设置变量默认值
method = method || “GET”;
async = async || true;
data = data || “”;
resType = resType || “”;
// 数据校验
if(!url || url === ”){
throw new Error(‘url 不能为空 ’);//throw 用来抛出异常
}
if(method===”GET” && data != “”){
throw new Error(‘ 请将 get 请求参数写在 url 里 ’);// 由于时间不太够不再写参数拼接,有兴趣的小伙伴可以自己加参数拼接功能
}
// 将小写全部转换为大写
method = method.toUpperCase();
// 判断是否是低版本 IE
if (window.XMLHttpRequest) {// 是否支持 XMLHttpRequsest
var xhr = new XMLHttpRequest();
} else {// 低版本 IE
var xhr = new ActiveXObject(“Microsft.XMLHTTP”);
}
//xmlhttp.open(method,url,async) 请求类型 请求地址 是否异步
xhr.open(method, url, async);
// 设置请求头
// 判断是否设置
// 循环 headers 设置请求头
// xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
// 设置返回数据格式
if(async){// 如果设置了同步就不能设置返回数据格式
xhr.responseType = resType; // 在不设置 responseType 的时候默认为 text
}
//send(data) 将请求发送到服务器。data 仅用于 post
xhr.send(data);

xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {

var res = xhr.response;
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
success && success(res);
} else {
error && error(res);
}
}
}
}
//url,method,data,async,success,error,resType
ajax(“1.json”,”GET”,””,true,function(res){console.log(res);},function(error){console.log(error);},’json’);
请求的 json 文件内容
{
“name”: “yhtx1997”,
“text”: “ 恭喜你测试成功!!!”
}
调用效果图

正文完
 0