码迷,mamicode.com
首页 > Web开发 > 详细

AJAX-post-get 的简易封装

时间:2019-09-12 23:30:34      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:head   err   status   timeout   ||   get   http   response   内容   

function ajax(options){
    // 1.处理默认参数
    var {type,url,success,error,data,timeout} = options;
    type = type || "get";
    data = data || {};
    timeout = timeout || 2000;

    // 2.解析要发送的数据
    var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }

    // 3.根据方式,决定是否处理url
    if(type == "get"){
        var d = new Date();
        url = url + "?" + str + "__qft=" + d.getTime();
    }

    // 4.开启ajax
    var xhr = new XMLHttpRequest();
    // 注意:open中的方式
    xhr.open(type,url,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            // 5.执行成功之前,先判断是否传入
            success && success(xhr.responseText);
            // 成功之后,不应有失败
            error = null;
        }else if(xhr.readyState == 4 && xhr.status != 200){
            // 6.执行失败之前,先判断是否传入
            error && error(xhr.status);
            // 失败之后,不应有成功
            success = null;
            // 且失败不应多次执行
            error = null;
        }
    }

    // 7.如果请求超时,执行失败
    setTimeout(() => {
        error && error("timeout");
        // 失败之后,不应有成功
        success = null;
    }, timeout);

    // 8.最后根据type的方式,决定send的发送内容和格式
    if(type == "post"){
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(str)
    }else{
        xhr.send()
    }
}

 

AJAX-post-get 的简易封装

标签:head   err   status   timeout   ||   get   http   response   内容   

原文地址:https://www.cnblogs.com/stdzz/p/11515466.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!