📄 struts 2与ajax（第一部分） - max on java - blogjava.htm
字号:
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">' </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> oBook.title </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> '</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">p</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">');<BR>
sBook </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+=</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> ('</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">p</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">Price: </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">$' </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> oBook.price </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> '</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">p</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">');<BR>
sBook </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+=</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> ('</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">i</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">Comments: </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">i</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">hr</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">/></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">');<BR>
</SPAN><SPAN
style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">for</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(i </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">0</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">; i </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> oBook.comments.length;
i</SPAN><SPAN style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">++</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">) {<BR>
sBook
</SPAN><SPAN style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+=</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> ('</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">p</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">><</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">#' </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> (i </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">1</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">) </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> ' </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">b</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">' </SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> oBook.comments[i]
</SPAN><SPAN style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">+</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> '</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"></</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">p</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">></SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">');<BR>
}<BR>
bookHolder.innerHTML
</SPAN><SPAN style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> sBook;<BR>
}<BR>
};<BR>
oRequest.open('POST', sUrl);<BR>
oRequest.send(</SPAN><SPAN
style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">null</SPAN><SPAN
style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<BR>
}<BR> }<BR> </SPAN><SPAN
style="COLOR: #0000ff"></</SPAN><SPAN
style="COLOR: #800000">script</SPAN><SPAN
style="COLOR: #0000ff">></SPAN><SPAN style="COLOR: #000000"><BR></SPAN><SPAN
style="COLOR: #0000ff"></</SPAN><SPAN style="COLOR: #800000">head</SPAN><SPAN
style="COLOR: #0000ff">></SPAN><SPAN style="COLOR: #000000"><BR></SPAN><SPAN
style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">body</SPAN><SPAN
style="COLOR: #0000ff">></SPAN><SPAN style="COLOR: #000000"><BR>
</SPAN><SPAN style="COLOR: #0000ff"><</SPAN><SPAN
style="COLOR: #800000">input </SPAN><SPAN
style="COLOR: #ff0000">type</SPAN><SPAN
style="COLOR: #0000ff">="button"</SPAN><SPAN style="COLOR: #ff0000">
value</SPAN><SPAN style="COLOR: #0000ff">="Retrieve Book"</SPAN><SPAN
style="COLOR: #ff0000"> onclick</SPAN><SPAN
style="COLOR: #0000ff">="retrieveBook()"</SPAN><SPAN style="COLOR: #ff0000">
</SPAN><SPAN style="COLOR: #0000ff">/></SPAN><SPAN
style="COLOR: #000000"><BR> </SPAN><SPAN
style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">div </SPAN><SPAN
style="COLOR: #ff0000">id</SPAN><SPAN
style="COLOR: #0000ff">="bookHolder"</SPAN><SPAN
style="COLOR: #0000ff">></</SPAN><SPAN
style="COLOR: #800000">div</SPAN><SPAN style="COLOR: #0000ff">></SPAN><SPAN
style="COLOR: #000000"><BR></SPAN><SPAN style="COLOR: #0000ff"></</SPAN><SPAN
style="COLOR: #800000">body</SPAN><SPAN style="COLOR: #0000ff">></SPAN><SPAN
style="COLOR: #000000"><BR></SPAN><SPAN style="COLOR: #0000ff"></</SPAN><SPAN
style="COLOR: #800000">html</SPAN><SPAN
style="COLOR: #0000ff">></SPAN></DIV><SPAN
style="FONT-SIZE: smaller; FONT-STYLE: italic">清单4
WebContent/JsonPlugin.html</SPAN>
<P>以上代码中，我没有使用任何的AJAX的Javascript包，而是参考《Professional Javascript For Web
Developer》手工创建XHR（XMLHttpRequest），并在XHR完成后使用eval()方法将JSON字符串变为JSON对象。需要注意的是，要调用eval函数时，必须使用“(”和“)”将JSON字符串括起来，否则会出错的。</P>
<P>打开<A
href="http://localhost:8080/Struts2_Ajax/JsonPlugin.html">http://localhost:8080/Struts2_Ajax/JsonPlugin.html</A>，点击“Retrieve
Book”按钮，页面如下图所示：</P>
<P><IMG alt="图1 JsonPlugin.html页面输出"
src="Struts 2与AJAX（第一部分） - Max On Java - BlogJava.files/r_json-plugin.gif"><BR><SPAN
style="FONT-SIZE: smaller; FONT-STYLE: italic">图1 JsonPlugin.html页面输出</SPAN></P>
<H2>Struts 2与Dojo</H2>
<P><A
href="http://www.dojotoolkit.org/">Dojo</A>是开源Javascript工具包，它引了Widget的概念，方便了Javascript面向对象编程（OOP），改进Javascript的事件模型。在此我不打算对此进行深入的讲解，有兴趣的朋友的可以找网上找一些关于Dojo的资料学习。</P>
<P>Struts
2基于Dojo编写一些AJAX标志（在Dojo中称为Widget），要使用这些标志的AJAX功能，需要将标志的“theme”属性设为“ajax”。同时，亦需要将加入在<head>与</head>之间加入<s:head
theme="ajax" />。当使用这些标志的AJAX功能，有些属性可能会经常用到，所以我会对这些属性稍作解释。</P>
<P>
<TABLE id=TABLE1
style="BORDER-TOP: #008000 2px solid; BORDER-BOTTOM: #008000 2px solid"
onclick="return TABLE1_onclick()" cellSpacing=0 cellPadding=4 border=0>
<TBODY>
<TR>
<TD
style="FONT-WEIGHT: bold; BORDER-BOTTOM: #008000 1px solid; HEIGHT: 21px; BACKGROUND-COLOR: #ccffcc">名称</TD>
<TD
style="FONT-WEIGHT: bold; BORDER-BOTTOM: #008000 1px solid; HEIGHT: 21px; BACKGROUND-COLOR: #ccffcc">描述</TD></TR>
<TR>
<TD>href</TD>
<TD>XHR（XMLHttpRequest）请求的地址</TD></TR>
<TR>
<TD>listenTopics</TD>
<TD>监听的Dojo话题（Topic）以触发自身，如可以在可以通过发布（Publish）相应的话题，通知<s:autocompleter
/>重新加载其备选项（Options）</TD></TR>
<TR>
<TD>notifyTopics</TD>
<TD>完成远程调用后，发出通知，触发相应的Javascript函数或Dojo Widget</TD></TR>
<TR>
<TD>formId </TD>
<TD>需要提交到服务器的表单的ID</TD></TR>
<TR>
<TD>formFilter</TD>
<TD>过滤表单字段的Javascript函数名称</TD></TR>
<TR>
<TD>indicator</TD>
<TD>在XHR处理过程中，包含用户提示的信息的HTML元素的ID，如图片或DIV等</TD></TR></TBODY></TABLE><EM><SPAN
style="FONT-SIZE: 10pt">表1 常用的AJAX标志属性</SPAN></EM></P>
<P>这些标志包括：<s:a />、<s: submit />、<s:autocompleter />和<s:tree
/>等，下面我将分别讲解。</P>
<H3>1、<s:a />和<s:submit /></H3>
<P>这两个标志方便了我们的调用XHR实现AJAX，所以上面的HTML如果使用了这两标志将会变得更简单，因为我们不用再去理会繁锁的XHR创建和设定的工作。下面是示例代码：</P>
<DIV
style="BORDER⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -