程式碼如下（歡迎文明交流，留下寶貴建議，個人思路，不喜勿噴）

function ajax(opt){
	var defaultSettings = {
		data: {},
		type: 'get',
		dataType: 'json',
		headers:{'Authorization': getStore('token')},
		beforeSend: function(){
			openLoad('loading.gif')
		},
		complete:function(){  
			closeLoad();
		},
   		error: function(xhr){
   			if(xhr.status == 401){
   				showTips('您未登入')
   			}else if(xhr.status == 403){
   				showTips('您沒有許可權')
   			}else if(xhr.status == 500){
   				showTips('伺服器發生錯誤，請稍後重新整理頁面')
   			}else｛
   				showTips('未知錯誤')
   			｝
   		}
	}
	for(var key in opt){
		defaultSettings[key] = opt[key]
		if(key == 'url')
			defaultSettings[key] = '/api/' + opt[key] + '?format=json&time=' + new Date().getTime()
	}
	if(arguments[1]){ //如果是圖片上傳,需要傳遞第二個引數，必須內容
		defaultSettings.traditional = true
		defaultSettings.processData = false
		defaultSettings.contentType = false
	}
	return $.ajax(defaultSettings)
}

function showTips(msg){
	var tipsEl = $('<div></div>').text(msg).css({
		"text-align":"center",
		"line-height":"40px",
		"height":'40px',
		"background":'rgba(0,0,0,0.5)',
		'position':'fixed',
		"left":'50%',
		"top":'50%',
		"transform":'translate(-50%,-50%)',
		"z-index":999999,
		'padding':'15px 30px',
		"box-sizing":'border-box',
		"display":'none',
		"font-size":'14px'
	})

	tipsEl.appendTo($('body')).fadeIn(500).delay(1000).fadeOut(500,function(){
		tipsEl.remove()
	})
}
function getStore (name) {
	if (!name) return;
	return window.localStorage.getItem(name);
}
function openLoad( src ){
	var loadEl_icon = $('<i></i>').css({
		"width":'50px',
		"height":'50px',
		"margin":'auto',
		"background":'url(' + src + ') no-repeat center center',
		'background-size':'cover'
	})
	var lodeEl_inner = $('<div class="ui-loading-inner"></div>').css({
		"width":'200px',
		"height":'200px',
		"margin":'auto',
		"border-radius":'5px',
		"background":'rgba(0,0,0,0.5)',
		"display":'flex'
	}).append(loadEl_icon)
	var loadEl_wrap = $('<div class="ui-loading-mask"></div>').css({
		"position":'absolute',
		"left":0,"top":0,"bottom":0,"right":0,
		"background":'rgba(255,255,255,0.01)',
		"z-index":999999,
		"display":'flex'
	}).append(lodeEl_inner).appendTo($('body'))
}

function closeLoad(){
	$('.ui-loading-mask').remove()
}
 

在封裝裡預設進行了error函式的判斷，也提供了頁面訊息提示框，呼叫方式如下：

ajax(formData,true) //上傳圖片
ajax(opt)//普通呼叫

引數opt的設定：

var opt = {
	url:'do_login',
	type:'post',//如果是post需要傳遞type，如果是get可以不傳遞
	data:{usrname,password},
	success(r){
		//your code here or callback(r)
	}

}

看網上有許多大神都封裝成了面向物件的方式，這裡沒有采用的原因是，ajax在一個專案中會多次使用，面向物件封裝或許要採用單例模式，否則會增加程式開銷，但是發現網上大多數的封裝都沒有注意這個問題，另外，將loading元件和提示元件放進一個物件裡，可能增加程式碼的耦合性，單獨使用不方便。

另外，程式碼裡所有的css都應該在 .css 樣式檔案裡定義好，這樣直接建立一個元素就不用設定樣式了，這裡為了方便表達所以才寫在了js裡，用的時候可以單獨拆分出來，所以這裡的程式碼只提供一個思路，具體可以結合業務進行相應改動。