Struts2 整合jQuery实现Ajax功能(1)

技术领域非常多东西流行，自然有流行的道理。这几天用了jQuery，深感有些人真是聪明绝顶，能将那么多技术融合的如此完美。

首先明白个概念：

jQuery是什么：是使用javascript语言开发的，用于满足项眼下台各种操作须要的js程序文件。

也就是说。jQuery基本上就是个js程序集，基础核心是jQuery.js文件。

l        当然依据不同的版本号详细的表现形式：

jQuery.1.6.js或者jquery-1.5.1.js

这个是版本的不同，详细有哪些差别，还没发现。

l        还有这样的形式

jquery-1.5.1.min.js（紧缩格式。取消回车，一行代码）

l        依据应用需求的不同。jQuery

1          引入jQuery

项目中引入jQuery

l        下载jQuery：http://docs.jquery.com/Downloading_jQuery

l        加入核心文件：将核心的jQuery文件拷贝到项目中。

 <SCRIPT type="text/javascript"src="js/jquery/jquery-1.6.js"></script>

        <SCRIPTtype="text/javascript">

functioncheckkey()

{

…………使用jQuery技术自己定义的代码…………

}

</SCRIPT>

2          jQuery的Ajax

jQuery的内容很庞杂，能够解决诸多方面的需求。主要包含：Ajax。页面效果，页面验证。

作为J2ee项目，我主要关注了一下Ajax和页面验证。

jQuery的Ajax非常easy，只使用核心文件jQuery.js就能够实现了。

函数	描写叙述
jQuery.ajax()	运行异步 HTTP (Ajax) 请求。
jQuery.get()	使用 HTTP GET 请求从server载入数据。
jQuery.getJSON()	使用 HTTP GET 请求从server载入 JSON 编码数据。
jQuery.post()	使用 HTTP POST 请求从server载入数据。

有关Ajax的方法有非常多，这里仅仅简单研究了三种（事实上就一种jQuery.ajax()），其他的都是jQuery.ajax()的简写形式。

详细格式，上述站点说的已经很清楚了，记住例如以下格式就能够。

$.ajax({

type: 'POST',         //提交方法

url: url,                            //提交的地址

data: data,                 //提交的參数

success: success,         //成功后，回调的函数名

dataType: dataType     //返回的数据类型

});

演示样例：

post的演示样例：使用ajax（）的简化格式post（）方法：中间有三个參数：url，data（json格式）。回调函数（回调函数能够定义在他处。此处仅写函数名）

$.post("test.jsp",

{name: "John", time: "2pm" },

     function(data){

          alert("DataLoaded: " + data);

   });

 

3          Struts2整合jQuery

Struts2中基本的业务操作都是通过Action来完毕的。此时就须要jQuery来訪问Struts2的Action。

$.post("Action",……)

3.1         Login.jsp页面：

l        功能：用户登录。首先须要输入公司标识码：

l        正确：显示对勾；

l        错误：显示红叉；

l        jQuery代码：

<SCRIPTtype="text/javascript" src="js/jquery/jquery-1.6.js"></script>

<SCRIPTtype="text/javascript">

            function checkkey(){   

                var url = 'getKeyExist';

                var params ={companyKey:$('#ckey').attr('value')};

                 $('#warn').html("<imgsrc='image/ajax/wait.gif'/>");

                jQuery.post(url, params,callbackFun);

            }

            function callbackFun(data){

                $('#warn').html(data);

            }

</SCRIPT>

l        HTML：当文本框失去焦点时，触发回调事件。

<DIV class=line><LABEL class=big id=lblName>公司标识</LABEL>

<INPUT id='ckey' name="ckey" onblur="checkkey();"><spanid="warn"></span>

</DIV>

l        说明：

n        当文本框‘ckey’失去焦点时：调用“checkkey”函数。

n        “checkkey”函数分别确定两个信息：

u      异步訪问：'getKeyExist'——推断标识是否正确的Action类。

u      參数：{companyKey:$('#ckey').attr('value')}，一个以json格式拼写的參数。

u      注：Json的对象格式：

u      发出异步请求：jQuery.post(url, params, callbackFun);

3.2         Action代码：

传统的Action都是返回String，依据String的不同决定forward到不同的Jsp页面，这给Ajax带来麻烦。我当初还是走了些弯路。

3.2.1   通过Jsp得到回调信息

繁琐。意义不打， 删去/略 !

3.2.2   Action自主完毕响应(即自己完毕结果对象的Json串行化，然后写入HttpServletResponse
)：

后来发现，Action也能够自主完毕响应，不须要Jsp的支持。

代码改动例如以下：

l        Action：新建了个方法getKeyExist。不提供返回值。

if(complist.size()>0)

remessage="<imgsrc=’image/ajax/yes.gif’/> ";

else

remessage="<imgsrc=’image/ajax/no.gif’ /> ";

              HttpServletResponseresponse = ServletActionContext.getResponse();

       response.setCharacterEncoding("UTF-8");     

       response.getWriter().write(remessage);    

l        struts.xml:又一次建立了无结果result；

<actionname="getKeyExist" class="ResponseMessageAction"method="getKeyExist">

</action>

l        此时得到的响应就简单干净了非常多。

上述方法已经能够得到响应的信息，可是在非常多情况下，还须要对响应的结果进行区分，来决定不同的显示效果，此时，响应值就要携带很多其它的信息。也就是说不是简单的一个字符串。而是一个对象。那么使用Json格式相对来说就比較方便（3.1提到了Json的对象格式）。

l        Action：响应信息改为json格式。

if(complist.size()>0){

remessage="{type:'yes',show:'<imgsrc=\"image/ajax/yes.gif\" />'}";

}

else{

remessage="{type:'no',show:'<imgsrc=\"image/ajax/no.gif\" />'}";                                  }

l        jQuery：回调结果

function callbackFun(data){

eval('json=' + data +';');
//自己解析Json响应数据

if(json.type=='no'){

$('#ckey').focus();

}

$('#warn').html(json.show);

}