JavaScript之原生Ajax的封装函数

最新推荐文章于 2022-04-13 01:13:38 发布

Poor Dog

最新推荐文章于 2022-04-13 01:13:38 发布

阅读量703

点赞数 1

分类专栏： JavaScript学习文章标签： Ajax 原生js 原生js封装原生js封装Ajax Javascript Ajax

本文链接：https://blog.csdn.net/u011030431/article/details/102635413

版权

JavaScript学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

javascript之原生Ajax的功能封装

Ajax对目前的这个前后端分离的开发方式的重要性不言而喻，虽然jQuery已经有了针对Ajax功能的封装，但是原生才是根本，今天和大家探讨一下对Ajax的封装。

网页上的表单请求目前最常用的请求方式有两种 GET 和 POST，封装时也要充分考虑Ajax的多种请求方式功能的完善，以下针对单独的请求方式来完成两种种封装，最后集合两种方式共同封装

1、GET方式的Ajax的封装

function AjaxGet(options){
	let {url,data,success} = options;
	data = data || {};
	let str = "";
	for(let i in data){
		str += `${i}=${data[i]}&`;
	}
	let D = new Date();
	url = url + '?' + str + '_xx=' + D.getTime();
	let xhr = new XMLHttpRequest();
	xhr.open('GET',url,true);
	xhr.onreadystatechange = function(){
		if(this.status == 200 && this.readyState == 4){
			success && success(this.responseText);
		}
	}
	xhr.send();
}

2、POST方式的Ajax的封装

function AjaxPost(options){
	let {url,data,success} = options;
	data = data || {};
	let str = "";
	for(let i in data){
		str += `${i}=${data[i]}&`
	}
	let xhr = new XMLHttpRequest();
	xhr.open('POST',url,true);
	xhr.onreadystatechange = function(){
		if(this.status == 200 && this.readyState == 4){
			success && success(this.responseText);
		}
	}
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send(str.slice(0,str.length-1));
}

3、两种方式的结合封装

function Ajax(options){
	let {url,type,data,success,error,timeout} = options;
	type = type || 'GET';
	data = data || {};
	timeout = timeout || 2000;
	let str = '';
	for(let i in data){
		str += `${i}=${data[i]}&`;
	}
	if(type == 'get'){
		let D = new Date();
		url = url + '?' + str + '_xx=' + D.getTime();
	}
	let xhr = new XMLHttpRequest();
	xhr.open(type,url,true);
	xhr.onreadystatechange = function(){
		if(this.status == 200 && this.readyState == 4){
			success && success(this.responseText);
			error = null;
		}else if(this.status != 200 && this.readyState == 4){
			error && error(this.status);
			success = null;
		}
	}
	setTimeout(function(){
		error && error('timeout');//请求超时
		success = null;
	},timeout);
	if(type == "POST"){
		xhr.setRequestHeader('Content-Type','appliaction/x-www-form-urlencoded');
		xhr.send(str.slice(0,str.length-1));
	}else{
		xhr.send();
	}
}

4、使用方式

//GET和POST的使用相同
AjaxGet({
	url:'http://localhost:8080/xxxxxx',
	data:{
		name:'xxx',
		password:'xxx'
	},
	success:(response)={
		//处理请求到的数据
	}
});

//两种结合封装
Ajax({
	url:'http://localhost:8080/xxxxxx',//请求的地址
	type:'get/post',//请求方式
	data:{
		'发送数据'
	},
	success:(respons)=>{//成功时执行的函数
		//处理请求到的数据
	},
	error:(error)=>{//失败时执行的函数
		//处理请求失败时到的数据
	},
	timeout:2000 //设置请求等待最大时间，默认值2000毫秒
});