通过YUI2.8的AJAX,以JSON格式向前后端传递数据 -

zhengjj_2009

浏览: 153605 次
性别:
来自: 北京

最近访客更多访客>>

本是后山人

玩野大人

小小书僮

Janesen_Sj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

通过YUI2.8的AJAX,以JSON格式向前后端传递数据

json Ajax Struts JavaScript Yahoo

最近在学习和使用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="保存信息" onclick="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);

做完这个例子，我的最深体会是边练习边理解，不要光看别人的代码和程序，实践出真知！

分享到：

YUI2.8 实现TabView和DataTable的结合使 ... | YUI2.8 实现datatable从server端动态获取 ...

2010-05-14 16:19
浏览 3353
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

通过YUI2.8的AJAX,以JSON格式向前后端传递数据

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

通过YUI2.8的AJAX,以JSON格式向前后端传递数据

评论

发表评论

相关推荐

最近访客更多访客>>