ajax的封装

1.前言

ajax的封装有很多种形式，基本封装的请求就两种POST和GET两种请求，我们可以封装成两个函数POST一个GET一个。当然我们也可以把所有的请求都方庄在一个函数中，下面给大家分别演示集中常见的封装。

2.POST请求和GET请求分别封装在一个文件中

我们创建一个新文件一般命名为Ajax.js下面直接代码

//设置服务器的信息，这里是设置自己的本机地址
//把地址一起封装传参的时候就可以少传一个
//这个是自己使用node创建服务器的时候设置的端口，前面文章有写node创建服务的过程
const baseURL='http://127.0.0.1:3000';
//因为传递过来的参数是一个对象形式的
function post(obj){
//先把传递过来的数据 对象形式的转化为字符串
//声明一个空数组用来存储转化好的数据
var arr=[];
for (var k in obj){
//传递数据中有一个属性名为data
arr.push(k+'='+obj.data[k])
}
//将数组转为字符串之间用&方便我们传参
var str=arr.join('&');
//现在开始ajax四步
//1.创建http协议
 var xhr = new XMLHttpRequest();
 //2.创建连接
 //第一个参数为传递参数请求的形式是get或者post
 //第一个参数是请求地址和请求前缀
 //第三个参数是可以不写默认是true 意思是 是否为异步操作
 xhr.open(obj.type,baseURL+obj.url,true)
 //3.发送请求
 //设置请求头信息 只有post需要
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
  //post的参数是写的这里面的get的是拼接的写在第二步，post写在请求体里面
 xhr.send(str)
 //4.监听事件获取数据
 xhr.onload=function(){
 //obj.success是传递过来的对象内的属性  后面JSON.parse()方法将JSON字符串转换为js对象。转化成对象我们就可以方便渲染在页面上
 obj.success(JSON.parse(xhr.responseText));
}
}

get封装

function get(obj) {
    //把传过来的数据对象转化为字符串
    var arr = [];
    for (var k in obj.data) {
        arr.push(k + '=' + obj.data[k])
    }
    //将数组转化为字符串之间用&
    var str = arr.join('&')
    //创建对象
    var xhr = new XMLHttpRequest();
    //打开服务器连接
     //第一个参数为传递参数请求的形式是get或者post
 //第一个参数是请求地址和请求前缀
 //第三个参数是可以不写默认是true 意思是 是否为异步操作
    xhr.open(obj.type, baseURL + obj.url + '?' + str, true);
    //发送请求
    xhr.send();
    //监听事件获取数据
    xhr.onload = function () {
     //obj.success是传递过来的对象内的属性  后面JSON.parse()方法将JSON字符串转换为js对象。转化成对象我们就可以方便渲染在页面上
        obj.success(JSON.parse(xhr.responseText));
    }
}

上面的两个函数分别封装了POST和GET请求，这两个都是写在一个文件ajax.js中

3.把所有的请求都封装在一个

因为POST和PUT请求传参都是一样的，delete和get请求传递参数的方式都一样所有我们可以一次性封装在一个函数内

//将所有的请求方法封装成一个
function ajax(obj) {
    var arr = [];
    for (var k in obj.data) {
        arr.push(k + '=' + obj.data[k])
    }
    var str = arr.join('&')
    //创建HTTP请求对象
    var xhr = new XMLHttpRequest();
    //判断请求方式是哪一种 
    //我们通过判断传递参数进行判断传递时请求方式，因为请求过程就第二步和第三步不一样
    var method = obj.type.toUpperCase();
    if (method === 'GET' || method === 'DELETE') {
        //打开服务器的连接请求接口
          //第一个参数为传递参数请求的形式是get或者post
       //第一个参数是请求地址和请求前缀 ？是get请求需要的一个格式
      //第三个参数是可以不写默认是true 意思是 是否为异步操作
        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()方法将JSON字符串转换为js对象。转化成对象我们就可以方便渲染在页面上
        obj.success(JSON.parse(xhr.responseText));
    }

4.调用方法

在需要使用请求的地方进行引入<script src='./ajax.js'></script>
如果你使用的分别封装的函数调用时需要根据请求进行分别请求

get({
		type: 'GET',
		url: '/v1/about/member',
		// data: {
		// 	aid: 1
		// },
		success: function (res) {//通过回调函数获取结果
			//res就是获取的结果
			console.log(res);
			var arr = res.data;
			console.log(arr);
			//如果数据很多就通过for循环获取渲染到页面中
			for (let i = 0; i < arr.length; i++) {
				cont.innerHTML += `<li><p>·  ${arr[i].mname}</p></li>`
			}
		}
	})

post一般是向服务器添加一些内容基本是获取用户输入的内容，通过一个按钮点击后发送

btn.onclick = function () {
        //获取当前的时间
		var times = Date.now()
		//用户输入的内容
		var a = cname.value;
		var b = phone.value;
		var c = email.value;
		var d = detail.value;
		var e = times;
		var f = isrecommend.value;

		post({
			type: 'POST',
			url: '/v1/cooperate/add',
			data: {
				cname: a,
				phone: b,
				email: c,
				detail: d,
				ctime: e,
				is_recommend: f
			},
			success: function (res) {
				console.log(res);
			}
		})
		cname.value = '';
		phone.value = '';
		email.value = '';
		detail.value = '';
	}

如果你用的封装在一起的ajax函数调用方法如下

ajax({
    type: '',//请求类别
    url: '',//请求前缀
    data: {
//需要传递的参数
    },
    success: function (res) {
//获取发送过来的数据
    }
})

5.总结

基本的封装都是这样的一般都是用把所有的请求封装在一的方法，但是分别封装可以让我峨嵋你了解封装的原理。如果内容有错误欢迎大家指正。