hello，Ajax（Ajax的封装）

时间 2020-02-25

标签 hello ajax 封装栏目 Ajax 繁體版

原文原文链接

前言

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

这篇文章就是解决如何发送多个ajax的问题。若是你对ajax没有了解，个人上一篇文章hello,ajax(0基础入门篇)用心看完，大约5分钟就能够get到这篇文章内容。java

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

封装的思想

发送多个请求的操做都是相同的，若是写多个就会有重复的代码。避免代码冗余就能够借助函数的思想，将ajax操做的代码封装到一个函数中，不一样的请求函数传递的参数全部不一样。若是要屡次发送ajax请求的时候，就调用咱们封装好的函数就行了。json

ajax函数封装的基本实现

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

我么看看下面的例子。代码中将ajax操做封装到ajax函数中，调用ajax函数，传入参数，xht下的onload事件触发后，调用了sunccess函数，将相应内容xhr.responsetext打印到控制台中。bash

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方法设置请求参数格式的类型。app

代码以下：函数

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封装的最后版本。终极版封装解决了如下几个问题。post

服务器返回数据格式的处理
浏览器请求参数格式的处理
状态码不是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>
复制代码

文章结束

ok，到此封装ajax函数完毕，为何要封装，减小使用多个ajax请求的时候代码冗余。把代码用函数封装起来使用的时候调用函数就可。封装ajax函数要考虑到如下几点：

请求方式(get)，请求参数要与地址拼接后放到open方法中。
请求方式post，请求参数类型是json数据类型，要将json转字符串后放到send方法中。
对服务器响应处理时获取响应头中的响应数据格式。
响应的格式是json对象，处理响应结果要将字符串转json对象。
设置ajax函数的默认参数减小代码冗余。

最近特别喜欢蜡笔小新，蠢萌蠢萌。

推荐你们去看嘿嘿嘿。