node.js -- Ajax封装

Posted 2021-09-07 我真的爱敲代码

文章目录

• Ajax封装
• • 请求参数

---

Ajax封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求代码封装到函数中，发送请求时调用函数即可

 console.log('before');
 setTimeout(
    () => { console.log('last');
 }, 2000);
 console.log('after');
 ajax({ 
     type: 'get',                       //请求方式   
     url: 'http://www.example.com',     //请求地址
     success: function (data) {         //请求成功后处理的结果，data形参代表请求结果
         console.log(data);
     }
 })

ajax封装示例：
（最简单、最基础）能够向服务器端发送请求，也能够接收服务器端的响应

function ajax(option) {
	//创建ajax对象
	var xhr = new XMLHttpRequest();
	//配置ajax对象
	xhr.open(options.type, options.url);   //通过形参options来拿到ajax对象中的属性
	//发送请求
	xhr.send();
	//监听xhr对象下面的onload事件
	//当xhr对象接收完响应数据后触发
	xhr.onload = function () {      //把调用成功后想要执行的响应放到函数外面去
		options.success(xhr.responseText);
	}
}
ajax({
	//请求方式
	type:'get',
	//请求地址
	url: 'http://localhost:3000/first',
	success: function (data) {    //在onload函数调用的时候有实参的传递，则此处就有data形参
		console.log('这里是success函数'+data)
	}
})

请求参数

在发送请求时向服务器传递请求参数，需要考虑get方式是将请求参数拼接在url地址后面，而post请求方式是需要将请求参数放在请求体即send()方法中，综合考虑，请求参数应该传递在ajax函数中，在函数内部再去根据请求方式的不同去将请求参数拼接在不同的位置。
请求参数要考虑的问题：

1. 请求参数位置的问题
   将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置
   get—放在请求地址的后面
   post----放在send方法中
2. 请求参数格式的问题
   主要有两种格式：
   application/x-www-form-urlencoded 即 参数名称=参数值&参数名称=参数值 name=zhangsan&age=20
   application/json 即 {name: ‘zhangsan’ , age : 20 }
   综上json格式更加方便传递
   我们需要根据content-type来判断需要传递的参数格式。
   由于（1）传递对象数据类型对于函数的调用者更加友好；（2）在函数内部将对象数据类型转换成字符串数据类型更加方便。故在data中存放的是一个对象

function ajax(option) {
	//创建ajax对象
	var xhr = new XMLHttpRequest();
	//拼接请求参数的变量     options.data就可以拿到请求参数的变量
	var params = '';
	//需要将{
	//	name: 'zhangsan';
	//	age: 20
	//}
	//拼接成 name=zhangsan&age=20
	//转换数据格式，只需要循环用户传递进来的对象格式对象即可
	for (var attr in options.data) {   //属性name/age就是attr
		//将参数转换为字符串格式
		params += attr + '=' + options.data[attr] + '&';     //因为data后面不能.变量，就需要用中括号的形式
	}     //此时name=zhangsan&age=20&   参数后面多了一个&
	//对字符串进行截取，将参数最后面&截取掉
	//将截取的结果重新赋值给params变量
	params = params.substr(0,params.length -1);

	//判断请求方式，根据get、post的不同将请求参数拼接到不同的地方
	if (options.type == 'get') {
		options.url = options.url + '?' + params;
	}
	
	
	//配置ajax对象
	xhr.open(options.type, options.url);   //通过形参options来拿到ajax对象中的属性

	//如果请求参数为post,发送请求
	if (options.type == 'post') {
		//如果是post形式，必须要设置请求参数格式的类型
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(params)
	} else {  //反之若为get
		xhr.send();
	}
	//监听xhr对象下面的onload事件
	//当xhr对象接收完响应数据后触发
	xhr.onload = function () {      //把调用成功后想要执行的响应放到函数外面去
		options.success(xhr.responseText);
	}
}
ajax({
	//请求方式
	type:'get',
	//请求地址
	url: 'http://localhost:3000/first',
	data: {
		name: 'zhangsan';
		age: 20
	}
	success: function (data) {    //在onload函数调用的时候有实参的传递，则此处就有data形参
		console.log('这里是success函数'+data)
	}
})

未完待续…