原生js封装ajax
为什么要封装ajax?
答:一个网页里面会发送很多的ajax请求 而且所有的ajax的代码几乎一样,也就那五步个骤(上文已经讲过),所以将ajax封装需要用的时候直接调用,节省代码时间。
首先我们知道需要传的参数都有什么:
①请求方式:type。
②请求路径:url。
③传入的值/数据:data。
④成功之后接受返回体:success。
⑤返回体的数据类型:dataType。
进行封装:
第一步创建请求对象:
var xhr = new XMLHttpRequest();
第二步判断是否为get方式,是则进行值得拼接:
if(params.type == "get") {
params.url += "?" + params.data;
}
第三步调用open方法:
xhr.open(params.type, params.url)
第四步在判断是否为post请求方式,是则设置表头再发送请求且传值:
if(params.type == "get") {
xhr.send();
} else {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params.data);
}
第五步监听响应完成事件:
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var res = xhr.responseText;
// 判断数据类型是json字符串还是语言
if(params.dataType == "json") {
// 将数据转换为对象
res = JSON.parse(res);
} else if(params.dataType == "XML") {
// 创建转换对象
var parser = new DOMParser();
// 对XML数据进行转换
res = parser.parseFromString(res, "text/xml");
} else {
res = xhr.responseText;
}
第六步请求完成:
params.success(res);
封装完成:
OVERRRRRRRR!