相關(guān)學習推薦：ajax

前言

前面一篇文章講了ajax的原理，作用和實現(xiàn)。但是都只是實現(xiàn)一個ajax請求響應操作，瀏覽器和服務器之間請求響應不會只有一次，加入請求響應100次，那么要寫100次近似的代碼嗎？

這篇文章就是解決如何發(fā)送多個ajax的問題。如果你對ajax沒有了解，我的上一篇文章《認識ajax》用心看完，大約5分鐘就可以get到這篇文章內(nèi)容。

這篇文章其實就是講了一個函數(shù)。接下來一起來看看吧。

封裝的思想

發(fā)送多個請求的操作都是相同的，如果寫多個就會有重復的代碼。避免代碼冗余就可以借助函數(shù)的思想，將ajax操作的代碼封裝到一個函數(shù)中，不同的請求函數(shù)傳遞的參數(shù)所有不同。如果要多次發(fā)送ajax請求的時候，就調(diào)用我們封裝好的函數(shù)就好了。

ajax函數(shù)封裝的基本實現(xiàn)

前面說用函數(shù)封裝ajax，那么ajax實現(xiàn)的四步放到函數(shù)中，然后調(diào)用這個函數(shù)，因為傳遞的參數(shù)比較多，所以參數(shù)用一個對象options來表示。這個對象里面包括請求方式，請求地址，請求發(fā)送成功后觸發(fā)的請求處理函數(shù)。

我么看看下面的例子。代碼中將ajax操作封裝到ajax函數(shù)中，調(diào)用ajax函數(shù)，傳入?yún)?shù)，xht下的onload事件觸發(fā)后，調(diào)用了sunccess函數(shù)，將相應內(nèi)容xhr.responsetext打印到控制臺中。

function ajax(options) {     var xhr = new XMLHttpRequest();     xhr.open(options.type, options.url);     xhr.send();     xhr.onload = function () {         options.success(xhr.responsetext);     } } ajax({       type: 'get',      url: 'http://www.example.com',      success: function (data) {           console.log(data);      }  })復制代碼

請求參數(shù)的封裝

上面代碼實現(xiàn)了基本的封裝，接下來講一講如何對請求參數(shù)進行封裝，上一篇文章中介紹了post方法和get方法這兩種方法發(fā)送請求，不同的請求方式請求參數(shù)也是放置在不同的位置的，比如get方法拼接在url后，post方法放在send方法里面。我們在ajax方法的實參對象中加一個data屬性，data屬性值就是請求參數(shù)。

在ajax這個函數(shù)中利用for-in循環(huán)拼接請求參數(shù)，將請求參數(shù)多余的的&去掉。后然對請求類型做出判斷，如果是get請求就把剛剛拼接好的params拼接到url后面；如果是post請求將參數(shù)放到send方法中，并使用xhr對象下的setRequestHeader方法設置請求參數(shù)格式的類型。

代碼如下：

	var xhr = new XMLHttpRequest(); 	// 拼接請求參數(shù)的變量 	var params = ''; 	// 循環(huán)用戶傳遞進來的對象格式參數(shù)	for (var attr in options.data) { 		// 將參數(shù)轉(zhuǎn)換為字符串格式 		params += attr + '=' + options.data[attr] + '&'; 	} 	// 將參數(shù)最后面的&截取掉  	// 將截取的結(jié)果重新賦值給params變量 	params = params.substr(0, params.length - 1);  	// 判斷請求方式	if (options.type == 'get') { 		options.url = options.url + '?' + params; 	}   	// 配置ajax對象 	xhr.open(options.type,options.url); 	// 如果請求方式為post	if (options.type == 'post') { 		// 設置請求參數(shù)格式的類型 		xhr.setRequestHeader('Content-Type', contentType);     	// 向服務器端傳遞請求參數(shù) 		xhr.send(params); 		 	}else { 		// 發(fā)送請求 		xhr.send(); 	}         xhr.onload = function () {         options.success(xhr.responsetext);         }            ajax({       type: 'get',      url: 'http://www.example.com',      data: {          name:'linglong',          age:20      },      success: function (data) {           console.log(data);      }  })復制代碼

封裝終極版

進過前面兩個熱身后直接看ajax封裝的最后版本。 終極版封裝解決了以下幾個問題。

• 服務器返回數(shù)據(jù)格式的處理
• 瀏覽器請求參數(shù)格式的處理
• 狀態(tài)碼不是200調(diào)用失敗函數(shù)
• 設置默認參數(shù)減少冗余

