最近在学习和使用YUI2.8,在本地调试成功了用YUI2.8的AJAX,以JSON格式向前后端传递数据,现在将其记录下来,以备日后使用。
注:我是看了《YUI + struts2实现基于JSON通讯的AJAX例子》
http://www.cnblogs.com/ysenhan/articles/1371952.html 之后有了自己的想法,然后动手调试自己的程序。
简要步骤如下:
1、编写BaseStruts2Action,这是为了通用性,我我单独提炼出来的。
package com.demo.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class BaseStruts2Action extends ActionSupport {
private static final long serialVersionUID = -7098181898244016914L;
public HttpServletRequest getRequest() {
return ServletActionContext.getRequest();
}
public HttpServletResponse getResponse() {
return ServletActionContext.getResponse();
}
public void outJsonString(String str) {
getResponse().setContentType("text/javascript;charset=UTF-8");
outString(str);
}
public void outJson(Object obj) {
outJsonString(JSONObject.fromObject(obj).toString());
}
public void outJsonArray(Object array) {
outJsonString(JSONArray.fromObject(array).toString());
}
public void outString(String str) {
try {
PrintWriter out = getResponse().getWriter();
out.write(str);
} catch (IOException e) {
}
}
public void outXMLString(String xmlStr) {
getResponse().setContentType("application/xml;charset=UTF-8");
outString(xmlStr);
}
protected String postData;
public String getPostData() {
return postData;
}
public void setPostData(String postData) {
this.postData = postData;
}
}
2、编写接收请求和处理的Action:YuiAjaxJsonAction.java
package com.demo.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import com.demo.model.Book;
import com.demo.yuiutil.JSONResult;
import com.demo.yuiutil.YUIPagination;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("all")
public class YuiAjaxJsonAction extends BaseStruts2Action{
public void saveBook(){
System.out.println("\n...saveBook() is called;postData="+postData);
JSONObject jsonObject = JSONObject.fromObject(postData);
Book book = (Book)JSONObject.toBean(jsonObject, Book.class);
System.out.println("\n...saveBook(): id="+book.getId()+";quantity"+book.getQuantity()+";amount"+book.getAmount()+";title="+book.getTitle());
JSONResult jsonResult = new JSONResult();
jsonResult.setCode(0);
jsonResult.setMessage("saveBook is successful");
this.outJson(jsonResult);
}
}
3、通用类 JSONResult
package com.demo.yuiutil;
public class JSONResult {
static public final int CODE_OK = 0;
static public final int CODE_ERR = -1;
private int code;
private String message;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
4、struts.xml的配置
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<include file="struts-default.xml"/>
<constant name="struts.objectFactory" value="spring" />
<package name="yuiajaxjson" namespace="/yuiajaxjson" extends="struts-default">
<action name="do_*" method="{1}" class="com.demo.action.YuiAjaxJsonAction">
</action>
</package>
</struts>
5、JSP的文件,这才是最主要的部分:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <%String sysPath =basePath+"appjs/yuijs/build"; %> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsonajax_01</title> <script type="text/javascript" src="<%=sysPath %>/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="<%=sysPath %>/connection/connection-min.js"></script> <script type="text/javascript" src="<%=sysPath %>/json/json-min.js"></script> <script type="text/javascript" src="<%=sysPath %>/element/element-min.js"></script> </head> <body class="yui-skin-sam"> <div class="exampleIntro"> <p>实现的功能:通过AJAX,以JSON格式向前后端传递数据</p> <input type="button" name="saveBook" value="保存信息" οnclick="saveBook()"/> </div> <div id="dynamicdata"></div> <script type="text/javascript"> function saveBook() { //读取信息 var book = new Object(); book.id = 11; book.quantity = 1101; book.amount = 2202; book.title ="book title 01"; //转换为JSON格式,并以"postData"做为属性名 var jsonStr = YAHOO.lang.JSON.stringify(book); //将对象转化为JSON格式 var postData = "postData=" + jsonStr; //为了通用性,这里设置为postData的参数 var responseSuccess = function(o){//这是把函数写在内部的方式,也可以把函数写在外部 alert("inner responseSuccess is called"); //将返回的JSON串转成对象 var ret = YAHOO.lang.JSON.parse(o.responseText); if (ret.code == 0) { //successed alert("inner 处理成功: "+ret.message); } else { //failed alert("inner 失败 :" + ret.message); } }; var responseFailure = function(o){ //这是把函数写在内部的方式,也可以把函数写在外部 alert("inner 服务器处理失败 : " + o.statusText); } //准备回调函数 var callback = { success :responseSuccess, failure :responseFailure, argument : null }; //AJAX异步调用 alert("postData="+postData); var request = YAHOO.util.Connect.asyncRequest('POST', '/yuiajaxjson/do_saveBook.action', callback, postData); } /*function responseSuccess(o) {//这是把函数写在外部的方式,也可以把函数写在内部 // o.tId o.status o.statusText // o.getResponseHeader[ ] o.getAllResponseHeaders // o.responseText o.responseXML o.argument alert("responseSuccess is called"); //将返回的JSON串转成对象 var ret = YAHOO.lang.JSON.parse(o.responseText); if (ret.code == 0) { //successed alert("处理成功: "+ret.message); } else { //failed alert("失败 :" + ret.message); } }; function responseFailure(o) {//这是把函数写在外部的方式,也可以把函数写在内部 alert("服务器处理失败 : " + o.statusText); }*/ </script> </body> </html>
从上面的代码可以看到,使用YUI的ajax在前后端之间传输JSON数据很简单,只要知道YAHOO.util.Connect.asyncRequest()怎么使用即可
var request = YAHOO.util.Connect.asyncRequest('POST', '/yuiajaxjson/do_saveBook.action', callback, postData);
做完这个例子,我的最深体会是边练习边理解,不要光看别人的代码和程序,实践出真知!