日期:2014-05-16 浏览次数:20403 次
在UI部分,页面文件很简单,userMessage.jsp的内容如下:
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>Struts + JSONtitle>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/utilities.js">script>
<script type="text/javascript" src="js/main.js">script>
<script type="text/javascript" src="js/message.js">script>
<script>
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.TAIL.TestHome.init();
});
</script>
</head>
<body>
<div id="container">
</div>
<body>
<html>?
?
从页面head部分可以看出,UI主要工作的有三个js文件:main.js,message.js和utilities.js。
?
其中,utilities.js是YUI的核心工具包;main.js主要是我自己对YUI Ajax功能的进一步封装;message.js则是页面使用的核心js文件,用来构造页面元件,和server端进行Ajax交互。其代码如下:
YAHOO.namespace("TAIL");
if (!YAHOO.TAIL.TestHome)
{
YAHOO.TAIL.TestHome = function ()
{
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var messageList;
function loadData()
{
// create user editors
var container = document.getElementById('container');
var userDiv = document.createElement('div');
container.appendChild(userDiv);
var userLabel = document.createElement('label');
userLabel.innerHTML = 'New Test User:';
userDiv.appendChild(userLabel);
var userEdit = document.createElement('input');
userEdit.type = 'text';
userEdit.id = 'user';
userDiv.appendChild(userEdit);
// create msg editors
var msgDiv = document.createElement('div');
container.appendChild(msgDiv);
var msgLabel = document.createElement('label');
msgLabel.innerHTML = 'New Message: ';
msgDiv.appendChild(msgLabel);
var msgEdit = document.createElement('input');
msgEdit.type = 'text';
msgEdit.id = 'message';
msgDiv.appendChild(msgEdit);
// create button
var button = document.createElement('input');
button.type = 'button';
button.value = 'Add Now!';
msgDiv.appendChild(button);
Event.addListener(button, 'click', addNewMessage);
// create message div
var msgListDiv = document.createElement('div');
msgListDiv.id = 'messagelist';
msgListDiv.style.color = 'blue';
container.appendChild(msgListDiv);
JSONRequest.sendRequest(
'POST',
'home/loadMessages.action',
null,
{
success: function(result)
{
messageList = result.messageList;
reloadMessageList();
},
error: function(result)
{
alertJSONErrors(result);
},
failure: function(o)
{
var errMsg = "Error loading message list!";
alertFailure(o, null, errMsg);
}
});
}