开发Ajax注册遇到的诸如Log4j配置、Ext2.0、Json等等的问题

要实现的效果:（由于我不是美工，所以界面效果不好）

注册等待:点击注册

用户名已存在：

注册成功:

 

 

点击确定后跳转到登录界面：

 

 

要实现上面的功能,在编码前需要做一些全局的准备，比如Log4j的配置，在Web工程下的Log4j配置有些不同，将Log4j.properties放入WEB-INF文件夹下,定义一个Servlet，专门作为初始化日志用。当然，如果你没有使用日志的习惯就可以跳过这步了，不过我强烈建议要养成这个习惯

web.xml中的配置:

<servlet> <servlet-name>InitLog4j</servlet-name> <servlet-class> com.ys.student.user.servlet.InitLog4j </servlet-class> <init-param> <param-name>log4j</param-name> <param-value>WEB-INF/log4j.properties</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet>

然后在InitLog4j中的init方法中进行初始化配置

package com.ys.student.user.servlet; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import org.apache.log4j.PropertyConfigurator; public class InitLog4j extends HttpServlet { public void init() throws ServletException { String prefix = getServletContext().getRealPath("/"); String file = getInitParameter("log4j"); if (file != null) { PropertyConfigurator.configure(prefix + file); } } }

那么这就完成了日志的配置.

 

 

定义User的JavaBean，提供注册方法，这里只是拿来测试

package com.ys.student.user; /** * @author neu_20063500 * */ public class User { private String username; private String password; public User(String username, String password) { super(); this.username = username; this.password = password; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } /** * * 返回注册是否成功的标志 * * @return 注册是否成功的标志 */ public boolean registry() { return true; } }

 

然后定义Servlet处理注册请求

package com.ys.student.user.servlet; import java.io.IOException; import java.io.InputStream; import java.util.Properties; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.log4j.Logger; import org.apache.log4j.PropertyConfigurator; import com.ys.student.user.User; import com.ys.student.user.msg.MsgBean; public class UserRegistry extends HttpServlet { private static Logger log = Logger.getLogger(UserRegistry.class);; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=gbk"); log.debug("获取参数"); try { Thread.sleep(2000); } catch (InterruptedException e) { e.printStackTrace(); } String username = request.getParameter("username"); String password = request.getParameter("password"); String repassword = request.getParameter("repassword"); User u = new User(username, password); if (u.registry()) { log.debug("注册成功"); response.getWriter().write(new MsgBean("success", "注册成功").toJson()); response.getWriter().close(); } else { log.debug("注册失败"); response.getWriter() .write(new MsgBean("error", "用户名已经存在").toJson()); response.getWriter().close(); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

 

其中，为了配合Ext使用Ajax，那么就需要写回JSON数据，这里用到了Apache中的JSON包，定义了MsgBean类，代码如下：

package com.ys.student.user.msg; import net.sf.json.JSONException; import net.sf.json.JSONObject; /** * @author neu_20063500 * */ public class MsgBean { private String message; private String key; public String getKey() { return key; } public void setKey(String key) { this.key = key; } public MsgBean(String key, String message) { super(); this.key = key; this.message = message; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } /* * 转换成JSON字符串 */ public String toJson() { JSONObject o = new JSONObject(); try { o.put(key, message); return o.toString(); } catch (JSONException e) { e.printStackTrace(); return o.toString(); } } }

 

然后开发注册界面，这里是registry.jsp

 <%@ page language="java" pageEncoding="UTF-8"%> <div id="registry"> 用户名：   <input type="text" name="username"> <span id="usernameE"></span> <br> 密    码： <input type="password" name="password"> <br> 重复密码： <input type="password" name="repassword"> <br><br> <input type="button" value="申请注册" οnclick="submit()"> <div id="loading"></div> </div>

定义index.jsp包含registry.jsp这个界面，并且引入EXT相关

<%@ page language="java" pageEncoding="GBK"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>registry page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <mce:script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js" mce_src="ext-2.2/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext-2.2/ext-all.js" mce_src="ext-2.2/ext-all.js"></mce:script> <mce:script type="text/javascript" src="ext-2.2/build/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript" src="jslib/registry.js" mce_src="jslib/registry.js"></mce:script> </head> <body> <jsp:include page="registry.jsp"></jsp:include> </body> </html>

定义成功跳转界面:

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'success.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> </head> <body> success!<br> </body> </html>

然后就是主要的submit方法了，提交注册请求，处理返回的JSON数据，根据成功与否进行跳转或者显示错误信息

function submit() { Ext.DomHelper.overwrite(document.getElementById("loading"), "<img src="/" mce_src="/""icon/loading.gif/"/>"); Ext.Ajax.request({url:"UserRegistry", params:{username:Ext.get("username").value, password:Ext.get("password").value}, callback:function (options, success, response) { Ext.DomHelper.overwrite(document.getElementById("loading"), ""); if (success) { var j = Ext.util.JSON.decode(response.responseText); var e = j["error"]; var s = j["success"]; if (e == undefined) { alert("/u6ce8/u518c/u6210/u529f/uff01"); window.location.href = "success.jsp"; } else { Ext.DomHelper.overwrite(document.getElementById("usernameE"), e); } } }}); }

 

 

别看效果挺简答，背后的工作可不少啊