原生js模仿jQuery实现对Ajax的封装

作者: 张培跃 | 来源:发表于2018-06-24 17:49 被阅读53次

    老铁们,还记得如何对原生ajax进行封装吗?注释较少,看看是否还能看的明白?

    封装如下:
    function ajax(obj){
        //指定提交方式的默认值
        obj.type = obj.type || "get";
        //设置是否异步,默认为true(异步)
        obj.async = obj.async || true;
        //设置数据的默认值
        obj.data = obj.data || null;
        var params=_params(obj.data);
        //在路径后面添加时间戳加随机数防止浏览器缓存。
        obj.url+=(obj.url.indexOf("?")>-1?"&":"?")+"t="+((new Date()).getTime()+Math.random());
        if(obj.type.toLowerCase()=="get" && params.length>0){//将转换后的data.与url进行拼接。
            obj.url+="&"+params;
        }
        var xhr=new XMLHttpRequest();
        xhr.open(obj.type,obj.url,obj.async);
        if(obj.type.toLowerCase()=="post"){
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(params)
        }else
            xhr.send(null);
        if(obj.async){//异步调用
            //监听响应状态。
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4)//响应状态为4,数据加载完毕。
                    callback();
            }
        }else//同步
            callback();
        function callback(){
            if(xhr.status==200){
                obj.success(xhr.responseText);
            }else{
                obj.error(xhr.status);
            }
        }
        //将对象序列化,将对象拼接成url字符串
        function _params(data){
            if(obj==null)
                return obj;
            var arr=[];
            for(var i in data){
                arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
            }
            return arr.join("&");
        }
    }
    
    
    调用如下:
    ajax({
        type:"get",
        data:{
            name:"laoliu"
        },
        url:"getUserByName.php",
        async:false,
        success:function(res){
              //成功
        },
        error:function(error){
            //失败
        }
    })
    

    相关文章

      网友评论

        本文标题:原生js模仿jQuery实现对Ajax的封装

        本文链接:https://www.haomeiwen.com/subject/wqrsyftx.html