|
|
<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)+"http://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>
JavaScript技術：仿服務器端腳本方式的JS模板實現方法，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
