认识Ajax的封装

互联网 20-9-19

相关学习推荐：ajax

前言

前面一篇文章讲了ajax的原理，作用和实现。但是都只是实现一个ajax请求响应操作，浏览器和服务器之间请求响应不会只有一次，加入请求响应100次，那么要写100次近似的代码吗？

这篇文章就是解决如何发送多个ajax的问题。如果你对ajax没有了解，我的上一篇文章《认识ajax》用心看完，大约5分钟就可以get到这篇文章内容。

这篇文章其实就是讲了一个函数。接下来一起来看看吧。

封装的思想

发送多个请求的操作都是相同的，如果写多个就会有重复的代码。避免代码冗余就可以借助函数的思想，将ajax操作的代码封装到一个函数中，不同的请求函数传递的参数所有不同。如果要多次发送ajax请求的时候，就调用我们封装好的函数就好了。

ajax函数封装的基本实现

前面说用函数封装ajax，那么ajax实现的四步放到函数中，然后调用这个函数，因为传递的参数比较多，所以参数用一个对象options来表示。这个对象里面包括请求方式，请求地址，请求发送成功后触发的请求处理函数。

我么看看下面的例子。代码中将ajax操作封装到ajax函数中，调用ajax函数，传入参数，xht下的onload事件触发后，调用了sunccess函数，将相应内容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);      }  })复制代码

请求参数的封装

上面代码实现了基本的封装，接下来讲一讲如何对请求参数进行封装，上一篇文章中介绍了post方法和get方法这两种方法发送请求，不同的请求方式请求参数也是放置在不同的位置的，比如get方法拼接在url后，post方法放在send方法里面。我们在ajax方法的实参对象中加一个data属性，data属性值就是请求参数。

在ajax这个函数中利用for-in循环拼接请求参数，将请求参数多余的的&去掉。后然对请求类型做出判断，如果是get请求就把刚刚拼接好的params拼接到url后面；如果是post请求将参数放到send方法中，并使用xhr对象下的setRequestHeader方法设置请求参数格式的类型。

代码如下：

	var xhr = new XMLHttpRequest(); 	// 拼接请求参数的变量 	var params = ''; 	// 循环用户传递进来的对象格式参数	for (var attr in options.data) { 		// 将参数转换为字符串格式 		params += attr + '=' + options.data[attr] + '&'; 	} 	// 将参数最后面的&截取掉  	// 将截取的结果重新赋值给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') { 		// 设置请求参数格式的类型 		xhr.setRequestHeader('Content-Type', contentType);     	// 向服务器端传递请求参数 		xhr.send(params); 		 	}else { 		// 发送请求 		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封装的最后版本。终极版封装解决了以下几个问题。

服务器返回数据格式的处理
浏览器请求参数格式的处理
状态码不是200调用失败函数
设置默认参数减少冗余

这是终极版的代码，代码后面会有针对性的解释。

分析终极版代码：

设置默认参数减少冗余

在ajax函数中设置defaults参数对象。为什么在调用ajax函数的时候传入了参数还要再在函数里添加默认参数呢，说到底也是为了避免代码冗余，如果创建多个ajax对象的话就会传入可能会相同的参数，我们只在调用的时候传入特定的参数options，让options覆盖默认参数defaults。在函数内部使用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 }复制代码

创建ajax对象，拼接请求参数

		// 创建ajax对象 		var xhr = new XMLHttpRequest(); 		// 拼接请求参数的变量 		var params = ''; 		// 循环用户传递进来的对象格式参数		for (var attr in defaults.data) { 				// 将参数转换为字符串格式 				params += attr + '=' + defaults.data[attr] + '&'; 			} 		// 将参数最后面的&截取掉  		// 将截取的结果重新赋值给params变量 		params = params.substr(0, params.length - 1);复制代码

浏览器请求参数格式的处理

