博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
超轻量级的Ajax库——ajax.js
阅读量:5153 次
发布时间:2019-06-13

本文共 6251 字,大约阅读时间需要 20 分钟。

由于之前的pj库不支持Ajax。所以又写了一个非常轻量级的Ajax库。并附上一个类似于Google的自动搜索补全功能的示例()

 

主要用法: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
=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);

转载于:https://www.cnblogs.com/pengju/archive/2010/12/21/1912569.html

你可能感兴趣的文章
windows下使用pycharm开发基于ansible api的python程序
查看>>
错误 warning: LF will be replaced by CRLF in README.md.
查看>>
Linux CentOS7 httpd 配置注释
查看>>
Sqlserver2012 评估期已过问题
查看>>
C#调用C++DLL/天地伟业解码器二次开发
查看>>
zend framework 1 连接oracle数据库的写法
查看>>
APUE学习笔记:第九章 进程关系
查看>>
关于 阿里云 的linux 安装 jdk和tomcat 中的问题(解压版的jdk和tomcat)
查看>>
使用localStorage保存搜索记录
查看>>
PHP队列
查看>>
PhpStudy 升级 MySQL 版本到5.7
查看>>
程序代码记Log
查看>>
ORACLE 11G使用用EXPDP导出时,空表不能导出
查看>>
2017-2018-1 20155216 实验三:并发程序
查看>>
图像旋转
查看>>
九宫格抽奖
查看>>
阅读笔记第五章
查看>>
金蝶数据库执行语句
查看>>
前端SEO技巧
查看>>
python+selenium遇到鼠标悬停不成功可以使用js进行操作
查看>>