Js实现Ajax请求封装

AJAX是JavaScript的异步通信，从服务器获取XML文档从中提取数据，它可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax除了解决局部更新渲染页面的问题，解决了前后端分离的问题。

代码如下：

function ajax(conf) { // ajax操作
	let url = conf.url,
		data = conf.data,
		senData = [], // 封装后的数据
		async = conf.async !== undefined ? conf.async : true, // ture为异步请求
			type = conf.type || 'get', // 默认请求方式get
			dataType = conf.dataType || 'json',
			contenType = conf.contenType || 'application/x-www-form-urlencoded',
			success = conf.success, //成功
			error = conf.error, //错误
			isForm = conf.isForm || false, // 是否formdata
			header = conf.header || {}, // 头部信息
			xhr = '' // 创建ajax引擎对象
	if (data == null) {
		senData = ''
	} else if (typeof data === 'object' && !isForm) { // 如果data是对象，转换为字符串
		for (var k in data) {
			senData.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))
		}
		senData = senData.join('&')
	} else {
		senData = data
	}
	try {
		xhr = new ActiveXObject('microsoft.xmlhttp') // IE内核系列浏览器
	} catch (e1) {
		try {
			xhr = new XMLHttpRequest() // 非IE内核浏览器
		} catch (e2) {
			if (error != null) {
				error('不支持ajax请求')
			}
		}
	};
	xhr.open(type, type !== 'get' ? url : url + '?' + senData, async)
	if (type !== 'get' && !isForm) {
		xhr.setRequestHeader('content-type', contenType)
	}
	for (var h in header) {
		xhr.setRequestHeader(h, header[h])
	}
	xhr.send(type !== 'get' ? senData : null)
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4) {
			if (xhr.status >= 200 && xhr.status < 300) {
				if (dataType === 'json' && success != null) {
					let res = ''
					try {
						res = eval('(' + xhr.responseText + ')')
					} catch (e) {
						console.log(e)
					}
					success(res) // 将json字符串转换为js对象
				};
			} else {
				if (error != null) {
					error('通讯失败!' + xhr.status)
				}
			}
		}
	}
};

代码说明：

ajax函数接受一个配置对象，类似大家熟悉的jquery的ajax请求。

首先创建一个XMLHttpRequest对象，使用open()方法创建一个http请求，通过setRequestHeader方法来为请求添加头信息。
一个XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。最后调用sent()方法来向服务器发起请求，可以传入参数作为发送的数据体。

链接: https://fly63.com/course/34_1638