未使用AJAX之前

　　目前大多数的Struts应用都是标准的“如同一个平面文档的web页面”的结构。如果你想模仿一些桌面应用程序(比如那些使用Java Swing，Visual Basic，或者Delphi建立的应用程序)，那么你有两个选择:你可以发送所有的可能作为页面的一部分被请求的信息，使用大量的JavaScript来操作其动态的显示(一个很慢并且非企业级Java的方法);或者你可以不改变形式地提交到后台服务器(一种有效的方法) 。AJAX提高给你了融合前面的最佳解决方案:动态的页面，但是大多数的应用是在你的web服务器的Java程序来处理的。

　　AJAX 101

　　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也这样做――对其本身并不一件坏事，但是对于已经存在的系统这将会带来最根本的改变。
• 　　· 你也可以直接采用新的方法，比如Direct Web Remoting (DWR) 和Ruby on Rails，这些都是专为建立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服务器运行处理请求的Struts Action来生成一个web页面。
• 　　3. 浏览器显示web页面。
• 　　4. 当用户点击保存的时候，信息由Struts框架中一个ActionForm类来转换并发送到服务器。
• 　　5. 然后，Struts框架调用Struts Action来出来请求(如，保存数据到数据库中)。
• 　　6. 页面再一次回传，处理流程继续。

　　现有的Struts应用

　　一个演示事件流程的简单Struts应用可以在以下地址下载: struts-non-ajax.zip。此基于Struts的应用，是基于用户的输入显示或者隐藏蓝色和绿色的表格。图1显示了载入初始页面的画面。图2显示了用户输入值并点击了提交后的画面。虽然简单，但它已经足以表示一个Struts的工作流程。

　　图 1. 没有AJAX的例子:初始屏幕

　　图 2. 没有AJAX的例子:输入值并点击了提交

• 　　·struts-config.xml文件将所有的请求重定向到http://localhost:8080/struts-non-ajax/(或者和你自己的服务器相同)的index.jsp。
• 　　· index.jsp 包含了一个两个文本框的Struts form(showBlue和showGreen)。该页面同样包含了标签，但是如同两个文本框被初始化为空，标签之间的内容并不显示。
• 　　· 用户输入值(true或者false)并点击提交按钮，处理控制(经过Struts框架，读取struts-config.xml)提交到SampleAction类中。
• 　　·SampleAction记录下值，然后转发到index.jsp。一个成熟的Struts应用可能会处理更多的事情，不如保存或者查询数据库等。
• 　　· index.jsp 现在重新处理请求;如果ShowBlue或者ShowGreen的值是true，这些表格就显示出来。

　　该应用并没有任何“错误”。类似的Struts项目好多年都是这样做的。但是，我们如何在不添加复杂的JavaScript或者频繁的表单提交的前提下，为此应用增加动态的元素呢?

　　我们的第一个Struts AJAX应用

　　观察下下面的图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. 当一些事件触发的时候就更新页面(例如，文本框的the onchange()方法)，调用retrieveURL()方法，通过URL传递到需要执行服务器端处理的Struts Action。
• 　　4. 为了页面的显示/更新，最简单的方法是Struts Action转发回同样的页面。在本例中，showGreen/showBlue 文本框中的onchange()方法来触发AJAX调用。

　　JavaScript方法retrieveURL()调用服务器的Struts(通过URL)，获取JSP响应，然后更新显示页面中的 标签中的部分。就是这么简单!

　　AJAX解决方案的细节

　　我们将例子变为AJAX-Struts应用的时候，需要三个变化:

• 　　1. 增加一个JavaScript方法来完成到服务器的“背后的”AJAX调用。
• 　　2. 增加JavaScript代码来接收服务器的响应并更新页面。
• 　　3. 在JSP页面增加标签标签，这个标签中内容将在AJAX调用中更新。

　　我们将详细的说明上面的每一步。

　　有两个方法(在下面列出)用于发送请求到服务器。

　　· retrieveURL()方法获得服务器的URL和Struts form。URL用于使用AJAX，form的值用于传递到服务器。

　　· getFormAsString()方法用于将retrieveURL()中form命名的值组装成查询字符串，并发送到服务器。

　　使用方法很简单，使用onclick()/onChange()事件来触发retrieveURL()更新显示。

