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);//回调函数 
                    }
                } 
            } 
        }

 

转载于:https://www.cnblogs.com/yongege/p/7103784.html