今天张老师讲了简单使用ajax的用户注册校验,要实现一下的一些功能:要有用户名是否为空的校验。有确认密码与密码的匹配校验。
package com.ajax.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class RegUserUIAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
// TODO Auto-generated method stub
String userName = request.getParameter("username");
if(userName != null){
String msg = "恭喜您,用户未被注册!";
if("hhl".equals(userName)){
msg = "很遗憾,用户名 已被注册";
}
request.setAttribute("msg", msg);
}
return mapping.findForward("logon");
}
}
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<title>logon.jsp</title>
<script type="text/javascript">
function verifyUserName(userName)
{
var url = '<html:rewrite action="/RegUserUI"/>' + '?username=' + userName;
window.location.href = url;
}
</script>
</head>
<body>
<form method="post">
用户名:<input type="text" id="username" name="username" value="${param.username }"/><a href="javascript:verifyUserName(document.getElementByIdx('username').value);void(0)">校验是否重名</a><br>
<div>${msg}</div>
密码 : <input type="password" name="password"><br>
确认密码:<input type="password" name="password" /><br>
<input type="submit" name="password" value="注册" />
</form>
</body>
</html:html>
struts-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
<data-sources />
<form-beans />
<global-exceptions />
<global-forwards />
<action-mappings >
<action
path="/RegUserUI"
type="com.ajax.action.RegUserUIAction"
validate="false">
<forward name="logon" path="/WEB-INF/jsp/logon.jsp" />
</action>
</action-mappings>
<message-resources parameter="com.ajax.ApplicationResources" />
</struts-config>
上面的一段是javascript的校验,并没有用到AJAX,内容还算是比较简单的!
下面这段用到了AJAX,张老师是用的prototype框架,现在比如像sina的邮箱网页就是用的这个框架的!
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<title>logon.jsp</title>
<script type="text/javascript" src="${pageCotext.request.contextPath}/js/prototype.js"></script>
<script type="text/javascript">
function verifyUserName2(userName)
{
new Ajax.Updater('result',
'<html:rewrite action="/RegUserUI"/>',
{
parameters: { username: $('username').value }
});
}
注:上面的function是在prototype文档里面查的。直接copy过来修改下的。在ajax.update的里面的。通过跟着张老师的学习
渐渐的开始有了查找文档的习惯。
function verifyUserName(userName)
{
var url = '<html:rewrite action="/RegUserUI"/>' + '?username=' + userName;
//window.location.href = url;
var xhr = createXHR();
xhr.onreadystatechange = function(){
//alert(xhr.responseText);
//alert(xhr.readyState);
if(xhr.readyState == 4 && xhr.status == 200)
{
document.getElementByIdx("result").innerHTML = xhr.responseText;
}
};
xhr.open('GET',url,true);
xhr.send();
}
这下面的一段function是判断是否支持浏览器版本的!
function createXHR(){
var xmlhttp = null;
if(window.XMLHttpRequest){
this.xmlhttp = new XMLHttpRequest();
if(window.overrideMineType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
var microsoft = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<microsoft.length; i++){
try{
xmlhttp = new ActiveXObject(microsoft[i]);
break;
}catch(e){
}
}
}else{
alert("Can't Create XMLHttpRequest Object");
}
return xmlhttp;
}
</script>
</head>
<body>
<form method="post">
用户名:<input type="text" id="username" οnblur="verifyUserName2(this.value)" name="username" value="${param.username }"/><a href="javascript:verifyUserName(document.getElementByIdx('username').value);void(0)">校验是否重名</a><br>
<div id="result">${msg}</div>
密码 : <input type="password" name="password"><br>
确认密码:<input type="password" name="password" /><br>
<input type="submit" name="password" value="注册" />
</form>
</body>
</html:html>
package com.ajax.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class RegUserUIAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
// TODO Auto-generated method stub
String userName = request.getParameter("username");
if(userName != null){
String msg = "恭喜您,用户未被注册!";
if("hhl".equals(userName)){
msg = "很遗憾,用户名 已被注册";
}
//request.setAttribute("msg", msg);
response.setContentType("text/plain;charset=UTF-8");
try {
response.getWriter().print(msg);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
return mapping.findForward("logon");
}
}
使用AJXA和js最后得到的是一样的结果的!当然现在主流的ajax框架还有jquery。只要会了一种,其他的都可以触类旁通的!