Ajax请求简单封装

一、在同级文件夹中新建 ajax.js 文件

1、写入 ajax 请求封装代码

// 接口 url 地址
const baseURL = 'http://127.0.0.1';
// 封装 Ajax 请求函数
function ajaxGetList(obj) {
	// 定义一个新的数组将对象形式转换为 key = value 形式存放在数组中
	let arrList = [];
	for (let key in obj.data) {
		arrList.push(key + '=' + obj.data[key])
	}
	// 使用 join 方法将数组中的 key = value 形式用 & 符号链接
	let str = arrList.join('&')
	// 创建 HTTP 请求对象
	let xhr = new XMLHttpRequest();
	// 获取请求方式
	let method = obj.type.toUpperCase();
	// 判断请求方式是哪一种 
	if (method === 'GET' || method === 'DELETE') {
		// 打开服务器的连接请求接口
		// 判断是否有参数
		if (str) {
			// 第一个参数为传递参数请求的形式是 get 或者 post
			// 第一个参数是请求地址和请求前缀? 是 get 请求需要的一个格式
			// 第三个参数是可以不写默认是 true 意思是 是否为异步操作
			xhr.open(method, baseURL + obj.url + '?' + str, true)
		} else {
			xhr.open(method, baseURL + obj.url, true)
		}
		// 发送请求
		xhr.send()
	} else if (method === 'POST' || method === 'PUT') {
		// 打开服务器的连接请求接口
		xhr.open(method, baseURL + obj.url, true);
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
		xhr.send(str);
	}
	xhr.onload = function() {
		// obj.success 是传过来对象的属性  JSON.parse() 方法进行转换 方便页面渲染数据
		obj.success(JSON.parse(xhr.responseText));
	}
}

二、调用封装好的方法

1、引入页面

<script src="./ajax.js"></script>

2、调用封装好的 ajax 函数

// 请求调用
ajaxGetList({
	// 请求类别
	type: 'GET',
	// 请求 url
	url: '/dataList',
	// 传给后端的参数
	data: {
		name: 'zhangsan',
		age: 21
	},
	success: function(res) {
		// 请求得到的数据
		console.log(res)
	}
})