　　在这两个方法中有一些有趣的东西。

　　在retrieveURL()方法中，req.onreadystatechange = processStateChange (注意，没有括号)这一行来告诉浏览器在服务器响应到达的时候调用processStateChange()方法(该方法将在后面介绍)。retrieveURL()方法中(现在已经是AJAX的标准了)同样决定是使用IE浏览器(ActiveX)还是使用Netscape/Mozilla (XmlHttpRequest) 来实现跨浏览器兼容。

　　getFormAsString()方法将HTML form转换成字符串连接在URL后面(这样就允许我们发送HTTP GET请求)。这个字符串是经过转换的(比如，空格转换成%20等)，并且是一个Struts能将其组装成ActionForm的格式(并不需要Struts清楚的明白这个是来之AJAX的请求)。注意，在本例中我们使用HTTP GET，使用HTTP POST的方法也是类似的。

function retrieveURL(url,nameOfFormToPost) {

//将url转换成字符串
url=url+getFormAsString(nameOfFormToPost);

//调用AJAX
if (window.XMLHttpRequest) {

// 非IE浏览器
req = new XMLHttpRequest();
req.onreadystatechange = processStateChange;
try {
req.open("GET", url, true);
} catch (e) {
alert("Server Communication Problem\n"+e);
}
req.send(null);
} else if (window.ActiveXObject) {
// IE

req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange=processStateChange;
req.open("GET", url, true);
req.send();
}
}
}

getFormAsString() 是一个“私有” 方法，在retrieveURL()中使用。

function getFormAsString(formName){

//设置返回字符串
returnString ="";

//取得表单的值
formElements=document.forms[formName].elements;

//循环数组，组装url
//像'/strutsaction.do&name=value'这样的格式

for(var i=formElements.length-1;i>=0; --i ){
//转化每一个值
returnString+="&"
+escape(formElements[i].name)+"="
+escape(formElements[i].value);
}

//返回字符串
return returnString;
}

　　到现在为止，我们学习过了使用JavaScript来完成AJAX调用(前面列出)，Struts Action，ActionForm以及JSP(基本没有变化，只是增加了标签)。为了完善我们对Struts-AJAX项目的了解，我们需要了解三个用于根据服务器返回的结果而更新页面的JavaScript方法。

• 　　· processStateChange(): 该方法在AJAX调用前设定。它在服务器响应到达后由XMLHttpRequest/Microsoft.XMLHTTP 对象调用。
• 　　·splitTextIntoSpan(): 根据响应，循环取出数组中的元素组装成NewContent。
• 　　·replaceExistingWithNewHtml(): 根据span元素数组，循环搜索，将里面的元素调换掉页面中和它的'someName'相同的中的内容。注意，我们使用的是req.responseText 方法来获得返回的内容(它允许我们操作任何文本的响应)。与此相对于的是req.responseXml (它的作用更大，但是要求服务器返回是XHTML或者XML)。

function processStateChange() {

if (req.readyState == 4) { // 完成
if (req.status == 200) { // 响应正常

//将响应的文本分割成Span元素
spanElements =
splitTextIntoSpan(req.responseText);

//使用这些Span元素更新页面
replaceExistingWithNewHtml(spanElements);

} else {
alert("Problem with server response:\n "
+ req.statusText);
}
}
}
replaceExistingWithNewHtml() 是为processStateChange()使用的“私有”方法。

