日期:2014-05-16 浏览次数:20346 次
在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); } }); }