struts2实现ajax交互

课程目标
了解Struts2中ajax的响应方式(响应text文本、响 应json集合) 掌握Struts2和ajax交互的代码规范 Sturts2响应json的代码规范和配置规范
1 / 16
上一课内容回顾
1， 2， 3，
2 / 16
Ajax交互过程回顾
Ajax的原理，简单来说通过XmlHttpRequest对象来向服 务器发异步请求，从服务器获得数据，然后用 javascript来操作DOM而更新页面。
4 / 16
JavaScript方法举例
var xmlhttp; 参考 function loadXMLDoc(url){ xmlhttp = new XMLHttpRequest(); if(xmlhttp!=null){ xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); }else{ alert("Your browser does not support XMLHTTP."); } } function state_Change(){ if (xmlhttp.readyState==4) {// 4 = "loaded" if (xmlhttp.status==200) {// 200 = OK document.getElementById("msg").innerHTML=xmlhttp.responseText; }else{ alert(“Problem retrieving XML data”); JSP页面部分 }}}
Struts2与Ajax交互的步骤
1，action定义一个InputStream属性 2，struts.xml配置 视图配置type="stream" 3，jsp页面，使用js编写ajax方法
7 / 16
课堂演示
使用AJAX与Struts2的action交互
12分钟
8 / 16
XMLHttpRequest对象的属性
public class OrderAction { private Integer id; //传入参数 private InputStream inputStream; public InputStream getInputStream() { return inputStream; } public String execute(){ String msg = "id为"+id+"的订单商品为手机"; inputStream = new ByteArrayInputStream(msg.getBytes()); return "success"; } }
10 / 16
JSP代码
Script 代码参照 JavaScript方法举例
function getOrder(){ $.post("order!getOrder.action","id=1", function(result){ $("#msg").html(result); } ); }
<form> <input type="button" value="获取订单名称" onclick="getOrder()"/> <div id="msg"></div> </form>
9 / 16
配置文件代码
<package name="sxt" extends="struts-default"> <action name="order" class="com.bjsxt.action.OrderAction"> <result type="stream"> <param name="inputName">inputStream</param> <param name="contentCharSet">GBK</param> </result> </action> </package>
5 / 16
JQuery
function readMessage(){ $.post("/sxt/app/order.action","id=1", function(result){ $("#msg").html(result); } ); } function readAjax(){ $.post("/sxt/app/user.action","id=1", function(result){ $("#msg").html(result[0].id+" "+result[0].name+"</br>"+result[1].id+" "+result[1].name); } ); 6 / 16 }
0 (未初始化) 1 (初始化) 4 (完成) 数据接收完毕 2 (发送数据) 3 (数据传送中)
onreadystatechange,事件句柄,每次 readyState 属性改变的时候调 用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。 responseText从服务器进程返回数据的字符串形式，如果 readyState 小于 3，这个属性就是一个空字符串 responseXML，解析为XML并作为Document对象返回。如果响应体不是 “text/xml”返回null status,从服务器返回的数字代码，比如常见的404（未找到）和200（ 已就绪） statusText,用名称而不是数字指定了请求的HTTP的状态代码。也就是 说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found&#立struts321的项目 建立StudentAction.java 建立student.jsp,使用ajax技术访问StudentAction，得到id=1的学生 信息。
20分钟
12 / 16
采用Json方式--action
public class UserAction { private Integer id; //传入参数 private List list = new ArrayList(); public String execute(){ User zhang = new User(1,"张三","1381"); User li = new User(2,"李四","1386"); list.add(zhang); list.add(li); return "success"; } } }
13 / 16
采用Json方式—struts.xml
//struts.xml <package name="app" extends="json-default" namespace="/app"> <action name="user" class="erAction"> <result type="json"> <!--result类型为JSON--> <param name="root">list</param> <!-- json的从root开始，转换list为json结构字符串--> </result> </action> </package>
XMLHttpRequest是ajax的核心机制，它是在IE5中首先 引入的，是一种支持异步请求的技术。简单的说，也就 是javascript可以及时向服务器提出请求和处理响应， 而不阻塞用户。达到无刷新的效果。
3 / 16
XMLHttpRequest对象的属性
readyState,HTTP请求的状态.当一个XMLHttpRequest初次创建时，这 个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4。
14 / 16
课堂演示
使用AJAX与Struts2的action交互,读取JSON
12分钟
15 / 16
16 / 16