美文网首页
[练习] 模拟ajax

[练习] 模拟ajax

作者: Top_Chenxi | 来源:发表于2017-09-04 14:34 被阅读47次

    模拟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;
    }
    

    相关文章

      网友评论

          本文标题:[练习] 模拟ajax

          本文链接:https://www.haomeiwen.com/subject/nvrejxtx.html