[练习] 模拟ajax

2017-09-04  本文已影响47人  Top_Chenxi

模拟ajax

// 封装一个简单的Ajax
// options是一个对象,里面可以包括的参数为:
// type: post或者get,可以有一个默认值
// data: 发送的数据,为一个键值对象或者为一个用&连接的赋值字符串
// onsuccess: 成功时的调用函数
// onfail: 失败时的调用函数
let myAjax = (url, options) => {
    let ajax,
        data,
        param = "",
        type;
    // create XML object
    ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
    // parse data
    data = options.data ? options.data : -1;
    if (typeof data == "object") {
        for (let key in data) {
            param += `${key}=${data[key]}&`;
        }
    } else {
        param = `${data}?timeStamp=${new Date().getTime()}`;
    }
    param = param.replace(/&$/, "");
    type = options.type ? options.type.toUpperCase() : "GET";
    if (type == "GET") {
        ajax.open("GET", `${url}?${param}`, true);
        ajax.send();
    } else {
        ajax.open("POST", url, true);
        ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        ajax.send(param);
    }
    //solve result
    ajax.onreadystatechange = () => {
        if (ajax.readyState === 4) {
            if (ajax.status === 200) {
                options.onsuccess(ajax.responseText, ajax);
            } else {
                if (options.onfail) {
                    options.onfail(ajax);
                }
            }
        }
    };
    return ajax;
}
上一篇下一篇

猜你喜欢

热点阅读