判断请求方式是get合适post。如果是get就将请求参数拼接到请求地址后面，再配置ajax对象，用send方法发送请求；如果是post就先配置ajax对象，然后判断请求参数的数据类型，如果是json类型就把数据类型转换成字符串处理，如果是application/x-www-form-urlencoded就直用send方法向服务器传递普通请求参数发送请求。

		if (defaults.type == 'get') { 				defaults.url = defaults.url + '?' + params; 			} 		// 配置ajax对象 		xhr.open(defaults.type, defaults.url); 		// 如果请求方式为post		if (defaults.type == 'post') { 				// 用户希望的向服务器端传递的请求参数的类型 				var contentType = defaults.header['Content-Type'] 				// 设置请求参数格式的类型 				xhr.setRequestHeader('Content-Type', contentType); 				// 判断用户希望的请求参数格式的类型 				// 如果类型为json				if (contentType == 'application/json') { 					// 向服务器端传递json数据格式的参数 					xhr.send(JSON.stringify(defaults.data)) 				}else { 					// 向服务器端传递普通类型的请求参数 					xhr.send(params); 				}  			}else { 			// 发送请求 			xhr.send(); 		}复制代码

服务器返回数据格式的处理

4.当请求发送成功，就会触发onload事件，执行函数。我们要对服务器响应的数据进行格式判断，用getResponseHeader方法获取响应头的数据，Content-Type是响应头的属性名称。如果响应头中包含application/json这个字符，就说明响应的是json对象，但是传输的时候是字符串形式传输，所以用json下的parse方法转字符串为对象。如果http的状态码是200就说明客户端发来的请求在服务器端得到了正确的处理。调用success函数，否则调用错伏处理函数。

		xhr.onload = function () { 			// xhr.getResponseHeader() 			// 获取响应头中的数据 			var contentType = xhr.getResponseHeader('Content-Type'); 			// 服务器端返回的数据 			var responseText = xhr.responseText; 			// 如果响应类型中包含applicaition/json			if (contentType.includes('application/json')) { 				// 将json字符串转换为json对象 				responseText = JSON.parse(responseText) 			} 			// 当http状态码等于200的时候			if (xhr.status == 200) { 				// 请求成功 调用处理成功情况的函数 				defaults.success(responseText, xhr); 			}else { 				// 请求失败 调用处理失败情况的函数 				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); 		// 创建ajax对象 		var xhr = new XMLHttpRequest(); 		// 拼接请求参数的变量 		var params = ''; 		// 循环用户传递进来的对象格式参数		for (var attr in defaults.data) { 				// 将参数转换为字符串格式 				params += attr + '=' + defaults.data[attr] + '&'; 			} 		// 将参数最后面的&截取掉  		// 将截取的结果重新赋值给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') { 				// 用户希望的向服务器端传递的请求参数的类型 				var contentType = defaults.header['Content-Type'] 				// 设置请求参数格式的类型 				xhr.setRequestHeader('Content-Type', contentType); 				// 判断用户希望的请求参数格式的类型 				// 如果类型为json				if (contentType == 'application/json') { 					// 向服务器端传递json数据格式的参数 					xhr.send(JSON.stringify(defaults.data)) 				}else { 					// 向服务器端传递普通类型的请求参数 					xhr.send(params); 				}  			}else { 			// 发送请求 			xhr.send(); 		} 		// 监听xhr对象下面的onload事件 		// 当xhr对象接收完响应数据后触发 		xhr.onload = function () { 			// xhr.getResponseHeader() 			// 获取响应头中的数据 			var contentType = xhr.getResponseHeader('Content-Type'); 			// 服务器端返回的数据 			var responseText = xhr.responseText; 			// 如果响应类型中包含applicaition/json			if (contentType.includes('application/json')) { 				// 将json字符串转换为json对象 				responseText = JSON.parse(responseText) 			} 			// 当http状态码等于200的时候			if (xhr.status == 200) { 				// 请求成功 调用处理成功情况的函数 				defaults.success(responseText, xhr); 			}else { 				// 请求失败 调用处理失败情况的函数 				defaults.error(responseText, xhr); 			} 		} 	} 	ajax({		type: 'post', 		// 请求地址 		url: 'http://localhost:3000/responseData', 		success: function (data) { 			console.log('这里是success函数'); 			console.log(data) 		} 	}) </script>复制代码