http://bbs.51js.com/thread-65160-1-1.html?
?
?
?
<html xmlns="http://www.w3.org/1999/xht...?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />?
<title>jssp演示</title>?
<script language="javascript">?
/**?
* @description:?
* 使用javascript模仿JSP的页面解析和运行，运行于客户端?
* 允许应用人员象开发JSP页面一样使用<%..%>?
* 允许页面动态包括子页面（同步读取页面）?
*?
**/?
//@--------------------------------- JSSP声明?
var jssp=function(){};?
/**?
* 页面缓存管理实例对象?
*/?
jssp.cacheInstance=null;?
/**?
* 页面加载实例对象?
*/?
jssp.pageLoaderInstance=null;?
/**?
* 在指定dom插入pagePath的执行后的页面内容?
*/?
jssp.render=function(pagePath,dom){?
if(typeof dom=="string") dom=document.getElementById(dom);?
var content=jssp.Core.run(pagePath);?
dom.innerHTML=content;?
}?
//@------------------------------------ JSSP运行配置?
/**?
* 引擎运行全局配置?
*/?
jssp.Config={};?
/**?
* 如果在客户端运行，是否缓存解析的页面?
*/?
jssp.Config.cachable=true;?
/**?
* 当jssp.Config.cacheable为true且在?
*/?
jssp.Config.cacheClass="jssp.Cache.DefaultCache";?
/**?
* 页面内容读取器?
*/?
jssp.Config.pageLoaderClass="jssp.Core.PageLoader.Ajax";?
//@------------------------------------ JSSP页面缓存类?
/**?
* 页面缓存类?
*/?
jssp.Cache=function(){}?
/**?
* 设置缓存?
*/?
jssp.Cache.prototype.set=function(key,cache){}?
/**?
* 得到缓存?
*/?
jssp.Cache.prototype.get=function(key){}?
/**?
* 默认的缓存实现类?
*/?
jssp.Cache.DefaultCache=function(){?
this.caches={};?
}?
jssp.Cache.DefaultCache.prototype.set=function(key,cache){?
this.caches[key]=cache;?
}?
jssp.Cache.DefaultCache.prototype.get=function(key){?
return this.caches[key];?
}?
//@----------------------------------- JSSP运行上下文类?
/**?
* jssp页面的执行上下文对象?
* @member params 请求参数数组?
* @member cookies 操作cookies对象 jssp.Cookies?
* @member out 页面流输出对象 jssp.Out?
* @method setAttribute 设置上下文参数?
* @method getAttribute 得到上下文参数?
* @method removeAttribute 删除上下文参数?
* @method include 动态包含子页面?
* @method getCookies,getParameter,getParameters,getOut?
* @param pageUrl 运行的上下文参数?
* @param context 父页面的上下文对象?
*/?
jssp.Context=function(pageUrl,context){?
this.params=this._resolveParam(pageUrl);?
if(!context){?
this.cookies=jssp.Cookies;?
this.out=new jssp.Out();?
this.attributes=[];?
}else{?
this.context=context;?
this.isIncluded=true;?
}?
}?
/**?
* 解析页面后缀参数?
*/?
jssp.Context.prototype._resolveParam=function(pageUrl){?
var i1=pageUrl.indexOf("?");?
if(i1<=0) return [];?
pageUrl=pageUrl.substring(i1+1);?
var s1=pageUrl.split("&");?
var params=[];?
for(var i=0;i<s1.length;i++){?
var s2=s1[i].split("=");?
var key=s2[0];var value=s2[1];?
var ps=params[key];?
if(!ps) ps=[];?
ps[ps.length]=value;?
params[key]=ps;?
}?
return params;?
}?
/**?
* 设置参数值?
*/?
jssp.Context.prototype.setAttribute=function(key,value){?
if(!this.context)?
this.attributes[key]=value;?
else?
this.context.setAttribute(key,value);?
}?
/**?
* 得到参数值?
*/?
jssp.Context.prototype.getAttribute=function(key){?
if(!this.context)?
return this.attributes[key];?
else?
return this.context.getAttribute(key);?
}?
/**?
* 删除指定键的参数值?
*/?
jssp.Context.prototype.removeAttribute=function(key){?
if(!this.context)?
this.attributes[key]=undefined;?
else?
this.context.removeAttribute(key);?
}?
/**?
* 得到请求参数值?
*/?
jssp.Context.prototype.getParameter=function(key){?
var ps=this.params[key];?
if(!ps) return this.context?this.context.getParameter(key):undefined;?
return ps.join(",");?
}?
/**?
* 得到有重复参数的值?
*/?
jssp.Context.prototype.getParameters=function(key){?
var pss=this.params[key];?
if(!pss) pss=this.context?this.context.getParameters(key):undefined;?
return pss;?
}?
/**?
* 得到cookies对象?
*/?
jssp.Context.prototype.getCookies=function(){?
if(!this.context)?
return this.cookies;?
else?
return this.context.getCookies();?
}?
/**?
* 得到输出流OUT对象?
*/?
jssp.Context.prototype.getOut=function(){?
if(!this.context)?
return this.out;?
else?
return this.context.getOut();?
}?
/**?
* 动态包含子页面?
*/?
jssp.Context.prototype.include=function(childPageUrl){?
this.getOut().print(jssp.Core.run(childPageUrl,this));?
}?
jssp.Context.prototype.isIncluded=false;//判断当前页面是否被包含的?
//@-----------------------------------JSSP运行cookies操作类?
/**?
* 简单操纵cookies方法?
*/?
jssp.Cookies=function(){}?
/**?
* 设置cookie项?
*/?
jssp.Cookies.set=function(key,value){?
document.cookie=key+"="+escape(value)+";";?
}?
/**?
* 得到cookie项?
*/?
jssp.Cookies.get=function(key){?
var aCookie=document.cookie.split("; ");?
for(var i=0;i<aCookie.length;i++){?
var aCrumb=aCookie[i].split("=");?
if(key==aCrumb[0])?
return unescape(aCrumb[1]);?
}?
}?
/**?
* 删除cookies项?
*/?
jssp.Cookies.remove=function(key){?
document.cookie=key+"=null; expires=Fri, 31 Dec 1999 23:59:59 GMT;";?
}?
//@------------------------------------ JSSP页面运行输出流类?
/**?
* 页面流输出对象?
*/?
jssp.Out=function(){?
this.datas=[];//数据流片断?
this._index=0;?
}?
/**?
* 把页面流片断放入缓冲区?
*/?
jssp.Out.prototype.print=function(s){?
this.datas[this._index++]=s;?
}?
/**?
* 输出缓冲区里的数据?
*/?
jssp.Out.prototype.flush=function(){?
var data=this.datas.join("");?
this.datas=[];this._index=0;?
return data;?
}?
//@--------------------------------------JSSP页面核心类声明?
jssp.Core=function(){}?
//@--------------------------------------JSSP页面解析实现类?
/**?
* 页面解析?
* @param pageContent JSSP页面内容?
*/?
jssp.Core.parse=function(pageContent){?
var strBuffer=[];//解析后文本存放的缓冲区?
var point=0;//缓冲区指针?
var lineNumber=1;//解析的当前行?
try{?
var betweenPerc=false;?
var isPrint=false;?
strBuffer[point++]="function($context){\n";?
strBuffer[point++]="var $out=$context.getOut();\n";?
strBuffer[point++]="var $cookies=$context.getCookies();\n";?
strBuffer[point++]="try{\n";?
strBuffer[point++]="$out.print(unescape('";?
var line="";?
var value=pageContent;?
var len=value.length;?
for(var i=0;i<len;i++){?
var nextTwo="";?
if(i<=len-2) nextTwo=value.charAt(i)+value.charAt(i+1);?
var nextThree="";?
if(i<=len-3) nextThree=nextTwo+value.charAt(i+2);?
if(nextTwo=="<%"&&nextThree!="<%="&&nextThree!="<%@"){?
strBuffer[point++]="'));\n";?
betweenPerc=true;?
i+=1;?
}else if(nextTwo=="<%"&&nextThree=="<%="&&nextThree!="<%@"){?
strBuffer[point++]=escape(line)+"'));\n";?
line="";?
strBuffer[point++]=" $out.print( ";?
betweenPerc=true;?
isPrint=true;?
i+=2;?
}else if(nextTwo=="<%"&&nextThree!="<%="&&nextThree=="<%@"){?
i+=3;?
var directive="";?
while(nextTwo!="%>"){?
directive+=value.charAt(i);?
i++;?
if(i<=value.length-2){?
nextTwo=value.charAt(i)+value.charAt(i+1);?
}?
}?
strBuffer[point++]=escape(line)+"'));\n";?
line="";?
strBuffer[point++]=jssp.Core.parse._handleDirective(directive);?
strBuffer[point++]=" $out.print(unescape('";?
i++;?
}else if(nextTwo=="%>"){?
strBuffer[point++]=(isPrint?");":"")+"\n $out.print(unescape('";?
if(!betweenPerc) throw new jssp.Core.parse.ParseException("解析错误","必须用'%>'作为结束标签");?
betweenPerc=false;?
isPrint=false;?
i+=1;?
}else if(value.charAt(i)==String.fromCharCode(10)){?
if(!betweenPerc){?
strBuffer[point++]=escape(line)+"\\n'));\n"+" $out.print(unescape('";?
line="";?
lineNumber++;?
}?
}else if(value.charAt(i)==String.fromCharCode(13)){?
if(betweenPerc) strBuffer[point++]="\n";?
}else{?
if(betweenPerc)?
strBuffer[point++]=value.charAt(i);?
else?
line+=value.charAt(i);?
}?
}?
strBuffer[point++]=escape(line)+"'));\n";?
strBuffer[point++]="}catch(e){\n";?
strBuffer[point++]="return '"+"执行页面发生异常.异常类型:'+e.name+'. 错误消息: '+e.message;\n";?
strBuffer[point++]="}\n";?
strBuffer[point++]="if(!$context.isIncluded) return $out.flush();\n";?
strBuffer[point++]="}\n";?
}catch(e){?
point=0;?
strBuffer=[];?
strBuffer[point++]="function($context){\n";?
strBuffer[point++]="return \""+"An exception occurred while parsing on line "+lineNumber+". Error type: "+e.name+". Error message: "+e.message+"\";";?
strBuffer[point++]="}";?
}?
var out=strBuffer.join("");?
return out;?
}?
/**?
* 解析指示头?
*/?
jssp.Core.parse._handleDirective=function(directive){?
var i = 0;?
var tolkenIndex = 0;?
var tolken = new Array();?
//Skip first spaces;?
while ( directive.charAt(i) == ' ' ) {?
i++;?
}?
tolken[tolkenIndex] = "";?
while ( directive.charAt(i) != ' ' && i <= directive.length ) {?
tolken[tolkenIndex] += directive.charAt(i);?
i++;?
}?
tolkenIndex++;?
//Skip first spaces;?
while ( directive.charAt(i) == ' ' ) {?
i++;?
}?
tolken[tolkenIndex] = "";?
while ( directive.charAt(i) != ' ' && directive.charAt(i) != '=' && i <= directive.length ) {?
tolken[tolkenIndex] += directive.charAt(i);?
i++;?
}?
tolkenIndex++;?
//Skip first spaces;?
while ( directive.charAt(i) == ' ' ) {?
i++;?
}?
if( directive.charAt(i) != '=' )?
throw new jssp.Core.parse.ParseException("Sintax error", "Tolken = expected attribute");?
i++?
//Skip first spaces;?
while ( directive.charAt(i) == ' ' ) {?
i++;?
}?
tolken[tolkenIndex] = "";?
while ( directive.charAt(i) != ' ' && i <= directive.length ) {?
tolken[tolkenIndex] += directive.charAt(i);?
i++;?
}?
tolkenIndex++;?
//Skip first spaces;?
while ( directive.charAt(i) == ' ' && i <= directive.length ) {?
i++;?
}?
tolken[tolkenIndex] = "";?
while ( directive.charAt(i) != ' ' && directive.charAt(i) != '=' && i <= directive.length && i <= directive.length ) {?
tolken[tolkenIndex] += directive.charAt(i);?
i++;?
}?
tolkenIndex++;?
if( directive.charAt(i) != '=' && i <= directive.length )?
throw new jssp.Core.parse.ParseException("Sintax error", "Tolken = expected after attribute" );?
i++?
tolken[tolkenIndex] = "";?
while ( directive.charAt(i) != ' ' && i <= directive.length && i <= directive.length ) {?
tolken[tolkenIndex] += directive.charAt(i);?
i++;?
}?
var file = "";?
var context = "";?
if ( tolken[0] != "include" )?
throw new jssp.Core.parse.ParseException("Sintax error","Directive " + tolken[0] + " unknown.") ;?
if ( tolken[1] != "file" )?
throw new jssp.Core.parse.ParseException("Sintax error", "Attribute file expected after include." );?
else file = tolken[2];?
if ( tolken[3] != "context" && tolken[3] != "" )?
throw new jssp.Core.parse.ParseException( "Sintax error", "Attribute context expected after file.");?
else if ( tolken[3] == "context" )?
context = tolken[4]?
else?
context = "$context";?
var out = "$context.include(" + file + ");\n";?
return out;?
}?
/**?
* 解析异常?
*/?
jssp.Core.parse.ParseException=function(name,message) {?
this.name=name;?
this.message=message;?
}?
//@--------------------------------------------页面内容加载接口定义?
/**?
* 页面内容加载类接口定义?
*/?
jssp.Core.PageLoader=function(){}?
/**?
* 读取页面文本?
*/?
jssp.Core.PageLoader.prototype.loadPage=function(pagePath){throw "不能直接调用接口或您还未实现此方法！";}?
//@--------------------------------------------页面运行实现方法?
/**?
* @param pagePath 加载页面?
* @parma context 上下文对象?
*/?
jssp.Core.run=function(pagePath,context){?
if(!jssp.pageLoaderInstance){?
//jssp引擎初始化?
if(jssp.Config.cachable) jssp.cacheInstance=eval("new "+jssp.Config.cacheClass+"();");?
jssp.pageLoaderInstance=eval("new "+jssp.Config.pageLoaderClass+"();");?
}?
var key=pagePath;if(key.indexOf("?")>0) key=key.substring(0,key.indexOf("?"));?
var processer=jssp.Config.cachable?jssp.cacheInstance.get(key):null;?
if(!processer){?
eval("processer="+jssp.Core.parse(jssp.pageLoaderInstance.loadPage(pagePath)));?
if(jssp.Config.cachable) jssp.cacheInstance.set(key,processer);?
}else{?
//alert("cache")?
}?
if(!context)?
context=new jssp.Context(pagePath);?
else?
context=new jssp.Context(pagePath,context);?
return processer(context);?
}?
//@-----------------------------------------------AJAX加载页面实现?
jssp.Core.PageLoader.Ajax=function(){}?
jssp.Core.PageLoader.Ajax.prototype.loadPage=function(pagePath){?
var content=jssp.Ajax.send(pagePath,"GET",false);?
if(!content) {?
alert("请求页面:"+pagePath+" 返回为null！");return null;?
}?
return content;?
}?
//@-----------------------------------------------AJAX操作实现?
jssp.Ajax=function(){}?
/**?
* 建立HTTP连接?
*/?
jssp.Ajax.createHttpRequest=function(){?
if(window.XMLHttpRequest)?
return new XMLHttpRequest();?
var request=null;?
try{?
request=new ActiveXObject("Msxml2.XMLHTTP.4.0");?
}catch(e){?
try{?
request=new ActiveXObject("Msxml2.XMLHTTP");?
}catch(e){?
try{?
request=new ActiveXObject("microsoft.XMLHTTP");?
}catch(e){?
throw "XMLHTTPRequest组件客户端不支持！";?
}?
}?
}?
return request;?
}?
/**?
* 发送AJAX请求?
* @param url 请求页面?
* @param method 请求方法 get or post?
* @param async 是否为异步调用?
* @param callback 回调函数?
* @param preHook 调用前执行函数?
* @param postHook 调用后请求返回执行函数?
*/?
jssp.Ajax.send=function(url,method,async,callback,preHook,postHook){?
method=method.toUpperCase();?
if(typeof preHook=="function") preHook();?
var request=jssp.Ajax.createHttpRequest();?
request.open(method,url,async);?
if(async){?
if(typeof callback!="function") throw "必须要设置回调函数";?
request.onreadystatechange=function(){?
jssp.Ajax.callback(request,callback,postHook);?
};?
}?
request.send(null);?
if(!async) {?
if(request.status==200||request.status==304)?
return jssp.Ajax._chartset(request);?
else?
return null;?
}?
}?
/**?
* 接受响应，调用自定义回调函数?
*/?
jssp.Ajax.callback=function(response,callback,postHook){?
if(response.readyState!=4) return;?
var text;?
if(response.status==200||response.status==304){?
text=jssp.Ajax._chartset(response);?
}?
callback(text);?
if(typeof postHook=="function") postHook();?
}?
/**?
* 中文乱码处理?
*/?
jssp.Ajax._chartset=function(r){?
var t=bytes2BSTR(r.responseBody);?
return t;?
}?
</script>?
<script language="javascript">?
jssp.Config.pageLoaderClass="jssp.Core.PageLoader.CustomerInput";//设置页面读取接口?
jssp.Config.cachable=false;?
jssp.Core.PageLoader.CustomerInput=function(){}?
jssp.Core.PageLoader.CustomerInput.prototype.loadPage=function(pagePath){?
if(pagePath.substring(0,10)!="hello.jssp") return "测试包含子页面,路径:"+pagePath;?
return document.getElementById("pageContent").value;?
}?
function showPage(){?
jssp.render("hello.jssp?name="+Math.random(),"pageArea");?
}?
</script>?
<style type="text/css">?
<!--?
.STYLE1 {color: #FFFFFF}?
-->?
</style>?
</head>?
<body>?
输入JSSP脚本内容：?
<textarea id="pageContent" style="width:100%;" rows="15">?
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="2">?
<tr>?
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">order</span></td>?
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">number1</span></td>?
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">number2</span></td>?
<td align="center" valign="middle" bgcolor="#666699"><span class="STYLE1">number3</span></td>?
</tr>?
<%?
var beginTime=new Date();?
for(var i=0;i<100;i++){?
var color=i%2?"#eeeeee":"#aaaaaa";?
%>?
<tr bgcolor="<%=color%>">?
<td align="center" valign="middle" ><%=i%></td>?
<td align="center" valign="middle" ><%=Math.random()%></td>?
<td align="center" valign="middle" ><%=Math.random()%></td>?
<td align="center" valign="middle" ><%=Math.random()%></td>?
</tr>?
<%}%>?
</table>?
<%?
window.alert("耗时:"+(new Date()-beginTime)+"ms");?
%>?
</textarea>?
<button onClick="showPage()">显示内容</button>?
<hr>?
<div id="pageArea"></div>?
</hr>?
</body>?
</html>