如何优雅的封装原生ajax？原来如此简单！

封装原生Ajax

JQuery中的写法

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $.ajax({
        type:'get',
        url:'data.json',
        success:function (data) {
            console.log(data);
        }
    })
</script>

• JQuery通过$符号点出一个方法ajax
• 通过ajax()方法传入一个对象
• 传入对象的参数有type、url和success

那么JQuery封装原生的Http请求是怎么做到的呢？

如何实现$. 这种语法

实现这种方式的写法有很多，比如说如下写法：

var $ = {
        ajax:function (opt) {
        	var url = opt.url;
            console.log(url);
        },
        get:function(opt){
        	console.log("get")
        },
        post:function(opt){
        	console.log("psot")
        }
    }
    $.ajax({
		url:"http://www.baidu.com"
	});
    $.get();
    $.post();

通过这种方式也可以实现 点 的这种形式，然后在ajax、get和post方法里面写XMLHttpRequest封装。
但是这种方式好不好呢？这种方式也行，但是这是比较老的方式了。如果说我们希望通过function，以及使用点的方式来实现呢？
也就是希望：

//使用函数的形式，来实现$.,该如何做呢？
function $(){

}
//这样写，如何实现 点语法 这样的形式呢？

ok，我们接着改造。

//我们可不可以这样呢？
 function $() {
        return {
           ajax:function (opt) {
               var url = opt.url;
               console.log(url);
           }
        }
    }
    $().ajax({
        url:'http://www.baidu,com'
    })
 

但是这样有个小括号对不对，怎么样把这个括号去掉呢？

自己实现$.语法

上面说到使用function $(){},这种方式，但是有个问题，会有个小括号，那么如何去掉这个括号呢？
其实非常简单！我们可以这样做。

var $ = (function(){
   return {
   	ajax:function(opt){
   		var url = opt.url;
   		console.log(url);
   	  }
   }
})();
$.ajax({
   url:'http://www.baidu.com'
})

如果对立即执行函数有了解的话，就很简单了，我们可以利用立即执行函数返回一个对象，这里我们就可以来实现$.ajax()。

利用XMLHttpRequest 封装自己的ajax

还是利用刚才的立即执行函数。

• 首先写个大致的结构

var $ = (function(){
        return {
            ajax:function(opt){
                var url = opt.url;
                console.log(url);
            },
            get:function(opt){
            },
            post:function(opt){
            }
        }
    })();

实际上我们的options里面有很多选项，这里列举常用的一些。

 
var $ = (function(){
        return {
        	//每个参数应给出默认值
            ajax:function(opt){
                var opt = opt || {},
	            type = (opt.type || 'GET').toUpperCase(),
	            async = opt.async || true,
	            url = opt.url ,
	            data = opt.data || null,
	            error = opt.error || function () {},
	            success = opt.success || function(){},
	            complete = opt.complete || function(){};
                
            },
            get:function(opt){
            },
            post:function(opt){
            }
        }
    })();

上面这样写其实有些冗杂，秉着单一原则我们要对ajax函数进行抽离。并且对XMLHttpRequest进行封装。

var $ = (function(){
		//获取XMLHttpRequest 对象
		var xhr = window.XMLHttpRequest ? 
			new XMLHttpRequest : 
			new ActiveXObject("Microsoft.XMLHTTP");//处理IE5的XMLHTTP实例
		if(!xhr){
			throw new Error("您的浏览器不支持异步HTTP请求");
		}
		/**
		* 封装操作
		*/
		function _doAjax(opt){
		//每个参数应给出默认值,在该函数里面我们进行封装
				var opt = opt || {},
		            type = (opt.type || 'GET').toUpperCase(),
		            async = opt.async || true,
		            url = opt.url ,
		            data = opt.data || null,
		            error = opt.error || function () {},
		            success = opt.success || function(){},
		            complete = opt.complete || function(){};
		         if(!url){//如果没有写必须参数 就抛出错误
		         	throw new Error("您没有写URL！");
		         }
		         xhr.open(type,url,async) //async true：异步方式 false : 同步方式 这里建议异步
		         type === "POST" && xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//如果 type的类型是 POST的话 就要设置请求头参数，为了你的data里面的参数能正常的解析成json格式
		         xhr.send(type==='GET'? null : formatData(data));//如果是POST方法 就要对参数进行处理
		         //例如 data:{username:"张三",age:23} 这种数据就要进行拼接 username="张三"&age=23
		         //这里我们通过formatData函数来实现
		        xhr.onreadystatechange = function(){
		        //注意 在onreadystatechange 方法中 readyState 有 2 3 4这四个值
		        //其中4 表示响应已完成；您可以获取并使用服务器的响应了。
					if(xhr.readyState ===4 && xhr.status === 200){
						success(JSON.parse(xhr.responseText));
					}
					if(xhr.status === 404){
						error() //对应的错误处理
					}
					complete();//该函数 无论错误还是正确都将执行
				}
		}
		//处理字符串拼接问题
		function formatData(obj){
			var str = '';
			for(var key in obj){
				str += key + "=" + obj[key] + "&" //这里返回就会在结尾多出一个& 使用正则去掉即可
			}
			return str.replace(/$&/,'');
		}
        return {
        	
            ajax:function(opt){
                 _doAjax(opt);
            },
            get:function(url,callback){
            	_doAjax({
					type:'GET',
					url:opt.url,
					success:callback
				})
            },
            post:function(url,data,callback){
            	type:'POST',
            	url:url,
            	data:data,
            	success:callback
            }
        }
    })();

至此一个简单封装就结束了。其实利用原生的方式封装ajax还是比较简单的。下次我们可以看看Jquery是如何实现Ajax封装的。

路漫漫其修远兮