代码网站解决方案

版权所有IBM公司2008商标使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第1页,共14使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序学习如何使用客户端和服务器端上的HTML/DOM/JavaScript支持构建Jaxer应用程序KenRamirez创始人AxsysTechnologyGroup2008年9月12日熟悉Jaxer,第一个真正的AsynchronousJavaScript+XML(Ajax)服务器.
Jaxer允许在服务器端执行JavaScript代码、DocumentObjectModel(DOM)和HTML,并允许您从客户端异步访问服务器端功能.
本文描述Jaxer的特性,并展示Jaxer甚至在其萌芽时期就必须提供的巨大潜能.
传统上,要为基于Web的客户机提供比较丰富的客户机功能,必须创建基于Web的应用程序,它由来自各种不同技术的同质系统组成,其中可能包括:服务器端Web或应用服务器,比如ApacheHTTPServer、MicrosoftInternetInformationServices(IIS)、SunJavaWebServer、IBMWebSphere或BEAWebLogic服务器端脚本或处理语言,比如Java、PHP、JavaServerPages(JSP)或ActiveServerPages(ASP)客户端脚本和格式化,比如HTML、CascadingStyleSheets(CSS)、JavaScript或DOMHTTP通信协议或应用程序编程接口(API),比如XMLHttpRequests或JavaScriptSerializedObjectNotation(JSON)Ajax资源中心请访问Ajax资源中心,这是有关Ajax编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki和新闻.
任何Ajax的新信息都能在这里找到.
但是现在,您可以使用Jaxer,一种新的Ajax服务器,不仅将所有这些技术集成到一个可部署服务器中,还使用一些相同的基于客户端技术(比如JavaScript代码、DOM等)提供了服务器端脚本和处理.
Jaxer是免费的开源代码,您可以原样使用,或者使用其JavaScript框架进一步扩展.
想象一下,能够直接在HTML页面中使用JavaScript代码,并简单指明代码应在客户端返回HTML之前在服务器端执行.
这将允许客户端直接与服务器端进一步通信,而无需刷新页面.
此外,得到的developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第2页,共14HTML可以基于在服务器端执行的JavaScript代码.
这将减少需要使用的技术种类和您必须编写的代码量,从而为开发人员和用户提供更好的整体体验.
对于用户,您现在可以提供与富原生应用程序更接近的基于Ajax的功能.
Jaxer使其成为可能,因为它实际上是第一个真正的Ajax服务器.
您不需要确定您的Ajax代码运行在哪个浏览器中.
您也不必编写协议代码来执行服务器通信.
通过调用简单的JaxerAPI,您提供了具有最少缺陷的健壮的Web应用程序.
甚至更重要的是,您再也不必使用内嵌的JavaScrip公开所有代码.
您实际上可以使用Jaxer统一客户机代码与服务器代码,将策略代码安全地隐藏在防火墙后面,并允许它仍可从客户机访问.
安装在使用Jaxer开发任何基于Web的应用程序之前,您首先必须将其安装在您的机器或开发环境中.
有三个选择.
Jaxer可用于MicrosoftWindows、MacOSX或Linux.
Jaxer安装是自包含、独立的Apache/Jaxer服务器.
但是,您还可以在现有的Apache或Jetty环境中将其作为模块安装.
Aptana报告计划在不久的将来支持IIS.
出于本文目的,因为大多数开发人员在Windows上编码,然后部署到Windows或*NIX环境(比如UNIX或Linux)中,所以我选择安装独立的Windows版本.
在Windows上安装十分简单.
您只需转至AptanaJaxer下载页面(请参见参考资料中此页面的链接),并下载Windows独立版本的压缩文件(.
zip).
在撰写本文时,最新的版本是0.
9.
7.
2472.
下载并打开压缩文件之后,将AptanaJaxer文件夹复制到硬盘驱动器上.
我直接复制到我的C:驱动器上.
因此,我可以通过转至C:\AptanaJaxer访问我的根文件夹来访问Jaxer.
AptanaJaxer文件夹中有许多文件和文件夹.
根文件夹包含下列文件:ConfigureFirewall.
exeLICENSE.
TXTREADME.
TXTStartServers.
bat它还包含下列文件夹:Apache22datajaxerlocal_jaxerlogspublictmp启动并测试Jaxer服务器启动服务器甚至比前面的安装更简单.
只需运行StartServers.
bat文件,然后就显示启动窗口,如图1所示.
ibm.
com/developerWorks/cn/developerWorks使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第3页,共14图1.
Jaxer启动窗口只要您打算在Jaxer环境中使用和测试应用程序,就必须一直打开此窗口.
通过打开浏览器窗口并导航至http://localhost:8081/aptana,可以测试Jaxer服务器是否正在正常运行.
AboutJaxer页面显示在浏览器中,如图2所示.
图2.
AboutJaxer页面Samples文件夹中还有其他基于Jaxer的Web应用程序,位于\jaxer\aptana\samples中.
您将找到几个应用程序,其中包括表1中描述的那些.
表1.
JaxerSamples文件夹中包括的应用程序应用程序描述developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第4页,共14chat演示聊天消息的发送和接收,而不必刷新整个页面.
csajax使用Ajax为那些尝试使用JavaScript代码与客户机浏览器某些域通信的Web应用程序通常面临的问题提供解决方案.
相反,基于浏览器的客户机使用Jaxer与服务器通信,然后允许服务器与其他域通信,实际上为跨站点问题提供了解决方案.
有关此问题的更多信息,请参见"参考资料".
logging展示如何包装服务器端日志并使用客户端JavaScript进行访问.
rss-sample演示可以如何划分页面以在页面的一部分中显示新故事列表,并在页面的另一部分中显示选定的故事.
故事显示在自己的区段中,而不会刷新整个页面;一切工作使用Ajax和Jaxer完成.
smtp-email允许使用JaxerSimpleMailTransferProtocol(SMTP)对象异步发送电子邮件.
tasks允许使用异步通信在单个to-do或任务列表中添加、修改或删除项目.
wikilite允许用户以编辑模式为简单的wiki提供文本,保存文本,然后在将来查看文本.
可以通过单击图2所示的SamplesandTools链接,访问这些示例.
得到的SamplesandTools页面如图3所示.
图3.
SamplesandTools页面在本文后面,您将使用任务示例应用程序进一步了解AptanaJaxer.
您可能已经注意到,还有几个Web工具和诊断工具可用于与Jaxer交互,并在出现问题时诊断问题.
例如,单击ServerDiagnostics链接返回JaxerDiagnostics页面,如图4所示.
ibm.
com/developerWorks/cn/developerWorks使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第5页,共14图4.
JaxerDiagnostics页面添加内容介绍Jaxer根文件夹时,我提到了它里面有几个子文件夹.
其中一个文件夹名为public.
您可以使用此文件夹提供自己的内容.
如果这样做,而且您仅在浏览器地址行中指定host:port地址,则它将从浏览器中调用.
例如,http://localhost:8081/返回您提供的任何索引文件.
甚至更好的是,您可以在public文件夹中创建多个项目,并通过名称加载项目.
例如,创建名为my_project的项目.
此文件夹的完整路径应为C:\\public\my_project.
现在,创建名为index.
html的索引文件,并将其放入my_project文件夹中.
通过在浏览器中输入其路径,可以使用Jaxer服务器加载此文件.
在这种情况下,输入http://localhost:8081/my_project.
可以在此文件夹或其任何子文件夹中放置任何HTML、图片、JavaScript文件或CSS文件.
在我的my_project中,我选择创建一个index.
html文件,它是从Aptana网站上获得的快速启动代码中借来的.
此代码演示了服务器端DOM、JavaScript代码和回调,如清单1所示.
清单1.
测试Jaxer的示例代码QuickJaxerSampleQuickJaxerSampleThisdemonstratesserver-sideDOM,JavaScriptandcallbacks.
developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第6页,共14document.
write("ThisisJaxerversion"+Jaxer.
buildNumber);functiongetLatestVersion(){varurl="http://update.
aptana.
com/update/jaxer/win32/version.
txt";try{varversionString=Jaxer.
Web.
get(url);}catch(e){throw"Couldnotretrieveversionnumberfrom"+url;}varmatches=versionString.
match(d]+)\"/);return(matches&&matches.
length>1)matches[1]:"(unknown)";}执行时,此代码生成如图5所示的页面.
图5.
my_project中使用的快速启动代码如果查看发送到浏览器中的实际HTML源码,您将发现它与原始代码非常不同.
请看清单2.
清单2.
返回给浏览器的Jaxer生成的HTML代码Jaxer.
Callback.
pageSignature=-1837648436;Jaxer.
Callback.
pageName='localhost:8081/my_project';Jaxer.
CALLBACK_URI='/jaxer-server/callback';Jaxer.
ALERT_CALLBACK_ERRORS=true;QuickJaxerSampleibm.
com/developerWorks/cn/developerWorks使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第7页,共14QuickJaxerSampleThisdemonstratesserver-sideDOM,JavaScriptandcallbacks.
functiongetLatestVersion(){returnJaxer.
remote("getLatestVersion",arguments);}functiongetLatestVersionAsync(callback){returnJaxer.
remote("getLatestVersion",arguments,callback);}ThisisJaxerversion0.
9.
7.
2472注意,原始代码不需要包括任何外部JavaScript文件.
接下来,查看一下块封装的JavaScript部分.
此代码与通常为浏览器编写的JavaScript代码之间的惟一差别是,此代码使用runat属性指定此代码应使用server-proxy执行.
Jaxer高级视图在查看Jaxer架构之前,首先看一下传统应用程序的架构,如图6所示.
图6.
传统应用程序堆栈所有堆栈从客户机到服务器的请求开始.
在传统情况下,服务器端使用一种或多种技术处理请求来进行响应,这些技术可能包括PHP、Java代码、C#、RubyOnRails或任何数量的其他脚本/对象技术.
服务器端可以执行数据库或文件访问,处理数据,然后格式化数据,并将其返回给浏览器.
这些技术是单独的组件,必须通过连接代码连接在一起.
如果基于Web的应用程序使用Ajax,它必须采取步骤来处理客户端请求,封装调用/参数,并发送请求.
在服务器端,代码必须打开请求以确定调用/参数,然后执行调用,接收响应,重新封装响应,并将其返回给客户机.
然后,客户机必须展开响应,最后进行处理.
封装/打开可以使用JSON完成,实际的请求/响应/回调可以使用XMLHttpRequest完成.
相比之下,请查看一下Jaxer堆栈,如图7所示.
developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第8页,共14图7.
Jaxer应用程序堆栈注意,堆栈要简单得多.
还要注意,无需外部脚本;全部操作在实际的HTML中处理.
通过使用runat属性指定位置,JavaScript代码只瞄准它运行的位置.
当客户机代码需要调用服务器端时,Jaxer无缝地将JavaScript包装器代码封装到返回给浏览器的HTML中.
这就是清单2为什么与清单1中的原始代码有所不同的原因.
如果您觉得奇怪的话,Jaxer的核心实际是用C++编写的.
它还集成了Mozilla引擎,为HTML、CSS和JavaScript代码提供解析和API.
从程序员观点来看,您看到的是作为框架提供的纯JavaScript代码,可用于实现服务器端JavaScript代码和客户端Ajax.
Jaxer提供服务来支持应用程序的开发,其中需要下列技术:Ajax来自客户机或服务器的数据库通信客户端或服务器端日志会话操作客户端或服务器端网络API连接文件对象等等……此外,可以将Jaxer与传统技术(比如Java代码)集成以帮助解决跨平台问题.
示例为了更好地理解如何构建Jaxer应用程序,我想为您演示Jaxer附带的示例站点.
您将查看任务应用程序,您可以通过转至http://localhost:8081/aptana/samples/tasks来访问它.
将显示图8所示的页面.
我已经添加了一些任务.
图8.
任务示例主页面ibm.
com/developerWorks/cn/developerWorks使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第9页,共14从用户观点来看,任务应用程序非常简单.
您只需在New框中键入新任务并单击add.
要删除项目,只需单击您要删除的项目旁边的复选框.
请查看清单3,其中显示了任务HTML页面中嵌入的一些JavaScript代码.
清单3.
客户机和服务器上运行的任务JavaScript代码/**EasyaccesstoanamedelementintheDOM*/function$(id){returndocument.
getElementById(id);}/***/functionaddTaskToUI(description,id){varnewId=id||Math.
ceil(1000000000*Math.
random());vardiv=document.
createElement("div");div.
id="task_"+newId;div.
className="task";varcheckbox=document.
createElement("input");checkbox.
setAttribute("type","checkbox");checkbox.
setAttribute("title","done");checkbox.
setAttribute("id","checkbox_"+newId);Jaxer.
setEvent(checkbox,"onclick","completeTask("+newId+")");div.
appendChild(checkbox);varinput=document.
createElement("input");input.
setAttribute("type","text");input.
setAttribute("size","60");input.
setAttribute("title","description");input.
setAttribute("id","input_"+newId);input.
value=description;Jaxer.
setEvent(input,"onchange","saveTaskInDB("+newId+",this.
value)");div.
appendChild(input);$("tasks").
insertBefore(div,$("tasks").
firstChild);if(!
Jaxer.
isOnServer){saveTaskInDB(newId,description);}}首先,注意有多个JavaScript块.
第一个块具有自己的runat属性集,这意味着其中的代码将可用于客户机和服务器端.
清单3中的函数提供了可由在客户机和服务器端上执行的其他函数访问的一般函数.
$函数只基于提供的ID返回一个元素.
addTaskToUI使用createElement和insertBefore方法创建用户接口,在客户端提供任务.
此处对任何特定于Jaxer的API没有太多调用,只有附加到输入和复选框的事件定义,以及与Jaxer.
isOnServer属性的逻辑比较,如果JavaScript代码当前在服务器端执行,Jaxer.
isOnServer则设置为真.
developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第10页,共14Jaxer.
setEvent用于建立通信代理,此代理用于从客户机对服务器进行调用.
在下文中,我将详细介绍.
基于传递给runat属性的值,下一段JavaScript代码固定在服务器上运行,如清单4所示.
清单4.
任务服务器端JavaScript代码/**TheSQLtocreatethedatabasetablewe'llusetostorethetasks*/varsql="CREATETABLEIFNOTEXISTStasks"+"(idINTEGERNOTNULL"+",descriptionVARCHAR(255)"+",createdDATETIMENOTNULL"+")";//ExecutethesqlstatementagainstthedefaultJaxerdatabaseJaxer.
DB.
execute(sql);/**Setthe'onserverload'propertytocallourfunction*oncethepagehasbeenfully*loadedserver-side.
Wecouldhavealsosetthisattribute*onthetagofour*pageandhaditcallafunctionbyname.
*/window.
onserverload=function(){varresultSet=Jaxer.
DB.
execute("SELECT*FROMtasksORDERBYcreated");for(vari=0;i0)//taskalreadyexists{Jaxer.
DB.
execute("UPDATEtasksSETdescription=WHEREid=",[description,id]);}else//insertnewtask{Jaxer.
DB.
execute("INSERTINTOtasks(id,description,created)"+"VALUES[id,description,newDate()]);}}//Becausewewantthisfunctioncallablefromtheclient,wesetitsproxy//valuetotruesaveTaskInDB.
proxy=true;/**Deleteataskfromthedatabase*/functiondeleteSavedTask(id)ibm.
com/developerWorks/cn/developerWorks使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第11页,共14{Jaxer.
DB.
execute("DELETEFROMtasksWHEREid=",[id]);}//Becausewewantthisfunctioncallablefromtheclient,wesetitsproxy//valuetotruedeleteSavedTask.
proxy=true;运行此示例时,请在浏览器中查看由Jaxer生成的源代码.
注意,清单4中的代码消失了.
非常方便的是,定义的函数已经转换为真实函数的简单shell.
取而代之的是,创建了简单的Jaxer远程.
清单4提供了一些有趣的JavaScript代码.
虽然全部是JavaScript代码,但要现在可以在服务器端定义和运行JavaScript代码.
在此代码段的第一部分中,注意创建了StructuredQueryLanguage(SQL)表(如果不存在的话).
接下来,建立了类似浏览器端的onload的事件,只不过这个位于服务器端.
在Jaxer加载整个文件,并记录所有的全局服务器函数和变量之后,调用定义并分配给onserverload的函数.
在本例中,定义的方法包括saveTaskInDB和deleteSavedTask.
要让函数可从客户端调用,必须定义代理.
通过将函数的proxy属性设置为真,可完成此操作.
Jaxer加载文件之后,分配给onserverload的功能将执行.
在本例中,函数执行SQL调用从数据库中检索现有任务.
接下来,它继续遍历所有任务并调用addTaskToUI方法.
如果您没记错的话,此方法将复选框和输入框插入到HTML文档中.
但等一等!
在本例中,这将意味着,服务器实际正在将这些复选框和输入框推入文档中.
在服务器端执行此代码时,惟一在addTaskToUI中不执行的代码是逻辑检查中封装的代码,用于查看isOnServer是真还是假.
只有客户端需要这段代码,用于对服务器执行远程调用,以将任务添加到数据库中.
清单4的函数中散布着各种Jaxer调用,大多数用于处理数据库交互.
而且,您可以看到,不需要任何外部组件、facade或DataAccessObjects(DAO).
它使用对JaxerAPI的简单调用来执行SQL函数.
切记,没有什么可以阻止您使用更特定的JavaScript组件封装这些简单的调用,这些组件似乎更熟悉数据库的实际详细信息,实际上通过SQL数据库提供了一个facade.
任务示例中其余的JavaScript代码只处理您与表单控件交互时发生的事件,如清单5所示.
清单5.
任务中其余的JavaScript代码,仅在客户端执行.
/**Thisclientfunctionsetsataskascompletedand*callstheserver-sidefunction*'deleteSavedTask'toremoveitfromthedatabase*/functioncompleteTask(taskId){vardiv=$("task_"+taskId);div.
parentNode.
removeChild(div);deleteSavedTask(taskId);}/**Createanewtaskandaddittotheuserinterface*/functionnewTask(){vardescription=$('txt_new').
value;developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第12页,共14if(description!
=''){addTaskToUI(description);$('txt_new').
value='';}}/**Createanewtaskiftheenterkeywashit*/functionnewKeyDown(evt){if(evt.
keyCode==13){newTask();returnfalse;}}此代码是普通的旧JavaScript客户机代码,仅在客户端执行.
但是要注意,这些函数调用了服务器端JavaScript代码中封装的函数.
HTML生成的代码为这些函数提供代理方法,这些方法调用服务器端的远程方法.
服务器端方法的实际函数或代码绝不公开给客户端.
结束语我希望您能够看到Jaxer必须提供的巨大潜能,甚至是在早期阶段.
是的,它正出于萌芽阶段,可能还有待成熟.
但是,它展示了许多承诺.
毕竟,它可以在服务器端运行JavaScript代码,在客户端运行Ajax,而且构建于许多现有的成熟技术之上,仅仅这些事实就足够有说服力.
它很容易设置,而且可以运行在现有Web服务器环境中,而不出现任何问题,或很少出现问题.
我在我的Windows机器上进行了尝试,该机器当前运行Apache以及PHP、MySQL等,没有出现任何问题.
它从来没有停止我的其他Apache实例,而且能够在端口8081上与Jaxer实例通信,也没有出现问题.
我看到的惟一可能出现问题的情况是,您当前正将端口8081用于其他地方(比如Tomcat).
ibm.
com/developerWorks/cn/developerWorks使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第13页,共14参考资料学习您可以参阅本文在developerWorks全球网站上的英文原文.
在Wikipedia了解有关跨站点脚本的更多信息.
请参阅作者的博客和网站,获得详细的后续介绍,将分别针对Jaxer的JavaScript框架的各个部分.
Ajax资源中心:developerWorks上所有有关Ajax的问题都可以在这里找到解答.
访问developerWorks开源专区,获得广泛的how-to信息、工具和项目更新,帮助您使用开源技术进行开发,并与IBM产品结合使用.
随时关注developerWorks技术活动和网络广播.
浏览技术书店,了解有关这些主题和其他技术主题的书籍.
获得产品和技术转至AptanaJaxer下载页面为您的操作系统下载正确版本的Jaxer.
下载IBM产品评估版,并从DB2、Lotus、Rational、Tivoli和WebSphere获得应用程序开发工具和中间件产品.
讨论查阅developerWorks博客,参与developerWorks社区.
developerWorksibm.
com/developerWorks/cn/使用第一个真正的Ajax服务器AptanaJaxer构建Ajax应用程序第14页,共14关于作者KenRamirezKenRamirez是AxsysTechnologyGroup的创始人,该公司通过AxsysHosting为客户提供托管和定制开发Web站点的服务.
Ken还通过他的BuildMySiteTonight.
com网站为那些寻求经济合理的网站解决方案的小企业业主提供服务.
其公司专注于提供PHP、MySql、Linux、XHTML/CSS、AdobeFlash和E-commerce以及内容管理的解决方案.
您可以通过AxsysHosting.
BlogSpot.
com联系到Ken.
版权所有IBM公司2008(www.
ibm.
com/legal/copytrade.
shtml)商标(www.
ibm.
com/developerworks/cn/ibm/trademarks/)