专注Java教育14年 全国咨询/投诉热线:400-8080-105
动力节点LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 超轻量级的Ajax库

超轻量级的Ajax库

更新时间:2021-08-31 10:03:36 来源:动力节点 浏览1122次

主要用法:ajax(options).method()[ajax({url:"getData.jsp",method:"POST",data:"userId=123"}).getScript(function(msg){/****/});]; options:一个对象,包含如下选项

url://数据源地址

method://请求方法[POST、HEAD...]

data://要发送给服务器的数据

async://是否是异步请求

timeout://请求超时,默认为十秒

cache://是否从缓存中取数据(如果浏览器已缓存)

onSuccess:请求成功并将结果作为参数调用的函数

onError;请求失败调用的函数

onComplete:请求完成调用的函数,无论成功与否

showStatus;以当前状态码为参数调用的函数

type:为本类型,如:txt、js、xml、html

一般情况下url是必需的;其余的可选 ,主要方法:

getText:function(fn)//取文本,请求成功后以获取的文本为参数调用fn函数

getXML:function(fn)//取XML文本,请求成功后以获取的XML文档根对象为参数调用fn函数

getScript:function(fn)//取JavaScript,请求成功后将获取的代码用eval执行后的结果为参数调用fn函数

getHTML:function(fn)//取HTML文本,请求成功后以获取的HTML文本为参数调用fn函数,与getText不同的是文本中的HTML标记可以被正常显示

oppendTo(obj)://将返回结果添加到指定的DOM对象上,如ajax({url:"get.jsp?data=xyz"}).getHTML().appendTo(document.body)

exe:function(options)//发送和接收请求结果的核心函数,options是一个对象,包含:

onSuccess:请求成功并将结果作为参数调用的函数

onError;请求失败调用的函数

onComplete:请求完成调用的函数,无论成功与否

showStatus;以当前状态码为参数调用的函数

type:为本类型,如:txt、js、xml、html

代码如下:

