原生js之ajax封装

最新推荐文章于 2022-05-04 21:09:47 发布

原创最新推荐文章于 2022-05-04 21:09:47 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

121 篇文章

订阅专栏

Ajax

8 篇文章

订阅专栏

本文介绍了一个简易的AJAX函数封装方法，通过一个对象参数实现GET和POST请求，包括数据序列化、状态码处理及回调函数。适用于快速实现前后端交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*function ajax(type,url,fnSucess,fnFail,data){
	//对于非必须参数的处理
	//考虑参数过多的情况
	xhr.open(type,url,true)
}*/
//{type:"get",url:"demo.php",fnSuccess:foo,fnFail:bar,data:data}
//data{username:"aaaa",password:1111}=>"username=aaaa&password=1111"
function ajax(obj){
	
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
	var str = "";
	if(obj.data){
		for(var attr in obj.data){
			str += attr+"="+obj.data[attr]+"&";
		}
		str = str.replace(/&$/,"");
	}
	
	//避免传递的实参有小写的情形
	if(obj.type.toUpperCase() == "GET"){
		if(obj.data){
			xhr.open("get",obj.url+"?"+str,true);
		}else{
			xhr.open("get",obj.url,true);
		}
		xhr.send();
	}
	if(obj.type.toUpperCase() == "POST"){
		xhr.open("post",obj.url,true);
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send(str);
	}
	
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				var data = xhr.responseText;
				obj.fnSuccess(data);
			}else{
				obj.fnFail();
			}
		}
	}
	
}