随着互联网的高速发展以及IT开发技术的升级，前后端分离已成为互联网项目开发的业界标准使用方式。

那么前后端如何通讯建立连接呢？ 这时候就需要用到ajax、axios、fetch。

但是他们又有什么不同呢？我们一起来学习一下。

ajax_6">一、ajax学习

ajax__7">ajax 实现原理

ajax用过jQuery的同学，应该非常的熟悉了，核心使用XMLHttpRequest对象，对其进行封装，除此之外还添加了对JSONP的支持

var $={
	   ajax:function(opts){
		var xhr;
		var asyncs=(typeof opts.async==='undefined')?true:opts.async
		try{
			xhr=new XMLHttpRequest();
		}catch(e){
			try{
				xhr=new ActiveXobject("Msxml2.XMLHTTP")
			}catch(e){
				try{
					xhr=new ActiveXobject("Microsoft.XMLHTTP")
				}catch(e){
					alert('浏览器有毛病')
				}
			}
		}
		if(!opts.data){
			opts.data=null
		}
		if(opts.type=='opst'){
			xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')
		}

		xhr.open(opts.type || 'get',opts.url,asyncs) ;

		xhr.send(opts.data);

		xhr.onreadystatechange=function(){		
			if(xhr.readyState==4&&xhr.status==200){
				var datas=null;
				if(opts.datatype=='json'){
					var zhi=xhr.responseText;
					datas=eval("("+zhi+")")
				}
				else if(opts.datatype=='xml'){
					datas=xhr.responseXML;
				}
				else{
					datas=xhr.responseText;
				}

				return opts.success(datas)
			}			
		}
	}
}

字段	类型	参数	默认值
async	Boolean	true/false	false
data	Object	-	-
type	String	get/post	get
success	function	-	-

ajax_66">使用ajax

$.ajax({
	type:'post',
	url:'data/data.json',
	async:true,
	datatype:'json',
	success:function(data){
		console.log(data)
	}
})

ajax_79">jQuery 的ajax

cnpm i --save jquery

打开node_modules找到jquery，里面有详细的XMLHttpRequest以及jsonp封装逻辑

.get 、.post、.jsonp

/node_modules/jquery/src/ajax.js 845行

jQuery.each( [ "get", "post" ], function( _i, method ) {
	jQuery[ method ] = function( url, data, callback, type ) {

		// Shift arguments if data argument was omitted
		if ( isFunction( data ) ) {
			type = type || callback;
			callback = data;
			data = undefined;
		}

		// The url can be an options object (which then must have .url)
		return jQuery.ajax( jQuery.extend( {
			url: url,
			type: method,
			dataType: type,
			data: data,
			success: callback
		}, jQuery.isPlainObject( url ) && url ) );
	};
} );

axios_113">二、axios学习