使用JQuery在Struts2中进行异步请求 -

eggbucket1

浏览: 78402 次
性别:
来自: 苏州

最近访客更多访客>>

jiangcon

心杀心

z137384812

lwhwhy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (133)

社区版块

存档分类

使用JQuery在Struts2中进行异步请求

Struts2与XML
在AJAX异步请求时，通常需要服务器端返回针对此次请求的一个快速响应
此时异步请求的Action会返回一个我们所需要的特定格式的文件供客户端使用
一般是纯文本、XML、JSON等，然后再进一步处理该文件，而不会刷新整个页面
若Action返回JSP的话，那么肯定会导致整个页面都刷新，这样是不符合要求的
我们可以使用JQuery在页面进行异步请求，向服务器端发送请求，并构造Table

JQurey简介
JQuery是目前使用最多的AJAX框架
我们可以在www.google.com/trends中输入jquery,dojo,dwr,yui,gwt查看它们的使用趋势
JQuery官网为http://jquery.com
Struts2的JQuery插件中提供了有关JQuery框架的标签，我们可以便捷的使用这些标签
可以在http://code.google.com/p/struts2-jquery/downloads/list下载struts2-jquery-plugin-2.1.0.jar
它里面已经包含了jquery-1.4.2.js文件，所以前台的页面中就没有必要再引用jQuery源代码文件了

下面是在Struts2中使用JQuery进行异步请求的demo

首先是xmlTest.jsp页面