這是終極版的代碼，代碼后面會有針對性的解釋。

分析終極版代碼：

設置默認參數(shù)減少冗余

1. 在ajax函數(shù)中設置defaults參數(shù)對象。為什么在調(diào)用ajax函數(shù)的時候傳入了參數(shù)還要再在函數(shù)里添加默認參數(shù)呢，說到底也是為了避免代碼冗余，如果創(chuàng)建多個ajax對象的話就會傳入可能會相同的參數(shù)，我們只在調(diào)用的時候傳入特定的參數(shù)options，讓options覆蓋默認參數(shù)defaults。在函數(shù)內(nèi)部使用defaults就可以完美的解決這個問題。Object.assign(defaults, options)方就是讓defaults覆蓋options。

	var defaults = {			type: 'get', 			url: '', 			data: {}, 			header: {				'Content-Type': 'application/x-www-form-urlencoded' 				}, 			success: function () {}, 			error: function () {} 		}; 		// 使用options對象中的屬性覆蓋defaults對象中的屬性 		Object.assign(defaults, options);復制代碼

Object.assign方法

補充:Object.assign方法

這里舉個代碼，夠應付這篇文章，具體深入的還是看官方文檔

const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 };  const returnedTarget = Object.assign(target, source);  console.log(target); // expected output: Object { a: 1, b: 4, c: 5 }  console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 }復制代碼

創(chuàng)建ajax對象，拼接請求參數(shù)

		// 創(chuàng)建ajax對象 		var xhr = new XMLHttpRequest(); 		// 拼接請求參數(shù)的變量 		var params = ''; 		// 循環(huán)用戶傳遞進來的對象格式參數(shù)		for (var attr in defaults.data) { 				// 將參數(shù)轉(zhuǎn)換為字符串格式 				params += attr + '=' + defaults.data[attr] + '&'; 			} 		// 將參數(shù)最后面的&截取掉  		// 將截取的結(jié)果重新賦值給params變量 		params = params.substr(0, params.length - 1);復制代碼

瀏覽器請求參數(shù)格式的處理

3. 判斷請求方式是get合適post。如果是get就將請求參數(shù)拼接到請求地址后面，再配置ajax對象，用send方法發(fā)送請求；如果是post就先配置ajax對象，然后判斷請求參數(shù)的數(shù)據(jù)類型，如果是json類型就把數(shù)據(jù)類型轉(zhuǎn)換成字符串處理，如果是application/x-www-form-urlencoded就直用send方法向服務器傳遞普通請求參數(shù)發(fā)送請求。

		if (defaults.type == 'get') { 				defaults.url = defaults.url + '?' + params; 			} 		// 配置ajax對象 		xhr.open(defaults.type, defaults.url); 		// 如果請求方式為post		if (defaults.type == 'post') { 				// 用戶希望的向服務器端傳遞的請求參數(shù)的類型 				var contentType = defaults.header['Content-Type'] 				// 設置請求參數(shù)格式的類型 				xhr.setRequestHeader('Content-Type', contentType); 				// 判斷用戶希望的請求參數(shù)格式的類型 				// 如果類型為json				if (contentType == 'application/json') { 					// 向服務器端傳遞json數(shù)據(jù)格式的參數(shù) 					xhr.send(JSON.stringify(defaults.data)) 				}else { 					// 向服務器端傳遞普通類型的請求參數(shù) 					xhr.send(params); 				}  			}else { 			// 發(fā)送請求 			xhr.send(); 		}復制代碼

服務器返回數(shù)據(jù)格式的處理

