关于 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": "祝贺你测试胜利!!!"
}
挪用效果图