对AJAX的get和post请求方式进行函数封装_封装两个公共请求函数(使用axios/ajax均可,请求方式为post和get

        在使用ajax发送请求时，有get和post两种请求方式，两种请求方式的写法均比较固定， 为了使用方便，进行对get和post两种请求方式进行函数封装，这样，下次需要使用时，可直接引入js文件使用封装好的函数。

        首先对get请求方式进行封装

function ajax_get(url,data){
            //url是请求的文件路径，data是需要上传的数据，如 "name=jack"
      
         //创建异步对象
	var ajax = new XMLHttpRequest();
	
       //判断是否有上传的数据
         if(data){
		url + = '?';
		url + = data;
	}
	else{}
       //设置method为get
	ajax.open('get',url);
       //发送
	ajax.send();
       //注册事件
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 4 && ajax.status == 200){
			console.log(ajax.responseText);
		}
	}
}

然后对post请求方式进行封装

post方式和get方式几乎相同，不同点是post上传的数据放在send()中，而get的则和url合拼之后放在open()中，并且post方式需要在ajax.send()和ajax.open()之间多添加ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 

function ajax_post(url,data){
	//url是请求文件路径，data是上传的数据
	
	//创建异步对象
	var ajax = new XMLHttpRequest();
 
	//设置method
	ajax.open('post',rul);
 
	//添加header
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	//判断是否有上传数据
	if(data){
 
		//有上传数据则放入send()中
		ajax.send(data);
 
	}else{
 
		ajax.send();
	}
 
	//注册事件
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 4 && ajax.status == 200){
			
			//获取数据
			console.log(ajax.responseText);
		}
	}
}

get和post封装为同一个函数

最后，对get和post两种请求方式一起封装为同一个函数，并进行优化，以上两种封装方式，都规定了函数参数的顺序，现在把参数转换为一个对象，这样传入参数时就不需要考虑参数的顺序问题了。

/*option{
  url:"",
 data:"",
  method:"",
  success:function(data){}
  其中success是回调函数，为了使用函数返回的数据，在封装的函数中给success函数传入一个实参
}
*/

function ajax_tool(option){
	//传入一个对象参数
	
	//创建异步对象
	var ajax = new XMLHttpRequest();
 
	//判断请求方式是否为get
	if(option.method == 'get'){
 
		//方式为get，判断是否有上传的数据
		if(option.data){
 
			//有上传数据则拼接在url后面
			option.url += '?';
			option.url += option.data;
		}
 
		//设置method
		ajax.open(option.method,option.url);
 
		//发送
		ajax.send();
	}
	else{
		//post 请求方式部分
		
		//设置method
		ajax.open(option.method,option.url);
 
		//添加header
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		
		//判断是否有上传数据，设置send()
		if(option.data){
			ajax.send(option.data);
 
		}else{
 
			ajax.send();
		}
		
	}
 
	//get和post 注册事件
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 4 && ajax.status == 200){
 
				//拿到数据后，通过传参数给回调函数success返回数据
				option.success(ajax.responseText);
		}
	}
 
}

到此，对ajax的get和post请求方式的封装就完成了，如有错误欢迎大家指出，也请大家多多见谅，谢谢。