更新时间:2021-08-31 10:03:36 来源:极悦 浏览1355次
主要用法: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编程,感兴趣的同学可以关注一下。
0基础 0学费 15天面授
Java就业班有基础 直达就业
业余时间 高薪转行
Java在职加薪班工作1~3年,加薪神器
工作3~5年,晋升架构
提交申请后,顾问老师会电话与您沟通安排学习