function replaceExistingWithNewHtml
(newTextElements){

//循环newTextElements
for(var i=newTextElements.length-1;i>=0;--i){

//判断是否以 if(newTextElements[i].
indexOf("-1){

//获得span的名字- 设置在第一和第二个引号之间
//确认span元素是以下的格式
//NewContent
startNamePos=newTextElements[i].
indexOf('"')+1;
endNamePos=newTextElements[i].
indexOf('"',startNamePos);
name=newTextElements[i].
substring(startNamePos,endNamePos);

//获得内容－在第一个>标记后的所有内容
startContentPos=newTextElements[i].
indexOf('>')+1;
content=newTextElements[i].
substring(startContentPos);

//现在更新现有的Document中的元素，
// 确保文档存在该元素
if(document.getElementById(name)){
document.getElementById(name).
innerHTML = content;
}
}
}
splitTextIntoSpan() 是为processStateChange() 使用的“私有”方法。
function splitTextIntoSpan(textToSplit){

//分割文档
returnElements=textToSplit.
split("")

//处理每个元素
for(var i=returnElements.length-1;i>=0;--i){

//删除掉第一个span后面的元素
spanPos = returnElements[i].
indexOf("

//如果找到匹配的，获得span前的内容
if(spanPos>0){
subString=returnElements[i].
substring(spanPos);
returnElements[i]=subString;
}
}
return returnElements;
}

　　新的控制流

　　添加以下的JavaScript代码到我们的应用中，以下的步骤将在服务器和浏览器中执行。

• 　　1. 如同一个普通Struts应用装载页面。
• 　　2. 用户改变文本框的值，触发一个onChange() 事件，调用retrieveURL() 方法。
• 　　3. 该JavaScript方法通过发送Struts明白的表单变量(后台)请求到服务器的Struts Action。
• 　　4. 该JavaScript方法同样设定了第二个JavaScript方法的名字，此方法将到服务器响应完毕后调用。本例子中，设定为processStateChange() 方法。
• 　　5. 如我们所预期的，服务器响应完毕，调用processStateChange() 方法。
• 　　6. JavaScript在(新的)服务器响应中循环取出所有元素。将页面上存在与获得元素名字相同的 中的元素替换掉。

　　在你的应用中设计AJAX

　　以上描述的JavaScript方法能在大多数的应用中使用，包括比我们的例子复杂得多的。但是，在使用之前，你需要注意以下几点:

　　· 避免复制代码，最好在初始化请求(如，显示完整的页面)和AJAX(更新部分页面)请求中使用相同的Struts Action和JSP。

　　·在公共的Action(控制器)中，决定JSP页面(所有的JSP页面或者其中的一部分)中的一个区域需要传送到浏览器。通过在web服务器的session或者ActionForm中设定标记来让JSP页面知道哪些部分需要提交。

　　· 在JSP中，使用Struts 或者JSTL标签来决定提交的HTML区域。

　　使用AJAX的本例子，可以在以下下载: struts-Ajax.zip

　　结语

　　AJAX技术允许我们在创建和使用web应用的时候完全的改变。本文介绍了一个简单的技术，在现有的Struts应用中增加Struts的处理。它允许我们利用我们已有的东西，不仅仅是代码，还包括了开发的技能。作为一个好的产品，它同样允许我们写出更清晰，更具移植性的Java Struts应用。

版权声明：Techtarget获Matrix授权发布,如需转载请联系Matrix
作者:作者:Paul Browne;pawenwen(作者的blog:http://blog.matrix.org.cn/page/pawenwen)
译文:点击

随着企业intranet和国际internet的迅速发展，越来越多的工作流程，商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到所谓的万维网（World Wide Web，以下简称WEB）上来了。与此相对应的是交互操作的复杂性越来越高。

随着Browser/Server模式的日渐流行，很多操作都是在浏览器环境下的网页上完成的，并不是只有失效的链接和意外的出错才会使操作者感到烦恼，即便是一次完整的成功操作过程，也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。

本文试图阐述WEB交互页面设计的一些指导性原则，这些原则有利于避免发生不愉快的操作体验。这些原则是用户友好性的，是在完成同一种操作要求下，使用户最感到轻松、简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的，符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计有所冲突。如果发生这种情况，基于“实用的就是美的”观点，我们会建议您酌情放弃原先的美学观点与功能设计。

1． 输入控件的自动聚焦和可用键盘切换输入焦点

使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。

输入控件指WEB页面表单(<form>)中显式的，需要用户进行修改、编辑操作的表单元素。对于这些控件，如果没有自动聚焦操作，不可避免的出现一次用户鼠标定位操作（如果用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作，实际上是键盘鼠标切换操作）。如果鼠标定位后需要进行键盘输入操作，如果不能键盘切换输入焦点，那么不可避免的在切换输入焦点时需要反复的键盘鼠标切换操作，这是很繁琐的。

如果实现了页面加载完成即自动聚焦到第一个输入控件，并且可以键盘切换输入焦点标定位操作，那么对于用户来说整个页面的输入操作可能都不需要鼠标操作，或次数较少，这是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。

对于有输入栏的对话框或网页，在不干预的情况下就应将当前控制焦点定位在待输入的输入栏上；如果输入栏在一般情况下不需要更改其中的内容，则应直接将焦点定在“确定”按钮上；在几个输入栏之间应支持tab，shift+tab切换操作，“确定”和“取消”应该是切换操作的终点，与具体所在位置无关。

2．   可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的

不要在提交按钮上加入onClick=”…”这样的JavaScript代码。

用Enter键提交页面是原则1的自然延伸，而且这也是浏览器所缺省支持的。只所以单独列出来是因为实际上有些设计者设计的页面不能达到这种效果，结果导致使用Enter键提交和点击“确定”按钮提交带来的效果不一样。大部分情况下是设计者在“确定”按钮上加入了onClik=”…”这样的代码，通过点击“确定”按钮后，会执行一段JavaScript代码，比如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。

正确的做法是把这段代码移到表单标签<form>中，以onSubmit=”…”属性引入。

对于<textarea>表单元素，它会消耗Enter键，因此会使得Enter键提交失效。可以引入JavaScript代码捕捉Ctrl+Enter复合键，一旦捕捉到即执行表单的submit()方法。对于需要频繁提交的场合，比如BBS上，这种代码是很有必要的。

3． 鼠标动作提示和回应

对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。

动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML标签会自动进行这种变换ICON的行为。对于没有href属性（或没有设置href属性）的标签，可以通过JavaScript设置style属性的cursor为hand。

目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域，此时指针图形改变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添直观的图形，尽可能的增大按钮面积；按钮间保持适当的距离，太近增加了用户区别它们之间界限以防误操作的负担，太远增加了用户搜索定位按钮的负担。

4．尽可能早的在客户端完成输入数据合法性验证

输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成，否则验证工作应在最早能完成的情况下进行。

在客户端完成数据合法性验证，可以避免一次服务器请求和回复通讯，这种通讯是需要用户等待的，如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可发现的，那么这种设计就是不友好的。诸如密码长度限制，用户名允许字符限制等等，显然应该在客户端提交前就应该进行验证。

5． 根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面

根据应用场景，决定是否显示接收表单页面（表单页面和提交后返回页面间的中间过渡页面），以及使用何种方式显示接收表单页面。

表单页面和接收表单页面是大部分WEB交互操作赖以实现的配合模式。关于表单页面和接收表单页面的相互关系的设计，要做如下几个方面的考虑。

一，对于需要频繁操作的场合，从操作便利和快捷性出发，尽可能的减少服务器和客户端交互次数，应该避免使用中间过渡页面。提交完毕直接返回原来的表单页面或默认页面。在这种情况下要考虑到数据安全和可恢复性。

如果因为用户输入的数据不合格，需要重新输入，那么，去除中间页面，把错误信息直接显示在原表单页面上的设计方式，将是最简洁的处理方式。用户只需要根据错误提示进行更正即可。当然这样做稍微增加了编程负担。在表单接收页面上需要包含原表单页面的内容，而且输入数据项都必须用服务器端代码或客户端JavaScript设置成用户输入的值。为了开发快捷，可以这样做：表单页面和接收表单页面用同一个服务器端脚本页面实现。这个页面按如下流程完成原来两个页面的工作：

页面脚本初始化

┃

检查“提交”变量是否设置

┠已设置，做数据验证

┃   ┠验证通过－>业务逻辑处理－>使用包含页面方式或重定向方式返回到特定页面

┃   ┗验证不通过－>保存用户输入的数据－>退出表单提交处理到表单页面流程中

┗未设置，做表单页面流程，如有来自提交流程中产生的用户输入数据，则显示出来

其中，使用包含页面方式返回到特定页面可以避免一次客户端重定向过程，比客户端重定向过程还要快捷和稳定一些。但是有些情况下因为代码变量冲突或其他原因，使用包含页面方式可能并不方便，这时候可以使用服务器端重定向技术，在ASP里是Server.Transfer方法，在Java Servlet里是RequestDispatcher.forward()方法。不要使用Response.Redirect或者HttpServletResponse.sendRedirect()这种客户端HTTP重定向方法。不使用中间过渡页面也就意味着用户不能后退浏览原先已经填好的表单页面，因为使用的是同一个URL。所以在验证不通过情况下保存用户输入的数据就是必不可少的。

不使用中间过渡页面带来的另一个问题就是使用包含页面方式或服务器端重定向方式返回会使得URL和页面内容不能一一对应。对于用户可能会直接用这个URL（会收藏这个URL）访问返回页面的情况，他会发现实际上到达的是表单页面，不是他想要的那个返回结果页面。所以，去除中间过渡页面，确实会带来URL和内容含混不清的情况，因而不适合需要URL和页面内容一一对应的场合。

二，从技术角度考虑，使用中间过渡页面能保证URL和页面内容一一对应，简化页面开发工作。

为了保证页面内容总是和固定的URL联系起来，必须使用客户端重定向：

           提交                   业务逻辑处理  （中间过渡页面）

表单页面――――－>接收表单页面―――――――――>显示处理结果―――>客户端重定向到特定页面

客户端重定向分几种情况：1，使用HTTP Header重定向，Location:http://www.netall.com.cn，这种定向是最快的，在窗口一片空白的情况下就迅速访问（GET）另一个页面。这种方式实际上不能显示处理结果，只能说是向第一种快速重定向方式的一种折衷处理；2,HTML标签刷新，<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.netall.com.cn">，这种定向比较友好，在这个页面加载完毕后访问另一个页面。很多设计者把这个作为一个技巧使用，在载入一个大页面前放置一个缓冲页面以避免用户乏味的等待；3，JavaScript重定向。由于是用代码控制重定向，可以做的更灵活。比如根据用户习惯，控制操作完毕后的转向流程。4，被动式的重定向。在页面上放置按钮或链接，由用户手动决定返回到特定页面。这种情况适合于处理结果的显示页面包含相当多的信息，需要用户仔细浏览，而决定下一步的操作。

在使用中间过渡页面的情况下，不能再使用页面过期失效了。否则一旦出现错误，需要用户重新输入表单数据，用户就不能用后退按钮恢复此前填写的表单数据了。除非设计者有意禁止这种恢复。

6． 防止表单重复提交处理

对提交按钮点击后做变灰处理避免在网络响应较慢情况下用户重复提交同一个表单。使用页面过期失效避免用户后退浏览重复提交表单。

有些复杂的应用会导致需要较长时间的等待才会返回处理结果。而在较慢的网络环境中，这种情况更是频繁发生。焦急等待的用户往往会重复点击提交按钮。这种情况是设计者所不希望看到的。

使用JavaScript在点击提交按钮后使按钮失效变灰是一个最直接的办法（根据原则2这段代码应该放在<form>标签里onSubmit=”…”做）。此外，在表单页面上，用服务器端脚本设置HTTP Header的Expires为立即过期可以保证用户没办法使用后退浏览恢复表单页面。注意这样做的代价可能是用户辛辛苦苦填写很长的内容，结果一旦操作失误就没法恢复。所以应该避免在包含<textarea>表单元素的页面上使用页面过期失效。

应该说，更严格的方法是，服务器端脚本就应该具备抵抗重复提交的能力。例如，为这个表单分配一个唯一ID或一个使用一次即失效的验证码。此外，这个表单处理还应具有事务性质，如果表单不被接受，所做的改变还是能恢复的。在金融应用场合，重复提交同一笔交易是肯定不被允许的。能在重复提交中获利的一方总是会想办法绕过浏览器的限制，所以不能依赖于客户端的技术。

7． 页面链接是打开新窗口、使用原窗口还是弹出窗口的原则

一般而言，首页上链接可以使用target=”_blank”属性打开新窗口，而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要，是附属性质的，可以使用弹出窗口方式。

一般情况下应该使用原窗口，把是否保留原窗口内容的权利留给用户。除非设计者相信原页面是如此重要，在用户发出点击指令后还有使用上的价值，以至于不能被随便更新或覆盖。一般来说，只有首页才会处于这样一个地位，用户在首页上打开一个链接后，一般还会在这个首页上去打开另一个链接。比如首页包含极多链接的门户网站，或者搜索引擎的搜索结果页面。Google.com以前的搜索结果页面上的链接是使用原窗口的，后来他们意识到用户会反复使用这个页面，而改成打开新窗口了。一般的网站如果首页链接不多，就不必使用新窗口，这是用户友好的设计原则。

上述情形的一个极端情况就是新页面内容比起原页面内容的重要性差很多，以至于都未必需要打开一个新页面。这时候使用弹出窗口比较合适。用JavaScript弹出窗口有好几种：一个是window.open()函数。这里有个技巧。应该使用window.open()先打开一个空白窗口，再使用location.replace()用目标页面替换。这样做可以避免在打开新页面的过程中导致原页面失去响应。Window.open()将打开一个新的浏览器窗口进程，因此资源消耗比较大。另一个是由微软DynamicHTML规范中扩充的方法createPopup()。createPopup()可以创建无边框的弹出窗口，消耗系统资源较小。还有一个就是用页面中隐藏的层<div>来模拟一个弹出页面。后两种可以使用JavaScript代码填充弹出窗口内容。如果需要下载网页作为其内容的话，需要微软DynamicHTML规范中的<download>标签。

8． 尽可能少的排列可选项，尽可能少的安排操作步骤

根据用户操作习惯安排尽可能少的操作菜单选项，同时要保证尽可能少的操作步骤。

在不降低功能多样性的前提下减少菜单项和操作步骤是用户友好的设计。要做到这一点很不容易。要从用户出发考虑他们最频繁的操作是什么。正常情况下一个用户需要的操作总可以归类为5个以下的种类，如果出现更多的种类，那一定是没有针对用户兴趣去区分主次。一个用户同时有5个以上的强烈兴趣中心是难以想像的，走马观花似的随意点击浏览的用户，是不大可能在某个种类上进行深入的交互操作的。在这5个种类中，每个种类都可能有若干个可操作的二级种类。如果这些二级操作项是不可见的，那么意味着要做两次选择才能进入可操作页面。这就违背了“尽可能少的安排操作步骤”这一原则。如果使用JavaScript制作二级菜单，避免请求服务器，会好一些。如果二级菜单项总共不超过20个左右，不妨将二级菜单直接显示出来，比如放在左列一字向下排开，这样只需要一次选择到可操作项，更加明了方便。

9． 操作逻辑无漏洞，保证数据是操作安全的

多个页面间的操作和同个页面上的多个操作间的逻辑关系在设计上是安全和严谨的。保证不会出现不被允许的用户操作组合，至少不会因为用户的不适当的操作导致出错。

这最典型的表现则是在页面上广泛采用的所谓联动下拉框设计。一个下拉框中允许的选项受另一个下拉框中的选择而变。另外一个例子是根据选择使表单元素有效或者失效。如果在多个页面间也要维持某种合法性逻辑，那么就需要服务器端脚本的参与。这样会使表单设计跟操作有关，应该说这不是一个好的设计。可以通过变更操作步骤顺序、组合方式来尽可能避免这种情况出现。

操作逻辑的设计既要保证用户任意的输入不会导致错误，也要保证是用户输入的数据能购被安全处理。在Session控制下的表单中输入大幅文字可能会导致超时出错，这时候往往还伴随重定向过程，导致用户的长篇输入荡然无存。用JavaScript提醒用户已超时，请保存输入后重新提交，是一个好办法。某些表单元素如<input type=”text”>接受ESC键清除数据，并且无法撤销，这也是很危险的。在中文输入法中常常使用ESC键清楚输入的码位，一旦不小心多按一下ESC就会使得输入数据消失。因此有必要用JavaScript禁用<input>和<textarea>的ESC键处理过程。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=413028

1.下载
FCKeditor2.3 (FCKeditot for java)
FCKeditor2.4 (FCKeditor基本文件)
以下是下载地址：
http://www.fckeditor.net/download/default.html

2.建立项目:
建立项目tomcat/webapps/TestFCKeditor.

3.将FCKeditor2.4解压缩
将FCKeditor2.4解压缩,将整个目录FCKeditor复制到项目的根目录下，并将解压缩出来的文件夹fckeditor重命名为FCKeditor
目录结构为：tomcat/webapps/TestFCKeditor/FCKeditor
然后将FCKeditor-2.3.zip（java）压缩包中\web\WEB-INF\lib\目录下的两个jar文件拷到项目的\WEB-INF\ lib\目录下。把其中的src目录下的FCKeditor.tld文件copy到TestFCKedit/WEB-INF/下

4.合并web.xml:
将FCKeditor-2.3.zip压缩包中\web\WEB-INF\目录下的web.xml文件合并到项目的\WEB-INF\目录下的web.xml文件中。

5. 修改合并后的web.xml文件
修改合并后的web.xml文件，将名为SimpleUploader的Servlet的enabled参数值改为true，
以允许上传功能，Connector Servlet的baseDir参数值用于设置上传文件存放的位置。
在web.xml最后添加标签定义:

<taglib>
    <taglib-uri>/TestFCKeditor</taglib-uri>
    <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
 </taglib>

现在的web.xml文件没有<taglib>标签了，应该直接在jsp文件中使用：<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>

6. 映射:
上面文件中两个servlet的映射分别为：/editor/filemanager/browser/default/connectors/jsp/connector
和/editor/filemanager/upload/simpleuploader，需要在两个映射前面加上/FCKeditor，
即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
/FCKeditor/editor/filemanager/upload/simpleuploader。
这两个名字根据你放在工程中的FCKeditor文件夹名称而定。。

7.修改skin文件夹
进入skin文件夹，如果你想使用fckeditor默认的这种奶黄色，
那就把除了default文件夹外的另两个文件夹直接删除.（建议不删除，以后要用到其中的一个文件夹）

8.删除无用文件
删除/FCKeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件以外的所有文件，保留文件夹editor
删除目录/editor/_source,
删除/editor/filemanager/browser/default/connectors/下的所有文件
删除/editor/filemanager/upload/下的所有文件
删除/editor/lang/下的除了fcklanguagemanager.js（我下载的没有这个文件）, en.js, zh.js, zh-cn.js四个文件的所有文件

9.修改配置：
打开/FCKeditor/fckconfig.js
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：
FCKConfig.LinkBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;

FCKConfig.ImageBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;

FCKConfig.FlashBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

10.其它
fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，
在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
也就是基本的toolbar，找到：
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
'Smiley','SpecialChar','Replace','Preview'] ] ;
这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台
页直接访问和上传文件， fckeditor还支持编辑域内的鼠标右键功能。

FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

这也是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。

　　找到： FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上几种我们常用的字体
FCKConfig.FontNames
= '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

11.添加文件
添加文件 /TestFCKeditor/test.jsp:
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/TestFCKeditor" prefix="FCK" %>
<script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script>

<%--
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>

//标签调用方式
<%--
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/TestFCKeditor/FCKeditor/"
width="700"
height="500"
skinPath="/TestFCKeditor/FCKeditor/editor/skins/silver/"
toolbarSet = "Default"
>
input
</FCK:editor>
<input type="submit" value="Submit">
</form>
--%>

//JS调用方式
<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "/TestFCKeditor/FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

//FCKeditor API 调用
<%--
<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>

添加文件/TestFCKeditor/show.jsp:
<%
String content = request.getParameter("content");
out.print(content);
%>

12.测试
浏览http://localhost:8080/TestFCKeditor/test.jsp

最后注意。。不同的版本 变量名称可能不一样。请参考你使用的API文档

配置选项:

AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记

解决上传乱码:
在SimpleUploaderServlet.java和ConnectorServlet.java两个文件里找到
DiskFileUpload upload = new DiskFileUpload();
分别在其后加入 upload.setHeaderEncoding("utf-8");
这样解决了文件上传的中文乱码问题.
但是在控制台显示的中文内容还是乱码,但是没关系,我们没必要去看控制台下的中文

----------------------------------------------------------------another
FCKeditor2.4.2 Java版使用说明
下载地址以及基本配置请参考：http://hi.baidu.com/wain19/blog/item/c33fb0fab74f24dfb48f312d.html

我的开发环境是ubuntu7.04, 系统默认编码是utf-8,
期间，本人遇到了下面这些问题：

问题一：XML request error: Internel Server Error(500)

出现错误的地方是在：点插入图片，点Browse按钮的时候：
XML request error: Internel Server Error(500)

找资料：http://lamono.javaeye.com/blog/49135
拷贝xalan.jar和serialize.jar到/WEB-INF/lib，问题解决。

FCKeditor-java没有很好的解决中文问题。需要我们修改它的源代码后重新编译打包。打包过程如下：
1。 新建一个web工程名字为FCKeditor-java-2.3，然后把FCKeditor-2.3-java.zip解压缩后的代码拷贝到工程目录下。
2。如果是用的Eclipse,使用快捷键Ctrl+Shift+R
在SimpleUploaderServlet.java和ConnectorServlet.java两个文件里找到
DiskFileUpload upload = new DiskFileUpload();
分别在其后加入 upload.setHeaderEncoding("utf-8");
现在如果直接运行ant任务，会报下面的错误：
taskdef class org.apache.catalina.ant.DeployTask cannot be found

3。 把tomcat安装目录下/server/lib中的catalina-ant.jar拷贝到/WEB-INF/lib目录 下。
4。 打开build.xml
找到
<property name="catalina.home"
修改成你自己的tomcat安装目录
<property name="catalina.home"         value="/home/uniquejava/tool/tomcat5028/"/>
找到
<taskdef name="deploy"
修改成如下内容
     <taskdef name="deploy" classname="org.apache.catalina.ant.DeployTask">
        <classpath refid="compile.classpath">
        </classpath>
    </taskdef>
    <taskdef name="list" classname="org.apache.catalina.ant.ListTask">
        <classpath refid="compile.classpath">
        </classpath>
    </taskdef>
    <taskdef name="reload" classname="org.apache.catalina.ant.ReloadTask">
        <classpath refid="compile.classpath">
        </classpath>
    </taskdef>
    <taskdef name="undeploy" classname="org.apache.catalina.ant.UndeployTask">
        <classpath refid="compile.classpath">
        </classpath>
    </taskdef>

运行ant任务dist, 就可以生成新的FCKeditor-2.3.jar包

问题三： 上传时新建的中文目录全部乱码。 虽然上传到服务器上的文件名正常，但在JSP页面点下载链接时文件名乱码导致不能正常下载。

查找资料：TOMCAT 链接参数有中文时，乱码解决方法
http://hi.baidu.com/jadestone/blog/item/7564deefc9192d36acafd5be.html
修改tomcat-home/conf/server.xml
方法一:
在两处地方加上URIEncoding="utf-8"：
    <Connector port="8080"
               maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
               enableLookups="false" redirectPort="8443" acceptCount="100"
               debug="0" connectionTimeout="20000"
               disableUploadTimeout="true" URIEncoding="utf-8" />
              
    <Connector port="8009"
               enableLookups="false" redirectPort="8443" debug="0"
               protocol="AJP/1.3" URIEncoding="utf-8" />
              
方法二:
使用useBodyEncodingForURI="true". 这个方法适合你的TOMCAT实例下需要跑多个不同Encoding的程序时。（有点怀疑？！）
<... maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
       enableLookups="false" redirectPort="8443" acceptCount="100"
      connectionTimeout="20000" disableUploadTimeout="true" useBodyEncodingForURI="true" />

     enableLookups="false" redirectPort="8443" protocol="AJP/1.3" useBodyEncodingForURI="true" /

我只试了方法一，问题解决！

这样, FCKeditor终于可以正常使用了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
=================================================================
以下为个人原创 http://blog.csdn.net/nickshen3/
怎么将FCKeditor2.4使用在自己的web中。
1. 在webapps创建test文件夹。webapps\test
2. 将下载的FCKeditor2.3的Java包FCKeditor-2.3.zip解压缩，并将web文件夹下的两个文件夹_samples，WEB-INF拷贝到刚才建立的webapps\test下。再将src文件夹下的FCKeditor.tld拷贝到WEB-INF下。
3. 在webapps\test\下建立文件夹FCKeditor 。
4. 将刚才下载的 FCKeditor_2.4.3.zip 解压缩，然后将fckeditor文件夹下的 editor（文件夹）,fckconfig.js,fckeditor.js,fckstyles.xml,fcktemplates.xml。四个文件拷贝到刚才建立的文件夹FCKeditor下。
5.修改test\_samples\jsp\sample02.jsp文件，将原来的
       <FCK:editor id="EditorDefault" basePath="/FCKeditor/"
改为<FCK:editor id="EditorDefault" basePath="/test/FCKeditor/"。以后使用的时候只需将test换成项目的名称即可。
6.打开tomcat。测试Http://localhost:8080/test/_samples/jsp/sample02.jsp。
ok。

另外 ：  http://www.blogjava.net/youxia/archive/2007/03/15/104077.html