ajax封装

Posted hupan508

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax封装相关的知识,希望对你有一定的参考价值。

滴滴

// 1、封裝AJAX函數
function nativeAjax(option,success,error){
    // 定义domain,方便环境切换
    var domain=https:// + window.location.host + /;
    var url=domain+option.urlStr;
    var type=option.ajaxType;
    var data=option.ajaxData;
    var xhrRequest=null;
    if(window.XMLHttpRequest){
        xhrRequest = new XMLHttpRequest();
    } else {
        xhrRequest = new ActiveXObject(Microsoft.XMLHTTP)
    }
    var str="";
    xhrRequest.open(type,url,true);
    if(type==="POST"&&data!=null){
        xhrRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        for(var key in data){
            str+=&+key+=+data[key];
        }     str=str.slice(1);
    }else{     str=null;    }
    xhrRequest.onreadystatechange=function(){
        if(xhrRequest.readyState==4){
            if(xhrRequest.status==200){
                // 1.1、格式化返回的数据
                var responseData=JSON.parse(xhrRequest.responseText);
                // 1.2、这里操作数据--------
                success(responseData);
            }else{
                // 1.3、没成功返回HTTP状态码
                error(xhrRequest.status);
            }
        }
    }
    xhrRequest.send(str);
}
// 2、POST:定義請求參數
var postOption={
    ajaxType:"POST",
    urlStr:"v2/html/broke/get_broke_ranked_info",
    ajaxData:{                                        
        "HTTP_USER_TOKEN":token,
        "HTTP_USER_UID":pfid, 
        "anchor_pfid":anchor_pfid,
        "broke_pfid":pfid,
        "date":date
    }
}
// 3、调用AJAX
nativeAjax(postOption,function(data){
    // 3.1、请求成功回调
    console.log(data);
},function(error){
    // 3.2、请求失败回调,返回HTTP状态码
    console.log(error);
});



//4、GET:定义请求参数
var getOption={
    ajaxType:"GET",    
    urlStr:"v2/html/broke/get_broke_ranked_info",
    ajaxData:null        
}
Ajax(getOption,function(data){
    // 成功函数
    console.log(data);
},function(error){
    // 失败返回HTTP状态码
    console.log(error);

});
// 使用说明
// 一、option必须
option={
    //1、ajaxType必须:"GET"或者"POST"
    ajaxType:"",
    //2、urlStr必须:"string类型"
    urlStr:"",
    //3、必须:POST时候为object{key:value},GET的时候直接为:null
    ajaxData:null
}
// 二、success请求成功回调必须
// 三:error请求失败回调必须

 

以上是关于ajax封装的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

回归 | js实用代码片段的封装与总结(持续更新中...)

通用封装ajax代码

VsCode 代码片段-提升研发效率