js源碼 模仿 jquery的ajax的獲取數據(get,post )的請求封裝


function ajax(obj){ 
            // 默認參數 
            var defaults = { 
                type : 'get',
                data : {}, 
                url : '#', 
                dataType : 'text', 
                async : true, 
                success : function(data){console.log(data)}
            } 
            // 處理形參,傳遞參數的時候就覆蓋默認參數,不傳遞就使用默認參數 
            for(var key in obj){//把輸入的參數與設置的默認數據進行覆蓋更新 
                defaults[key] = obj[key]; 
            } 
            // 1、創建XMLHttpRequest對象 
            var xhr = null; 
            if(window.XMLHttpRequest){ 
                xhr = new XMLHttpRequest(); 
            }else{ 
                xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本 
            } 
            // 把對象形式的參數轉化為字符串形式的參數 
            /* {username:'zhangsan','password':123} 轉換為 username=zhangsan&password=123 */ 
            var param = ''; 
            for(var attr in obj.data){ 
                param += attr + '=' + obj.data[attr] + '&'; 
            } 
            if(param){//substring(start, end)截取字符串去掉最后的&符號 
                param = param.substring(0,param.length - 1); 
            } 
            // 處理get請求參數並且處理中文亂碼問題 
            if(defaults.type == 'get'){ 
                defaults.url += '?' + encodeURI(param); 
            } 
            // 2、准備發送(設置發送的參數) 
            xhr.open(defaults.type,defaults.url,defaults.async); // 處理post請求參數並且設置請求頭信息(必須設置) 
            var data = null; 
            if(defaults.type == 'post'){ 
                data = param; 
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //post模式下必須加的請求頭,這個請求頭是告訴服務器怎么去解析請求的正文部分。 
            } 
            // 3、執行發送動作 
            xhr.send(data); 
            // 處理同步請求,不會調用回調函數 
            if(!defaults.async){ 
                if(defaults.dataType == 'json'){ 
                    return JSON.parse(xhr.responseText); 
                }else{ 
                    return xhr.responseText; 
                } 
            } 
            // 4、指定回調函數(處理服務器響應數據) 
            xhr.onreadystatechange = function(){ 
                if(xhr.readyState == 4){
                    //4 獲取數據成功 
                if(xhr.status == 200){
                    //200 獲取的數據格式正確 
                    var data = xhr.responseText; 
                    if(defaults.dataType == 'json'){ 
                        // data = eval("("+ data +")"); 
                        data = JSON.parse(data);
                        //JSON.parse把獲取帶的json格式的數據轉化為js的對象形式可以使用 
                        } 
                        defaults.success(data);//回調函數 
                    }
                } 
            } 
        }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM