|
于慧玲 李乃杰
（东北林业大学 信息与计算机工程学院 哈尔滨 150040）
Abstract: To improve Web application response times, In the design process, applied the AJAX technology into the Web platform of TRIZ theory of Contradiction Technology. and constructed a suitable computer aided innovation software standards for Web-based AJAX applications and made Web application development in the B / S structure can achieve rich clients that can be used to build asynchronous message-oriented web application without refreshing, so that changes in the pattern of network applications. The development process in the system used JSP technology of Portability Strong combined with the AJAX technology to develop a fast response, asynchronous interaction capability of the Web platform of TRIZ theory of Contradiction Technology.
Key Words: Web；AJAX Technology； TRIZ；Contradiction Technology
摘 要: 为提高Web应用程序响应速度，将AJAX技术应用到TRIZ理论技术矛盾Web平台设计过程中，构建了适用于计算机辅助创新软件标准的基于AJAX的Web应用程序，使得Web应用开发在B/S架构下实现富客户端，可用于构建面向异步消息的无刷新的网络应用，使网络应用的模式发生转变。在系统开发过程中采用可移植性强的JSP技术结合AJAX技术实现软件的编写，开发出响应速度快，异步交互能力强的TRIZ理论技术矛盾Web平台。
关键词: Web；AJAX技术；TRIZ；技术矛盾
1 引言
随着Internet的不断发展和海量信息的剧增，如何使Web响应更加灵敏，数据传输更加稳定快捷，已成为当今关注的热点[1]。传统的Web应用，要求客户端与服务端同步，客户端向服务器发送请求后，必须等待服务器的响应，接收从服务器返回的整个新的HTML页面数据，并以刷新整个页面为代价显示出来。这需要花费更多的带宽读取冗余数据，造成用户使用上的不方便。这种时间上的等待性极大的影响创新的步伐，对于创新人员来说，时间就是取得创新成功的关键。为了能为创新人员赢得时间，必须要改变传统Web的交互方式。
基于AJAX(Asynchronous JavaScript and XML) 的Web2.0技术将传统Web与服务器交互模式由同步交互改为异步交互方式，这种异步交互模式使页面在后台按需获取数据，不再需要像传统Web开发采用form（表单）提交的方式，这样不仅节省了带宽，更加大大提升了用户体验[2]。AJAX这种思维模式的转变为Web发展提供了更广阔的前景。
将AJAX技术应用到TRIZ理论技术矛盾Web开发中，可以进一步提高页面响应速度，对TRIZ理论的推广起到推动作用。
2 AJAX技术
AJAX（Asynchronous Javascript and XML）是一种创建交互式网页应用的网页开发技术。该技术描述了基于网页的Web应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据可以从独立于实际网页的服务端取得并且可以被动态地写入网页中。
AJAX是由HTML、Javascript技术、DHTML和DOM组成，它是基于web标准（Standards-Based Presentation）XHTML整合CSS的表示；是用DOM（Document Object Model）进行动态显示及交互；使用XML和XSLT进行数据交换及相关操作；应用 XMLHttpRequest进行异步数据查询、检索。将这些技术融合在一起应用于Web开发，可以将传统Web界面转化成交互性的AJAX应用程序，提高Web系统性能，优化用户界面。
2.1 AJAX技术应用于传统WEB应用比较
在AJAX技术出现之前，浏览器与服务器通信的唯一方式就是通过HTML表单（form）的提交，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用迟缓很多。
与传统Web应用不同，从AJAX的角度看来，Web应用除了要考虑健壮性和稳定性之外，能够使其与用户快速的交互也是Web开发的一个重要因素[3]。AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，执行类似于请求/应答的模式，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。传统Web应用与AJAX技术Web应用的差异如图1所示。
图1 传统Web应用与AJAX技术Web应用
2.2 AJAX技术组成
AJAX(Asynchronous JavaScript and XML)严格来说不是一种新技术，它是由各大浏览器和平台都支持的、具有公开标准的多种技术组建而来的，因此它能够跨浏览器应用，并成为业界内事实上的标准[4]。其中重要的技术如下：
JavaScript
JavaScript是一种粘合剂使AJAX应用的各部分集成在一起，用来传递用户界面上的数据到服务端并返回结果。
XMLHttpRequest
XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端来响应通过HTTP传递的数据，但并不会打断用户当前的操作，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。
DOM
文档对象模型(DOM) 是一组API，供HTML和XML文件使用，使得网页和脚本程序之间实现信息沟通和交流。使用DOM，结合JavaScript 脚本语言，可以实现对文档结构的操作，有效地改造在静态HTML中声明的结构；同时通过DOM也能够以编程方式修改元素的样式和改造定义在样式表中的结构。
CSS
CSS为了正确的浏览AJAX应用，提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX应用中扮演至关重要的角色，但他也是构建创建跨浏览器应用的一大阻碍，因为不同的浏览器厂商支持各种不同的CSS级别。
使用AJAX的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
2.3 AJAX核心技术
在AJAX技术中，XmlHTTPRequest对象是与后台交互的核心，不同的浏览器创建XmlHTTPRequest的方法不同[5]，IE浏览器利用Active控件实现；而Mozilla等浏览器是用类实现的。
在创建XmlHTTPRequest后，AJAX引擎通过它向服务器发送open()和send()请求：
xmlhttp.open("GET",url.true);
xmlhttp.send();
服务器对所发送的请求进行响应，这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：
xmlhttp.onreadystatechange = callback;
其中变量url表示向服务器请求的URL地址，callback是一个JavaScript函数指针，用来处理从服务器返回的数据。
3 TRIZ理论
TRIZ理论是由前苏联发明家阿利赫舒列尔(G.S.Altshuller)在1946年创立的，分析了世界近250万份高水平的发明专利，总结出各种技术发展进化遵循的规律模式，以及解决各种技术矛盾和物理矛盾的创新原理和法则，建立一个由解决技术，实现创新开发的各种方法、算法组成的综合理论体系，并综合多学科领域的原理和法则，建立起TRIZ理论体系[6]。
3.1 TRIZ理论CAI软件现状
计算机辅助创新CAI（Computer Aided Innovation）是新产品开发中的一项关键基础技术，它是以近年来在欧美国家迅速发展的创新问题解决理论（TRIZ）研究为基础，结合本体论（Ontology）、现代设计方法学、计算机软件技术等多领域科学知识，综合而成的创新技术[7]。
随着TRIZ理论的广泛应用，也陆续开发出一些CAI相关软件，像美国的Invention machine公司与Ideation International公司分别基于发明问题解决理论（TRIZ）开发了软件TechOptimizer[8]及Innovation WorkBench（IWB）；德国一家公司2001年也推出了基于的TRIZ软件TriSolver2.1；荷兰的Insytec B.V公司开发了软件TRIZ Explorer等。近几年，TRIZ在我国也迅速发展起来，河北工业大学，清华大学等走在前列，前者还开发了计算机辅助创新设计系统——InventionTool 2.0，亿维讯科技有限公司也开发了计算机辅助创新软件Pro/Innovator，并得到广泛的应用。
发明问题的核心就是解决矛盾，而矛盾又普遍存在于各种技术或产品的设计之中，解决好技术或产品中的矛盾成为创新的关键所在，因此，技术矛盾在解决技术或产品创新中占据了绝对优势。国内外的TRIZ理论CAI相关软件中虽然有技术矛盾的模块，但都基于C/S架构的单机版软件，不利于向大众推广TRIZ的创新理念。因此，开发出一款基于Web的TRIZ理论技术矛盾平台势在必行。这样每个人都可以通过Internet来访问该TRIZ理论Web平台，既有利于TRIZ面向世界的推广，也有利于大众参与到创新队伍中来，使创新不在只是专家的专利，这样可以在很大程度上提高一个国家的创新能力。AJAX是目前比较流行的动态实时刷新页面的一项技术，可以使Web应用程序更为迅捷地回应用户动作。基于AJAX技术的这种优点，结合JSP编程技术开发出基于AJAX的TRIZ理论技术冲突Web平台，可以大大提高用户体验，有利于TRIZ面向世界的推广。
3.2 AJAX在TRIZ理论技术矛盾Web平台中的应用
G.S.Altshuler将矛盾分为3类，即管理矛盾(Administrative Contradictions)、物理矛盾(Physical Contradictions)、技术矛盾(Technical Contradictions)[9]。管理矛盾不在我们的研究范围之内，因此不做叙述。物理矛盾是指为了实现某种功能，一子系统或元件应具有一种特性，但同时出现了与该特性相反的特性。如：一子系统中有用功能的加强同时导致该子系统中有害功能的加强；一子系统中有害功能的降低同时导致该子系统中有用功能的降低。技术矛盾是指一个作用同时导致有用及有害两种结果，也可指有用作用的引入或有害效应的消除导致一个或几个子系统或整个系统变坏。技术矛盾常表现为一个系统中两个子系统之间的矛盾。如：在一子系统中引入一有用功能，导致另一子系统产生一有害功能，或加强了己存在的另一有害功能；消除一有害功能导致另一子系统有用功能变坏；有用功能的加强或有害功能的减弱使另一子系统或整个系统变得太复杂。
在TRIZ理论中，技术矛盾是使用一对相互矛盾的参数来描述的，通过选择一对矛盾参数后查找矛盾矩阵表，得到创新原理。
我们首先创建maodun.jsp页面，在该矛盾页面的下拉列表中分别选择一个恶化参数和一个优化参数，注意恶化参数与优化参数不能选择同一个，否则页面会弹出提示对话框。选择完矛盾参数后点击提交按钮，页面端局部刷新显示出解决问题的创新原理，与传统Web页面相比大大减少了用户等待时间。具体流程如下：
（1）首先创建Web页面，通过用户的页面行为（点击提交按钮）激发Ajax引擎，Ajax引擎调用JavaSript并验证不同的浏览器所创建XMLHttpRequest对象不同的方法。maodun.jsp具体代码如下：
<% page contentType=“text/html;charset-UTF-8” language=“java” %>
<head>
<META http-equiv=Content-Type content=“text/html;charset-UTF-8”>
</head>
<script language=“javascript”>
var XMLHttpReq = false;
//创建XMLHttpRequest对象
Function creatXMLHttpRequest() {
if(windows. XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest(); //Mozilla浏览器
}
else if (window.ActiveXobject) {
try {
XMLHttpReq = new ActiveXobject (“Msxml2.XMLHTTP”);
} catch (e) {
try {
XMLHttpReq = new ActiveXobject (“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
}
</script>
<body>
恶化的参数：
<select name ="canshu">
<% String canshu1[ ]={"请选择参数","运动物体的质量","... ...","制造精度"};
for(int i=0;i<canshu1.length;i++){%>
<option value ="<%=canshu1[i]%>"><%=canshu1[i]%></option><%}%>
</select><br/><br/>
优化的参数：
<select name ="canshu2">
<% String canshu3[ ]={"请选择参数","运动物体的质量","... ...","制造精度"};
for(int i=0;i<canshu3.length;i++){%>
<option value ="<%=canshu3[i]%>"><%=canshu3[i]%></option><%}%>
</select>
<input type="button" value="提交" onclick="verify()"/>
</body>
… …
（2）创建完XMLHttpRequest对象后，使用onreadystatechange属性来响应处理函数，并向服务器发出请求，随后通过send( )方法发送请求。当open方法设置成异步方式(true)时，XMLHttpRequest对象的send方法发送请求后，并不立即返回，而是等到服务器响应之后才返回。具体代码如下：
xmlhttp.onreadystatechange = callback;
xmlhttp.open("GET","AJAXServer? paramater="+ param,true);
xmlhttp.send(null);
（3）send方法返回后改变XMLHttpRequest对象状态。XMLHttpRequest对象状态改变后，onreadystatechange属性指定的函数开始执行，在这个函数内部就可以对服务器的响应进行处理。其中变量url 表示向服务器请求的URL 地址，callback为回调函数，是一个JavaScript 函数指针，用来处理从服务器返回的数据。回调函数先检测XmlHTTPRequest 的状态是否已“完成”(readyState = = 4) 并检测服务器返回状态是否“就绪”(status == 200)，如果两者均满足要求，就可以获取来自服务器的处理结果，并将其更新到用户页面上。具体代码如下：
function callback() {
if (xmlhttp.readyState == 4) {
}else{
alert("您的信息出错了!");
}
if (xmlhttp.status = = 200) {
}else{
alert("您的页面出错了!");
}
}
（4）创建对应的控制层相关的控制类，作为控制中心的Servlet程序。通过GET和POST方法对在页面中取得的参数进行验证，如果两个列表框中的矛盾参数为空或者两个列表框中的矛盾参数相同，提示操作失败。具体代码如下：
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
……
public class AJAXServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
……
String str1= httpServletRequest.getParameter("parm");
String str2= httpServletRequest.getParameter("parm");
String parm = URLDecoder.decode(str1,str2,"UTF-8");
if((str1 = = null || str2 = = null)&&(str1.value = = str2.value)){
alert("两个参数不能为空或者两个参数不能相同，请重新选择！");
} else{
return;
}
} catch(Exception e){
e.printStackTrace();
}
}
}
4 实例分析
下面以家用吹风机为例来说明AJAX在TRIZ理论技术矛盾Web平台中的具体应用。
吹风机是日常生活中必备的家电用品，但因为吹风机的电线容易缠绕在一起，不容易打理，导致收拾费时且占空间及产生危险性等问题。因此，应用TRIZ理论技术矛盾来解决这一系列的问题。我们将优化参数和恶化参数列出：
优化参数：
1 运动物体的重量
7 运动物体的体积
30 物体外部有害因素
33 可操作性
恶化的参数：
3 运动物体的长度
15 运动物体作用时间
36 装置的复杂性
下面我们在技术矛盾页面分别选择优化参数30和恶化参数3来进行分析。点击提交按钮时传统Web页面如图2所示，我们可以直观地看到提示信息显示的窗口后面页面时空白的，这是因为在进行整个页面的刷新，当提示窗口未关闭之前，刷新过程是不继续向下进行的；而应用AJAX的页面如图3所示，我们看到提示信息显示的窗口后面页面并不是空白的，是我们选择时的页面。
图2 应用传统的Web页面
图3 应用AJAX的Web页面
通过以上分析我们在4个创新原理中可以找到以下两个最佳创新原理来解决家用吹风机存在的问题：
1-分割：将一物体分成相互独立的部分。
15-动态特性：将一物体分成能够改变相对位置的不同部分。
通过分割和动态特性两个原理我们得出家用吹风机的解决方案：将吹风机的电线与吹风机分离，供电设备由电线改为蓄电池，这样既容易打理又不会产生危险，该方案亦适用于其他领域的产品。
5 结论
将AJAX技术应用到TRIZ理论技术矛盾Web平台中，实现了数据的异步交互，能快速响应用户的请求。该平台把满足使用者需求作为第一要素；使该平台始终与用户的实际需求紧密连在一起，增加该平台的适用性，提高Web请求响应速度。应用该平台有助于设计者间的相互学习和交流，促进TRIZ理论方法在我国的广泛应用和深入研究；有益于创新人员加快创新的进程，提升产品创新水平；有利于TRIZ理论创新方法面向世界的推广。
参考文献：
[1] 吕小平, 周 继, 董丽丽. 基于Ajax 技术的Web 2. 0 开发应用. 计算机应用技术, 2009, 293(6): 91-93.
[2] 骆建佳, 尧飘海, 朱伟. Ajax框架在web服务中的应用[J].计算机系统应用, 2007(7): 86-90.
[3] 田福生, 张燕平. 用Ajax技术实现B/S模式下客户端间信息交互[J]. 计算机技术与发展, 2007, (10): 92-94.
[4] 赵政文. 基于Ajax引擎的Web开发研究. 科学技术与工程, 2007. 12,7(23): 6235-6238.
[5] 肖 杰, 陈 翔, 何海江, 崔韶刚. 基于AJAX和Struts的Web应用的设计与实现.计算机工程与设计, 2009, 30(8): 1934-1937.
[6] Altshuller G. The innovation algorithm, TRIZ, Systematic innovation and technical creativity[J]. Technical Innovation Center, INC, Worcester, 1999: 77-88.
[7] Kim Y S. Scochran D S. Reviewing TRIZ from the perspective of axiomatic design[J]. J. Eng. Design, 2000, 11(1): 79 - 94.
[8] 董建强, 王科社, 庄福晓. 常用计算机辅助产品创新设计软件的分析. 2008.12, 27(12): 9-11
[9] 檀润华, 苑彩云, 马建红, 张瑞红. 发明问题解决理论:TRIZ——技术冲突及解决原理[J].机械设计,2001,30(3):1-5
|
