[ 造轮子 ] 手动封装 AJAX （一） —— 基础版

关于 AJAX 相信都用过，自己动手封装的也肯定有不少，但应该都只是简单的可以请求，不能设置同步异步以及返回的数据格式兼容低版本 IE5、IE6可以使用 get 和 post 请求数据可以设置请求头 需要的思路以及语法都有了，需要小伙伴自己拓展哦可以设置返回数据格式，不设置为默认get 请求的数据拼接我没写，有需要的可以自己加之后会有 ES6 语法的封装敬请期待注：代码使用 ES5 语法，我写的这个版本的传参只能按照顺序来直接上代码//1.用 ES5 写 ajaxvar 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,resTypeajax(“1.json”,“GET”,"",true,function(res){console.log(res);},function(error){console.log(error);},‘json’);请求的 json 文件内容{ “name”: “yhtx1997”, “text”: “恭喜你测试成功！！！"}调用效果图