原生js封裝Ajax

小白要努力i發表於2020-10-03

ajax封裝

function ajax(options) {
    var defaults={
        type:'get',
        url:'',
        data:{},
        dataType:'json',
        success:function (result) {
            console.log(result);
        },
        async:true
    }
    //覆蓋原物件的預設值
    object.assign(defaults,options);
    //建立一個ajax物件 (相容)
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執行程式碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var params="";
    //拼接字串  url其後緊跟
    for(var attr in defaults.data){
        params+=attr+'='+defaults.data[attr]+'&';
    }
    if(params){
        //擷取字串
        params=params.substring(0,params.length-1);
    }
    //判斷get/post型別
    if (defaults.type=='get'){
        defaults.url += '?' +params;
    }
    xhr.open(defaults.type,defaults.url,defaults.async);
    if(defaults.type == 'get') {
        xhr.send();
    }else if(defaults.type=='post'){
        //post像伺服器傳送請求
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params);
    }

    if(defaults.async){
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4 && xhr.status==200){
                var result=null;
                if(defaults.dataType=='json'){
                    result=xhr.responseText;
                    result=json.parse(result);
                }else if(defaults.dataType='xml'){
                    result=xhr.responseXML;
                }else{
                    result=xhr.responseText;
                }
                //輸出
                defaults.success(result);
            }
        }
    }else{
        xhr.οnlοad=function () {
            if(xhr.readyState==4 && xhr.status==200){
                var result=null;
                if(defaults.dataType=='json'){
                    result=xhr.responseText;
                    result=json.parse(result);
                }else if(defaults.dataType='xml'){
                    result=xhr.responseXML;
                }else{
                    result=xhr.responseText;
                }
                //輸出
                defaults.success(result);
            }
        }
    }
}

相關文章