用原生javascript包装一个ajax方法


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(“程序出错!”);
}
}
}
}
或许你的朋友正在寻找这个问题的答案,赶紧分享给他吧!