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

关于 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": "恭喜你测试成功！！！"
}

调用效果图