<%@ page pageEncoding="UTF-8"%> <script type="text/javascript" src="JQuery/jquery-1.4.2.js"></script> <script type="text/javascript"> /* $(function(){ $("#btn").click(function(){ $.ajax({ type: "POST", //请求的类型 url: "getXmlAction.action", //访问的服务器资源 dataType: "xml", //可以是xml、json、html等，默认为html data: {name: $("#name").val()}, //发送请求时，携带的参数 success: function(returnedData){ //调用成功时执行的回调，它会接收一个参数，即服务器端回传过来的数据值 // TODO ... } }); }); }); */ function getInfo(){ /*$.post()中需要接收三个参数。。。这里也可以用$.get()*/ //GET本身是作为请求URL的一部分进行发送的，而POST请求是作为请求体的一部分进行发送的，这是HTTP协议来决定的 //第一个参数是请求的资源。这里的getXmlAction对应着struts.xml里面<action>的name值 //第二个参数是向所请求的资源上附带的参数信息。本例中的参数只有一个，即用户所选择的name值 //--------该页面请求的时候，会向服务器端发送一个名字为name，值为$("#name").val()的信息 //第三个参数是一个function()，它里面又有两个参数，其中returnedData表示服务器端所返回的数据 //---------而status表示的是返回的状态，它的值是一个字符串，例如【200 OK】就表示【success】 $.post("getXmlAction.action", {name: $("#name").val()}, function(returnedData, status){ if("success" == status){ //alert(returnedData); //从服务器端获取数据。首先把returnedData包装成一个JQuery对象，然后调用find()获得文本内容 var id = $(returnedData).find("id").text(); var name = $(returnedData).find("name").text(); var age = $(returnedData).find("age").text(); var address = $(returnedData).find("address").text(); //构造HTML表格。其中<th>默认就是居中加粗的 var html = "<table width='60%' border='6' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr><tr align='center'><td>" + id + "</td><td>" + name + "</td><td>"+ age + "</td><td>" + address + "</td></tr></table>"; //删掉<body>中的<table>，这里也可以写成【$("body table").remove();】实现同样的删除<table>的功能 //如果在append(html)之前没有删除表格的话，在页面中再次点击按钮发送请求时，会在页面中又一次的输出表格 //我们可以将这行代码注释掉，查看效果 $("body table:eq(0)").remove(); //将动态构造的表格添加到<body>中 $("#theBody").append(html); } } ); } </script> <body id="theBody"> <select id="name"> <option value="zhangsan" selected="selected">zhangsan</option> <option value="lisi">lisi</option> </select>  <input type="button" id="btn" value="getInfo" onclick="getInfo();"> </body>

下面是struts.xml文件

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <package name="JQuery" extends="struts-default"> <action name="getXmlAction" class="com.jadyer.action.GetXmlAction"/> </package> </struts>

然后是一个JavaBean类

package com.jadyer.bean; public class Person { private int id; private String name; private int age; private String address; /*--四个属性对应的getter和setter略--*/ }

最后是Struts2中的用来处理前台请求的Action

package com.jadyer.action; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import org.dom4j.Document; import org.dom4j.DocumentHelper; import org.dom4j.Element; import org.dom4j.io.OutputFormat; import org.dom4j.io.XMLWriter; import com.jadyer.bean.Person; import com.opensymphony.xwork2.ActionSupport; public class GetXmlAction extends ActionSupport { private static final long serialVersionUID = -4464143649688180599L; private String name; //它与xmlTest.jsp中的$.post()里面的第一个参数的name是一致的 public String getName() { return name; } public void setName(String name) { this.name = name; } /** * 这里暂不涉及数据库操作，仅仅通过数据的模拟来完成异步请求的操作 */ @Override public String execute() throws Exception { /** * 首先构建2个用于提供数据的Person对象 */ // zhangsan Person person1 = new Person(); person1.setId(1); person1.setName("zhangsan"); person1.setAge(20); person1.setAddress("shanghai"); // lisi Person person2 = new Person(); person2.setId(2); person2.setName("lisi"); person2.setAge(30); person2.setAddress("tianjin"); /** * 接下来就是使用Dom4J构造XML文档 * <users> * <user> * <id>1</id> * <name>zhangsan</name> * <age>20</age> * <address>shanghai</address> * </user> * </users> */ // Document对象代表整个xml文档 Document document = DocumentHelper.createDocument(); // rootElement代表文档根元素 Element rootElement = document.addElement("users"); // 增加一个注释 rootElement.addComment("This is a comment!"); // 增加一个<user>标签 Element userElement = rootElement.addElement("user"); // 设定不同的<user>下面的子标签 Element idElement = userElement.addElement("id"); Element nameElement = userElement.addElement("name"); Element ageElement = userElement.addElement("age"); Element addressElement = userElement.addElement("address"); // 为各个子标签填充值。根据用户输入信息的不同来决定标签值内容的不同 if ("zhangsan".equals(this.name)) { idElement.setText(person1.getId() + ""); nameElement.setText(person1.getName()); ageElement.setText(person1.getAge() + ""); addressElement.setText(person1.getAddress()); } else if("lisi".equals(this.name)) { idElement.setText(person2.getId() + ""); nameElement.setText(person2.getName()); ageElement.setText(person2.getAge() + ""); addressElement.setText(person2.getAddress()); } /** * 将XML文档返回给用户 * 如果这里return SUCCESS的话，则会导致当前页面刷新 * 哪怕返回的是当前页面，也会导致其刷新，而重新请求一次 */ HttpServletResponse response = ServletActionContext.getResponse(); // 设定响应头的信息。这里设定的【text/xml】是非常非常重要的 response.setContentType("text/xml; charset=UTF-8"); // 取消浏览器缓存。因为异步刷新的时候，经常会出现缓存的情况，影响我们的开发 response.setHeader("Cache-Control", "no-cache"); // 借助HttpServletResponse的帮助，来获得一个PrintWriter对象 // 然后将XML文件写到Writer对象里面，发送给客户端 PrintWriter out = response.getWriter(); // 设定输出格式以及编码。这点与jdom是一样的 OutputFormat format = OutputFormat.createPrettyPrint(); format.setEncoding("UTF-8"); // 通过org.dom4j.io.XMLWriter来进行输出 XMLWriter writer = new XMLWriter(out, format); writer.write(document); //将document所代表的XML文本输出到【XMLWriter(out, format)】中的out对象中 out.flush(); // 清空流 out.close(); // 关闭流 // 这里根本就不需要返回任何东西，但该方法要求返回一个String，所以这里return null // 而内容的输出则通过Servlet来实现，这是向页面返回自定义文本【包括JSON、XML、纯文本】的一种比较好的方式 // 由于这里返回的是null，所以struts.xml里面的<action>中便无需定义<result> return null; } }

分享到：