• 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请求失败回调必须
  • 相关阅读:
    springboot(七):springboot+mybatis多数据源最简解决方案
    springboot(六):如何优雅的使用mybatis
    springboot(五):spring data jpa的使用
    springboot(四):thymeleaf使用详解
    springboot(三):Spring boot中Redis的使用
    springboot(二):web综合开发
    springboot(一):入门篇
    常用十六进制颜色对照表代码查询
    burpsuit之Repeater、Sequencer、Decoder、Comparer模块
    burpsuit之Spider、Scanner、Intruder模块
  • 原文地址:https://www.cnblogs.com/hupan508/p/7323304.html
Copyright © 2020-2023  润新知