看看如何在Struts应用中施展AJAX魔法Word格式文档下载.docx
- 文档编号:16354321
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:12
- 大小:119.20KB
看看如何在Struts应用中施展AJAX魔法Word格式文档下载.docx
《看看如何在Struts应用中施展AJAX魔法Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《看看如何在Struts应用中施展AJAX魔法Word格式文档下载.docx(12页珍藏版)》请在冰豆网上搜索。
AJAX和现有的动态HTML技术非常相似,并在其上增加了一个发送到“后台”服务器的请求来获取需要的新的或者更新的信息。
AJAX的机制在其他地方已经有详细的说明――请查看本文后的Resources来获取更多。
但是你至少需要知道:
1.XMLHttpRequest(如果你使用的是IE浏览器的话,则是Microsoft.XMLHTTP的ActiveX的对象)。
这些对象,你可以在web页面中使用JavaScript调用。
他们允许你作为后台的调用方式来请求web服务器的内容(例如,在表单提交后,屏幕并不像平时一样显示“空白”)。
2.XMLHttpRequest和Microsoft.XMLHTTP返回的内容可以作为XML或者文本来处理。
JavaScript(在你页面上的)可以使用请求的新内容来更新页面。
3.整个处理过程可以由普通的JavaScript事件来触发:
onclick,onchange,onblur,等。
在你的Struts应用中使用AJAX
你阅读了本文,然后你会对使用AJAX来创建动态的web页面感兴趣,并且想知道如何将它加入到你的Struts应用中。
这只是选择之一。
那么你会如何选择呢?
·
等待,知道Struts的下一个版本融合了AJAX技术。
如果Struts开发者准备开发一个新的应用,这或许会是一个好的选择。
再后面,可能会是要求JSF也这样做――对其本身并不一件坏事,但是对于已经存在的系统这将会带来最根本的改变。
你也可以直接采用新的方法,比如DirectWebRemoting(DWR)和RubyonRails,这些都是专为建立AJAX应用的。
如果你考虑不使用Struts来开发web的话,那么这些都是很又用的框架,并且值得一试。
但是,这也同时意味着你必须要重写你的应用。
在你已经存在的Struts应用中增加AJAX。
既然AJAX只是一项技术而并非框架,那么它就很容易融入到Struts中。
作为现有的系统,其稳定性(如,保持现有的库文件)是相当重要的。
所以这个方法被推荐,并且我们将在后面详细介绍。
我们选择在Struts应用中增加AJAX的优势是:
1.它并不需要任何新的库文件或者服务器代码;
只需要使用现有的Struts库文件和action。
2.解决方案中所有部分――JavaScript,XML,Java和Struts――早已为广泛所知。
3.此应用可以一块一块地移植到AJAX;
我们可以确定哪些部分对用户有益,并首先将它们更新到动态AJAX显示。
实现方案
我们如何真正的贯彻我们的选择呢?
我们首先应该注意一个“标准的”(没有AJAX)Struts应用是如何工作的。
在此应用中,一个一般的事件流程如下:
1.使用点击超链接或者表单的提交按钮,用户发送请求。
2.web服务器运行处理请求的StrutsAction来生成一个web页面。
3.浏览器显示web页面。
4.当用户点击保存的时候,信息由Struts框架中一个ActionForm类来转换并发送到服务器。
5.然后,Struts框架调用StrutsAction来出来请求(如,保存数据到数据库中)。
6.页面再一次回传,处理流程继续。
现有的Struts应用
一个演示事件流程的简单Struts应用可以在以下地址下载:
struts-non-ajax.zip。
此基于Struts的应用,是基于用户的输入显示或者隐藏蓝色和绿色的表格。
图1显示了载入初始页面的画面。
图2显示了用户输入值并点击了提交后的画面。
虽然简单,但它已经足以表示一个Struts的工作流程。
图1.没有AJAX的例子:
初始屏幕
图2.没有AJAX的例子:
输入值并点击了提交
服务器端的代码是:
一个StrutsAction使用struts-config.xml中定义的值转发到(相同的)JSP。
这个例子代码中一些需要注意的地方是:
struts-config.xml文件将所有的请求重定向到http:
//localhost:
8080/struts-non-ajax/(或者和你自己的服务器相同)的index.jsp。
index.jsp包含了一个两个文本框的Strutsform(showBlue和showGreen)。
该页面同样包含了标签,但是如同两个文本框被初始化为空,标签之间的内容并不显示。
用户输入值(true或者false)并点击提交按钮,处理控制(经过Struts框架,读取struts-config.xml)提交到SampleAction类中。
SampleAction记录下值,然后转发到index.jsp。
一个成熟的Struts应用可能会处理更多的事情,不如保存或者查询数据库等。
index.jsp现在重新处理请求;
如果ShowBlue或者ShowGreen的值是true,这些表格就显示出来。
该应用并没有任何“错误”。
类似的Struts项目好多年都是这样做的。
但是,我们如何在不添加复杂的JavaScript或者频繁的表单提交的前提下,为此应用增加动态的元素呢?
我们的第一个StrutsAJAX应用
观察下下面的图3和图4。
第一眼看上去,它们和前面的例子没有说明区别。
它们的不同之处在于,页面载入后(图3)然后文本框中的值改变了,窗体自动提交而不显示空白的,然后在图4中显示结果。
普通的提交按钮仍然在,你也可以选择使用它。
图3.页面载入后的AJAX例子
图4.AJAX调用后的AJAX例子
添加AJAX是出奇的容易。
服务器端的代码和前面的例子是一样的:
一个Struts的ActionForm来后去数据,一个Struts的Action来执行需要的任务(例如,存储数据库)然后转发到适当的JSP页面来显示结果。
继续
如果你希望就此停止阅读(跳过这个例子的工作说明),但是这里的是和你需要转换你的Struts应用到一个Struts-AJAX应用同样的风格:
1.在你的web页面中引入一个Ajax.js(该文件是struts-ajax.zip例文件中的一部分)。
Ajax.js包含了所有需要发送和接收AJAX调用的JavaScript方法。
2.确保你希望在AJAX调用中更新的web页面的部分包含在标签中,并且给每个标签一个id。
3.当一些事件触发的时候就更新页面(例如,文本框的theonchange()方法),调用retrieveURL()方法,通过URL传递到需要执行服务器端处理的StrutsAction。
4.为了页面的显示/更新,最简单的方法是StrutsAction转发回同样的页面。
在本例中,showGreen/showBlue文本框中的onchange()方法来触发AJAX调用。
JavaScript方法retrieveURL()调用服务器的Struts(通过URL),获取JSP响应,然后更新显示页面中的标签中的部分。
就是这么简单!
AJAX解决方案的细节
我们将例子变为AJAX-Struts应用的时候,需要三个变化:
1.增加一个JavaScript方法来完成到服务器的“背后的”AJAX调用。
2.增加JavaScript代码来接收服务器的响应并更新页面。
3.在JSP页面增加标签标签,这个标签中内容将在AJAX调用中更新。
我们将详细的说明上面的每一步。
发送AJAX请求到服务器
有两个方法(在下面列出)用于发送请求到服务器。
retrieveURL()方法获得服务器的URL和Strutsform。
URL用于使用AJAX,form的值用于传递到服务器。
getFormAsString()方法用于将retrieveURL()中form命名的值组装成查询字符串,并发送到服务器。
使用方法很简单,使用onclick()/onChange()事件来触发retrieveURL()更新显示。
在这两个方法中有一些有趣的东西。
在retrieveURL()方法中,req.onreadystatechange=processStateChange(注意,没有括号)这一行来告诉浏览器在服务器响应到达的时候调用processStateChange()方法(该方法将在后面介绍)。
retrieveURL()方法中(现在已经是AJAX的标准了)同样决定是使用IE浏览器(ActiveX)还是使用Netscape/Mozilla(XmlHttpRequest)来实现跨浏览器兼容。
getFormAsString()方法将HTMLform转换成字符串连接在URL后面(这样就允许我们发送HTTPGET请求)。
这个字符串是经过转换的(比如,空格转换成%20等),并且是一个Struts能将其组装成ActionForm的格式(并不需要Struts清楚的明白这个是来之AJAX的请求)。
注意,在本例中我们使用HTTPGET,使用HTTPPOST的方法也是类似的。
functionretrieveURL(url,nameOfFormToPost){
//将url转换成字符串
url=url+getFormAsString(nameOfFormToPost);
//调用AJAX
if(window.XMLHttpRequest){
//非IE浏览器
req=newXMLHttpRequest();
req.onreadystatechange=processStateChange;
try{
req.open("
GET"
url,true);
}catch(e){
alert("
ServerCommunicationProblem\n"
+e);
}
req.send(null);
}elseif(window.ActiveXObject){
//IE
req=newActiveXObject("
Microsoft.XMLHTTP"
);
if(req){
req.onreadystatechange=processStateChange;
req.send();
getFormAsString()是一个“私有”方法,在retrieveURL()中使用。
functiongetFormAsString(formName){
//设置返回字符串
returnString="
"
;
//取得表单的值
formElements=document.forms[formName].elements;
//循环数组,组装url
//像'
/strutsaction.do&
name=value'
这样的格式
for(vari=formElements.length-1;
i>
=0;
--i){
//转化每一个值
returnString+="
&
+escape(formElements[i].name)+"
="
+escape(formElements[i].value);
//返回字符串
returnreturnString;
根据AJAX的响应更新web页面
到现在为止,我们学习过了使用JavaScript来完成AJAX调用(前面列出),StrutsAction,ActionForm以及JSP(基本没有变化,只是增加了标签)。
为了完善我们对Struts-AJAX项目的了解,我们需要了解三个用于根据服务器返回的结果而更新页面的JavaScript方法。
processStateChange():
该方法在AJAX调用前设定。
它在服务器响应到达后由XMLHttpRequest/Microsoft.XMLHTTP对象调用。
splitTextIntoSpan():
根据响应,循环取出数组中的元素组装成NewContent。
replaceExistingWithNewHtml():
根据span元素数组,循环搜索,将里面的元素调换掉页面中和它的'
someName'
相同的中的内容。
注意,我们使用的是req.responseText方法来获得返回的内容(它允许我们操作任何文本的响应)。
与此相对于的是req.responseXml(它的作用更大,但是要求服务器返回是XHTML或者XML)。
functionprocessStateChange(){
if(req.readyState==4){//完成
if(req.status==200){//响应正常
//将响应的文本分割成Span元素
spanElements=
splitTextIntoSpan(req.responseText);
//使用这些Span元素更新页面
replaceExistingWithNewHtml(spanElements);
}else{
Problemwithserverresponse:
\n"
+req.statusText);
replaceExistingWithNewHtml()是为processStateChange()使用的“私有”方法。
functionreplaceExistingWithNewHtml
(newTextElements){
//循环newTextElements
for(vari=newTextElements.length-1;
--i){
//判断是否以if(newTextElements[i].
indexOf("
-1){
//获得span的名字-设置在第一和第二个引号之间
//确认span元素是以下的格式
//NewContent
startNamePos=newTextElements[i].
indexOf('
'
)+1;
endNamePos=newTextElements[i].
startNamePos);
name=newTextElements[i].
substring(startNamePos,endNamePos);
//获得内容-在第一个>
标记后的所有内容
startContentPos=newTextElements[i].
>
content=newTextElements[i].
substring(startContentPos);
//现在更新现有的Document中的元素,
//确保文档存在该元素
if(document.getElementById(name)){
document.getElementById(name).
innerHTML=content;
splitTextIntoSpan()是为processStateChange()使用的“私有”方法。
functionsplitTextIntoSpan(textToSplit){
//分割文档
returnElements=textToSplit.
split("
)
//处理每个元素
for(vari=returnElements.length-1;
//删除掉第一个span后面的元素
spanPos=returnElements[i].
//如果找到匹配的,获得span前的内容
if(spanPos>
0){
subString=returnElements[i].
substring(spanPos);
returnElements[i]=subString;
}
returnreturnElements;
新的控制流
添加以下的JavaScript代码到我们的应用中,以下的步骤将在服务器和浏览器中执行。
1.如同一个普通Struts应用装载页面。
2.用户改变文本框的值,触发一个onChange()事件,调用retrieveURL()方法。
3.该JavaScript方法通过发送Struts明白的表单变量(后台)请求到服务器的StrutsAction。
4.该JavaScript方法同样设定了第二个JavaScript方法的名字,此方法将到服务器响应完毕后调用。
本例子中,设定为processStateChange()方法。
5.如我们所预期的,服务器响应完毕,调用processStateChange()方法。
6.JavaScript在(新的)服务器响应中循环取出所有元素。
将页面上存在与获得元素名字相同的中的元素替换掉。
在你的应用中设计AJAX
以上描述的JavaScript方法能在大多数的应用中使用,包括比我们的例子复杂得多的。
但是,在使用之前,你需要注意以下几点:
避免复制代码,最好在初始化请求(如,显示完整的页面)和AJAX(更新部分页面)请求中使用相同的StrutsAction和JSP。
在公共的Action(控制器)中,决定JSP页面(所有的JSP页面或者其中的一部分)中的一个区域需要传送到浏览器。
通过在web服务器的session或者ActionForm中设定标记来让JSP页面知道哪些部分需要提交。
在JSP中,使用Struts或者JSTL标签来决定提交的HTML区域。
使用AJAX的本例子,可以在以下下载:
struts-Ajax.zip
结语
AJAX技术允许我们在创建和使用web应用的时候完全的改变。
本文介绍了一个简单的技术,在现有的Struts应用中增加Struts的处理。
它允许我们利用我们已有的东西,不仅仅是代码,还包括了开发的技能。
作为一个好的产品,它同样允许我们写出更清晰,更具移植性的JavaStruts应用。
资源
作者的blog:
Samplecodeforthisarticle
DefinitionofAJAX
"
UsingAJAXtoCatchJavaScriptErrors"
(XML.com文章)
DevelopingAJAXApplicationstheEasyWay"
(文章)
AnIntroductiontoAJAX"
(dev2dev文章)
AJAXonRails"
(ONL文章)
DWR:
DirectWebRemotingProject
StrutsFrameworkProject
JSF:
JavaServerFacesProject
PaulBrowne作为企业级Java顾问为FirstP工作已有7年了。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 看看 如何 Struts 应用 施展 AJAX 魔法