[练习] 模拟ajax

模拟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 实现的基本原理是 XMLHttpRequest 或 fetch api。简单的 ajax 请求,只需要几...
    他在发呆阅读 998评论 2 4
  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    徐国军_plus阅读 388评论 0 4
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,337评论 0 7
  • 《一个诗人的早餐03》 文/刘汉皇 冬天,我用笔犁开大地冰封的土层抖落笔记本上镌刻的诗篇像田野里农民般虔诚,埋土深...
    刘汉皇阅读 428评论 31 4
  • 真正有魅力的女人,是能够提现她内心的力量,不是依靠外表的美丽娇艳这些形而下的东西。真正有女人味的女人,能够活出自己...
    小莲2017阅读 254评论 0 1