(function(wnd,undef){
    var doc=wnd.document,OBJ="object",STR="string";           
    var ajax=function(options){
        return new ajax.prototype.init(options);
    };               
    function AjaxError(msg){
        this.name="Ajax错误";
        this.message=msg||"未知错误";
    }               
    ajax.prototype={
        init:function(option){
            this[0]=this.create();//创建Ajax对象
            this[1]={
                url:option.url||"",//数据源地址
                method:option.method||"GET",//请求方法[POST、HEAD...]
                data:option.data||null,//要发送给服务器的数据
                async:option.async||true,//是否是异步请求
                type:option.type||"text",//返回数据后,将数据转换为指定的类型.(text,js,xml,html)
                timeout:option.timeout||10000,//请求超时,默认为十秒
                cache:option.cache||false,//是否从缓存中取数据(如果浏览器已缓存)
                onSuccess:option.onSuccess||function(result){},//请求成功后执行的函数(处理返回结果)
                onError:option.onError||function(){},//请求出错调用的函数
                onComplete:option.onComplete||function(){},//请求完成后(无论成功与否)都执行的函数
                showStatus:option.showStatus||function(){}//显示请求状态
            }; 
            fix(this[1]);
            return this;
        },                   
        create:function(){//创建Ajax对象
            if(wnd.XMLHttpRequest==undef){
                wnd.XMLHttpRequest=function(){
                    if(wnd.ActiveXObject){
                        try{
                            return new ActiveXObject("Msxml2.XMLHTTP");//IE6
                        }catch(e){
                            return new ActiveXObject("Microsoft.XMLHTTP");//IE5
                        }
                    }
                };
            }
            return new  XMLHttpRequest();
        },
        stop:function(){
            try{
                this[0].abort();
            }catch(e){
                throw new AjaxError(e.message)
                }
            return this;
        },
        getText:function(fn){//fn可选
            return this.exe({"onSuccess":fn,"type":"text"});
        },
        getXML:function(fn){
            return this.exe({"onSuccess":fn,"type":"xml"});
        },
        getScript:function(fn){
            return this.exe({"onSuccess":fn,"type":"js"});
        },
        getHTML:function(fn){
            return this.exe({"onSuccess":fn,"type":"html"});
        },
        exe:function(options){
            if(options.onSuccess)this[1].onSuccess=options.onSuccess;
            if(options.onError)this[1].onError=options.onError;
            if(options.onComplete)this[1].onComplete=options.onComplete;
            if(options.showStatus)this[1].showStatus=options.showStatus;
            if(options.type)this[1].type=options.type;
            try{
                var isTimeout=false,cur=this;
                var timer=setTimeout(function(){
                    isTimeout=true;
                    cur.stop();
                    cur[1].onError(new AjaxError("请求超时"));
                },cur[1].timeout);
                //私有方法
                var open=function(){
                    try{
                        cur[0].open(cur[1].method,cur[1].url,cur[1].async);
                        if(/POST/i.test(cur[1].method)){
                            cur[0].setRequestHeader("Content-Type","application/x-www-form-urlencoded");//表单编码
                            if(cur[0].overrideMimeType)cur[0].setRequestHeader("Connection","close");
                        }
                    }catch(e){
                        throw new AjaxError(e.message);
                    }
                };
                var send=function(){
                    try{
                        cur[0].send(cur[1].data);
                    }catch(e){
                        throw new AjaxError(e.message);
                    }
                };                       
                open();//发起连接                       
                this[0].onreadystatechange=function(){
                    cur[1].showStatus(cur[0].readyState);
                    if(cur[0].readyState==4&&!isTimeout){                               
                        try{
                            if(isOK(cur[0])){//成功完成
                                var t=httpData(cur[0],cur[1].type);           
                                if(cur.to&&cur.to.length>0){
                                    for(var i=0;i<cur.to.length;i++){
                                        if(cur.to[i].type&&cur.to[i].type=="html")
                                            cur.to[i].target.innerHTML+=t;
                                        else cur.to[i].target.appendChild(doc.createTextNode(t));
                                    }
                                }
                                cur[1].onSuccess(t);
                            }
                            else{
                                cur[1].onError(new AjaxError("请求未成功完成"));
                            }                                     
                        }catch(et){
                            cur[1].onError(new AjaxError(et.message));
                        }finally{
                            cur[1].onComplete();
                            cur[0]=null;
                            clearTimeout(timer);
                        }   
                    }
                };                           
                send();                       
            }catch(e){
                this[1].onError(new AjaxError(e.message));
            }finally{
                return this;
            }                   
        }, 
        appendTo:function(target){//将返回的结果加到指定的目标[id或DOM对象]
            if(!this.to)this.to=[];
            this.to.push({
                "target":$(target),
                "type":this[1].type
                });
            return this;
        }
    };//end prototype
    ajax.prototype.init.prototype=ajax.prototype;          
    ajax.parseToQueryString=function(obj){//将数组或对象序列化
        if(typeof obj===STR)return obj;
        var s=[];
        if(obj instanceof Array){//假定为数组
            for(var i=0;i<obj.length;i++)
                s.push(obj[i].name||i+"="+obj[i]);
        }
        else{
            for(var j in obj) s.push(j+"="+obj[j]);
        }
        return s.join("&");
    } ;             
    ajax.parseToObject=function(str){//将查询字符串转化成对象
        if(typeof str==OBJ)return str;
        var set={};
        str=str.split("&");
        var item;
        for(var i=0;i<str.length;i++){
            if(str[i].indexOf("=")>0){
                item=str[i].split("=");
                set[item[0]]=item[1];
            }
        }
        return set;
    };              
    var fix=function(p){
        if(p.data){
            p.data=ajax.parseToQueryString(p.data);
        }
        if(p.method.toUpperCase()=="GET"&&p.data){
            p.url=append(p.url,p.data);
        }
        if(!p.cache){
            p.url=append(p.url,"abkjfjk="+(new Date().getTime())+"jrejhjdd");
        }
    };              
    var $=function(id){
        return typeof id===OBJ?id:doc.getElementById(id);
    };         
    function isOK(r){
        try{
            return !r.status&&location.protocol=="file:"
            ||(r.status>=200&&r.status<300)
            ||r.status==304
            ||navigator.userAgent.indexOf("Safari")>=0&&r.status==undef;
        }catch(e){}
        return false;
    }             
    function httpData(r,type){
        var res=type;
        if(!res){
            var ct=r.getResponseHeader("Content-Type");
            if(/xml/i.test(ct)) res="xml";
            else if(/JavaScript/i.test(ct))res="js";
            else res="";
        }
        switch(res){
            case "xml":
                return r.responseXML.documentElement;
            case "js":
                return eval("("+r.responseText+")");
            default:
                return r.responseText;
        }   
    }     
    function append(url,param){
        if(url.indexOf("?")<0){
            return url+"?"+param;
        }
        else{
            if(/\?$/.test(url)){
                return url+param;
            }
            else{
                return url+"&"+param;
            }
        }
    }             
    wnd.ajax=ajax;
})(window);

以上就是动力节点小编介绍的"超轻量级的Ajax库",希望对大家有帮助,想了解更多可查看AJAX教程。动力节点在线学习教程,针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识,让同学们更好更方便的学习和了解Java编程,感兴趣的同学可以关注一下。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>