原生javascript包装一个ajax方法

 

 

调用AJAX

<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("程序出错！");
            }
        }
    }
}