4.當請求發(fā)送成功，就會觸發(fā)onload事件，執(zhí)行函數(shù)。我們要對服務器響應的數(shù)據(jù)進行格式判斷，用getResponseHeader方法獲取響應頭的數(shù)據(jù)，Content-Type是響應頭的屬性名稱。如果響應頭中包含application/json這個字符，就說明響應的是json對象，但是傳輸?shù)臅r候是字符串形式傳輸，所以用json下的parse方法轉(zhuǎn)字符串為對象。 如果http的狀態(tài)碼是200就說明客戶端發(fā)來的請求在服務器端得到了正確的處理。調(diào)用success函數(shù)，否則調(diào)用錯伏處理函數(shù)。

		xhr.onload = function () { 			// xhr.getResponseHeader() 			// 獲取響應頭中的數(shù)據(jù) 			var contentType = xhr.getResponseHeader('Content-Type'); 			// 服務器端返回的數(shù)據(jù) 			var responseText = xhr.responseText; 			// 如果響應類型中包含applicaition/json			if (contentType.includes('application/json')) { 				// 將json字符串轉(zhuǎn)換為json對象 				responseText = JSON.parse(responseText) 			} 			// 當http狀態(tài)碼等于200的時候			if (xhr.status == 200) { 				// 請求成功 調(diào)用處理成功情況的函數(shù) 				defaults.success(responseText, xhr); 			}else { 				// 請求失敗 調(diào)用處理失敗情況的函數(shù) 				defaults.error(responseText, xhr); 			} 		} 	}復制代碼

完整的封裝代碼貼出來，如下所示：

<script type="text/javascript">	function ajax (options) { 		// 存儲的是默認值 		var defaults = {			type: 'get', 			url: '', 			data: {}, 			header: {				'Content-Type': 'application/x-www-form-urlencoded' 				}, 			success: function () {}, 			error: function () {} 		}; 		// 使用options對象中的屬性覆蓋defaults對象中的屬性 		Object.assign(defaults, options); 		// 創(chuàng)建ajax對象 		var xhr = new XMLHttpRequest(); 		// 拼接請求參數(shù)的變量 		var params = ''; 		// 循環(huán)用戶傳遞進來的對象格式參數(shù)		for (var attr in defaults.data) { 				// 將參數(shù)轉(zhuǎn)換為字符串格式 				params += attr + '=' + defaults.data[attr] + '&'; 			} 		// 將參數(shù)最后面的&截取掉  		// 將截取的結(jié)果重新賦值給params變量 		params = params.substr(0, params.length - 1); 		// 判斷請求方式		if (defaults.type == 'get') { 				defaults.url = defaults.url + '?' + params; 			} 		// 配置ajax對象 		xhr.open(defaults.type, defaults.url); 		// 如果請求方式為post		if (defaults.type == 'post') { 				// 用戶希望的向服務器端傳遞的請求參數(shù)的類型 				var contentType = defaults.header['Content-Type'] 				// 設置請求參數(shù)格式的類型 				xhr.setRequestHeader('Content-Type', contentType); 				// 判斷用戶希望的請求參數(shù)格式的類型 				// 如果類型為json				if (contentType == 'application/json') { 					// 向服務器端傳遞json數(shù)據(jù)格式的參數(shù) 					xhr.send(JSON.stringify(defaults.data)) 				}else { 					// 向服務器端傳遞普通類型的請求參數(shù) 					xhr.send(params); 				}  			}else { 			// 發(fā)送請求 			xhr.send(); 		} 		// 監(jiān)聽xhr對象下面的onload事件 		// 當xhr對象接收完響應數(shù)據(jù)后觸發(fā) 		xhr.onload = function () { 			// xhr.getResponseHeader() 			// 獲取響應頭中的數(shù)據(jù) 			var contentType = xhr.getResponseHeader('Content-Type'); 			// 服務器端返回的數(shù)據(jù) 			var responseText = xhr.responseText; 			// 如果響應類型中包含applicaition/json			if (contentType.includes('application/json')) { 				// 將json字符串轉(zhuǎn)換為json對象 				responseText = JSON.parse(responseText) 			} 			// 當http狀態(tài)碼等于200的時候			if (xhr.status == 200) { 				// 請求成功 調(diào)用處理成功情況的函數(shù) 				defaults.success(responseText, xhr); 			}else { 				// 請求失敗 調(diào)用處理失敗情況的函數(shù) 				defaults.error(responseText, xhr); 			} 		} 	} 	ajax({		type: 'post', 		// 請求地址 		url: 'http://localhost:3000/responseData', 		success: function (data) { 			console.log('這里是success函數(shù)'); 			console.log(data) 		} 	}) </script>復制代碼

文章結(jié)束

ok，到此封裝ajax函數(shù)完畢，為什么要封裝，減少使用多個ajax請求的時候代碼冗余。把代碼用函數(shù)封裝起來使用的時候調(diào)用函數(shù)就可。封裝ajax函數(shù)要考慮到以下幾點：

• 請求方式(get)，請求參數(shù)要與地址拼接后放到open方法中。
• 請求方式post，請求參數(shù)類型是json數(shù)據(jù)類型，要將json轉(zhuǎn)字符串后放到send方法中。
• 對服務器響應處理時獲取響應頭中的響應數(shù)據(jù)格式。
• 響應的格式是json對象，處理響應結(jié)果要將字符串轉(zhuǎn)json對象。
• 設置ajax函數(shù)的默認參數(shù)減少代碼冗余。

其他相關(guān)學習推薦：javascript