Dec 06
AJAXRequest 和 AHAH 是两个轻量级的 AJAX 应用开发框架,没错 JQuery,Prototype 等足够强大,可是实际上那几十上百 K 的代码我们用得着多少?
AJAXRequest 和 AHAH 只有几 K 大小,却完全能满足一般站点的 AJAX 应用。
AjaxRequest
/*------------------------------------------
Name: AJAXRequest
@License: http://www.gnu.org/licenses/gpl.html GPL
@Copyright: Copyright (c) 2007, All Rights Reserved
@Author: xujiwei
@E-mail: vipxjw@163.com
@Website: http://www.xujiwei.cn
@Version: 0.7
AJAXRequest Deveoper Manual:
http://www.xujiwei.cn/works/ajaxrequest/
------------------------------------------*/
function AJAXRequest() {
var xmlPool=[],AJAX=this,ac=arguments.length,av=arguments;
var xmlVersion=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
var emptyFun=function(){};
var av=ac>0?typeof(av[0])=="object"?av[0]:{}:{};
var encode=av.charset?av.charset.toUpperCase()=="UTF-8"?encodeURIComponent:escape:encodeURIComponent;
this.url=getp(av.url,"");
this.oncomplete=getp(av.oncomplete,emptyFun);
this.content=getp(av.content,"");
this.method=getp(av.method,"POST");
this.async=getp(av.async,true);
this.onexception=getp(av.onexception,emptyFun);
this.ontimeout=getp(av.ontimeout,emptyFun);
this.timeout=getp(av.timeout,3600000);
this.onrequeststart=getp(av.onstartrequest,emptyFun);
this.onrequestend=getp(av.onendrequest,emptyFun);
if(!getObj()) return false;
function getp(p,d) { return p?p:d; }
function getObj() {
var i,j,tmpObj;
for(i=0,j=xmlPool.length;i<j;i++) if(xmlPool[i].readyState==0||xmlPool[i].readyState==4) return xmlPool[i];
try { tmpObj=new XMLHttpRequest; }
catch(e) {
for(i=0,j=xmlVersion.length;i<j;i++) {
try { tmpObj=new ActiveXObject(xmlVersion[i]); } catch(e2) { continue; }
break;
}
}
if(!tmpObj) return false;
else { xmlPool[xmlPool.length]=tmpObj; return xmlPool[xmlPool.length-1]; }
}
function $(id){return document.getElementById(id);}
function $N(n,d){n=parseInt(n);return(isNaN(n)?d:n);}
function $VO(v) {
if(typeof(v)=="string") {
if(v=$(v)) return v;
else return false; }
else return v;
}
function $ST(obj,text) {
var nn=obj.nodeName.toUpperCase();
if("INPUT|TEXTAREA".indexOf(nn)>-1) obj.value=text;
else try{obj.innerHTML=text;} catch(e){};
}
function $CB(cb) {
if(typeof(cb)=="function") return cb;
else {
cb=$VO(cb);
if(cb) return(function(obj){$ST(cb,obj.responseText);});
else return emptyFun; }
}
function send(purl,pc,pcbf,pm,pa) {
var purl,pc,pcbf,pm,pa,ct,ctf=false,xmlObj=getObj(),ac=arguments.length,av=arguments;
if(!xmlObj) return false;
if(!pm||!purl||!pa) return false;
var ev={url:purl, content:pc, method:pm};
purl+=(purl.indexOf("?")>-1?"&":"?")+Math.random();
xmlObj.open(pm,purl,pa);
AJAX.onrequeststart(ev);
if(pm=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ct=setTimeout(function(){ctf=true;xmlObj.abort();},AJAX.timeout);
xmlObj.onreadystatechange=function() {
if(ctf) { AJAX.ontimeout(ev); AJAX.onrequestend(ev); }
else if(xmlObj.readyState==4) {
ev.status=xmlObj.status;
try{ clearTimeout(ct); } catch(e) {};
try{ if(xmlObj.status==200) pcbf(xmlObj); else AJAX.onexception(ev); }
catch(e) { AJAX.onexception(ev); }
AJAX.onrequestend(ev);
}
}
if(pm=="POST") xmlObj.send(pc); else xmlObj.send("");
}
this.setcharset=function(cs) {
if(cs.toUpperCase()=="UTF-8") encode=encodeURIComponent; else encode=escape;
}
this.get=function() {
var purl,pcbf,ac=arguments.length,av=arguments;
purl=ac>0?av[0]:this.url;
pcbf=ac>1?$CB(av[1]):this.oncomplete;
if(!purl&&!pcbf) return false;
send(purl,"",pcbf,"GET",true);
}
this.update=function() {
var purl,puo,pinv,pcnt,ac=arguments.length,av=arguments;
puo=ac>0?$CB(av[0]):emptyFun;
purl=ac>1?av[1]:this.url;
pinv=ac>2?$N(av[2],1000):null;
pcnt=ac>3?$N(av[3],0):null;
if(pinv) {
send(purl,"",puo,"GET",true);
if(pcnt&&--pcnt) {
var cf=function(cc) {
send(purl,"",puo,"GET",true);
if(cc<1) return; else cc--;
setTimeout(function(){cf(cc);},pinv);
}
setTimeout(function(){cf(--pcnt);},pinv);
}
else return(setInterval(function(){send(purl,"",puo,"GET",true);},pinv));
}
else send(purl,"",puo,"GET",true);
}
this.post=function() {
var purl,pcbf,pc,ac=arguments.length,av=arguments;
purl=ac>0?av[0]:this.url;
pc=ac>1?av[1]:"";
pcbf=ac>2?$CB(av[2]):this.oncomplete;
if(!purl&&!pcbf) return false;
send(purl,pc,pcbf,"POST",true);
}
this.postf=function() {
var fo,vaf,pcbf,purl,pc,pm,ac=arguments.length,av=arguments;
fo=ac>0?$VO(av[0]):false;
if(!fo||(fo&&fo.nodeName!="FORM")) return false;
vaf=fo.getAttribute("onsubmit");
vaf=vaf?(typeof(vaf)=="string"?new Function(vaf):vaf):null;
if(vaf&&!vaf()) return false;
pcbf=ac>1?$CB(av[1]):this.oncomplete;
purl=ac>2?av[2]:(fo.action?fo.action:this.url);
pm=ac>3?av[3]:(fo.method?fo.method.toUpperCase():"POST");
if(!pcbf&&!purl) return false;
pc=this.formToStr(fo);
if(!pc) return false;
if(pm) {
if(pm=="POST") send(purl,pc,pcbf,"POST",true);
else if(purl.indexOf("?")>0) send(purl+"&"+pc,"",pcbf,"GET",true);
else send(purl+"?"+pc,"",pcbf,"GET",true);
}
else send(purl,pc,pcbf,"POST",true);
}
/* formToStr
// from SurfChen <surfchen@gmail.com>
// @url http://www.surfchen.org/
// @license http://www.gnu.org/licenses/gpl.html GPL
// modified by xujiwei
// @url http://www.xujiwei.cn/
*/
this.formToStr=function(fc) {
var i,qs="",and="",ev="";
for(i=0;i<fc.length;i++) {
e=fc[i];
if (e.name!='') {
if (e.type=='select-one'&&e.selectedIndex>-1) ev=e.options[e.selectedIndex].value;
else if (e.type=='checkbox' || e.type=='radio') {
if (e.checked==false) continue;
ev=e.value;
}
else ev=e.value;
ev=encode(ev);
qs+=and+e.name+'='+ev;
and="&";
}
}
return qs;
}
}
AHAH
// ==========================================================================
// @function Complete AHAH function
// @author Daniele Florio
// @site www.gizax.it
// @version 1.1.3 experimental
// @thanksTo Andrea Paiola,Walter Wlodarski,Scott Chapman
// @updated 1.1.3 ( execJS function ) @thanks to Giovanni Zona
// (c) 2006 Daniele Florio <daniele@gizax.it>
// ==========================================================================
var completeAHAH = {
loading : 'loading data...',
ahah : function (url, target, delay, method, parameters) {
if ( ( method == undefined ) || ( method == "GET" ) || ( method == "get" ) ){
this.creaDIV(target, this.loading);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req) {
req.onreadystatechange = function() {
completeAHAH.ahahDone(url, target, delay, method, parameters);
};
req.open(method, url, true);
req.send("");
}
}
if ( (method == "POST") || (method == "post") ){
this.creaDIV(target, this.loading);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req) {
req.onreadystatechange = function() {
completeAHAH.ahahDone(url, target, delay, method, parameters);
};
req.open(method, url, true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(parameters);
}
}
},
creaDIV : function (target, html){
if (document.body.innerHTML){
document.getElementById(target).innerHTML = html;
}
else if (document.getElementById){
var element = document.getElementById(target);
var range = document.createRange();
range.selectNodeContents(element);
range.deleteContents();
element.appendChild(range.createContextualFragment(html));
}
},
execJS : function (node) {
var st = node.getElementsByTagName('SCRIPT');
var strExec;
var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
var bOpera = (navigator.userAgent.indexOf('Opera') != -1);
var bMoz = (navigator.appName == 'Netscape');
for(var i=0;i<st.length; i++) {
if (bSaf) {
strExec = st[i].innerHTML;
}
else if (bOpera) {
strExec = st[i].text;
}
else if (bMoz) {
strExec = st[i].textContent;
}
else {
strExec = st[i].text;
}
try {
eval(strExec);
} catch(e) {
alert(e);
}
}
},
ahahDone : function (url, target, delay, method, parameters) {
if (req.readyState == 4) {
element = document.getElementById(target);
if (req.status == 200) {
//this.creaDIV(target, req.responseText);
output = req.responseText;
document.getElementById(target).innerHTML = output;
var j = document.createElement("div");
j.innerHTML = "_" + output + "_";
this.execJS(j);
}
else {
this.creaDIV(target, "ahah error:\n"+req.statusText);
}
}
},
/*
@@ parameters :
fileName = name of your cgi or other
method = GET or POST, default is GET
formName = name of your form
dynamicTarget = name of your dynamic Target DIV or other
@@ usage :
<form id="formName" action="javascript:completeAHAH.likeSubmit('fileName', 'method', 'formName', 'dynamicTarget');">
*/
likeSubmit : function ( file, method, formName, target ) {
var the_form = document.getElementById(formName);
var num = the_form.elements.length;
var url = "";
var radio_buttons = new Array();
var nome_buttons = new Array();
var check_buttons = new Array();
var nome_buttons = new Array();
// submit radio values
var j = 0;
var a = 0;
for(var i=0; i<the_form.length; i++){
var temp = the_form.elements[i].type;
if ( (temp == "radio") && ( the_form.elements[i].checked) ) {
nome_buttons[a] = the_form.elements[i].name;
radio_buttons[j] = the_form.elements[i].value;
j++;
a++;
}
}
for(var k = 0; k < radio_buttons.length; k++) {
url += nome_buttons[k] + "=" + radio_buttons[k] + "&";
}
// submit checkbox values
var j = 0;
var a = 0;
for(var i=0; i<the_form.length; i++){
var temp = the_form.elements[i].type;
if ( (temp == "checkbox") && ( the_form.elements[i].checked) ) {
nome_buttons[a] = the_form.elements[i].name;
check_buttons[j] = the_form.elements[i].value;
j++;
a++;
}
}
for(var k = 0; k < check_buttons.length; k++) {
url += nome_buttons[k] + "=" + check_buttons[k] + "&";
}
// submit all kind of input
for (var i = 0; i < num; i++){
var chiave = the_form.elements[i].name;
var valore = the_form.elements[i].value;
var tipo = the_form.elements[i].type;
if ( (tipo == "submit") || (tipo == "radio") || (tipo == "checkbox") ){}
else {
url += chiave + "=" + valore + "&";
}
}
var parameters = url;
url = file + "?" + url;
if (method == undefined) {
method = "GET";
}
if (method == "GET") {
this.ahah(url, target, '', method, '');
}
else {
this.ahah(file, target, '', method, parameters);
}
}
};