用原生javascript包装一个ajax方法

阅读() @2019-03-17 16:05:00

Jquery之所以被大多数前端开发人员使用(甚至是全部),就是因为它比原生javascript简单方便,选择某个元素直接用“$”就行,而不是一长串的document.getElementById()等等。

前端与后台进行数据传输的时候,大多数时候是用ajax与json来实现,下面是我用原生js打包的一个ajax函数,只要像jquery一样调用一下,就可以直接使用,源码如下,仅供参考!

HTML页面进行调用:

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
	//调用包装好的ajax方法
	ajax({
		method : "get",
		url : "get.php",
		asyn : true,
		data : "user=zym&password=1234",
		fn : function( res ){
			console.log( res );
		}
	});
</script>

打包好的ajax方法函数:

function ajax( myJson ){
	//新建ajax对象
	var xhr = null;
	window.XMLHttpRequest?(xhr=new XMLHttpRequest()):(xhr=new ActiveXObject("Microsoft.XMLHTTP"));
	//定义数据传输方法“get”或“post”,如果没有写,那么默认的是用“get”方法!
	var method = myJson.method||"get";
	//定义数据传输的地址!
	var url = myJson.url;
	//定义数据加载方式(同步或异步),默认的情况下,使用ajax,都是异步加载!
	var asyn = myJson.asyn||true;
	//定义传输的具体数据!
	var data = myJson.data;
	//成功之后执行的方法!
	var fn = myJson.fn;
	//第一种情况:如果是用get方法,并且data是存在的,就执行:
	if(method=="get"&&data){
		xhr.open(method,url+"?"+data+"&"+Math.random(),asyn);
	}
	//第二种情况:如果是用post方法,并且data是存在的,就执行:
	if(method=="post"&&data){
		xhr.open(method,url,asyn);
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
		xhr.send(data);
	}else{
		xhr.send();
	}
	//数据传输成功之后
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status>=200&&xhr.status<300){
				fn(xhr.responseText);
			}else{
				alert("程序出错!");
			}
		}
	}
}
微信二维码