主要原理是OnBlur来触发startRequest事件，再由一个span的层来显示查询结果
AjaxTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script language="JavaScript">
function mycheck(){
if(form1.name.value==""){
alert("组名不能为空！！");
form1.name.focus();
return false;
}
if(form1.slogan.value==""){
alert("口号不能为空！！");
form1.slogan.focus();
return false;
}
if(form1.leader.value==""){
alert("组长不能为空！！");
form1.leader.focus();
return false;
}
}
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","servlet/NameCheck?name="+form1.name.value,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("nameCheck").innerHTML=xmlHttp.responseText;
}
}
}
</script>
<title>增加小组</title>
</head>
<body bgcolor="CCFFFF" οnlοad="form1.name.focus();">
<h1 align="center">增加小组</h1>
<form name="form1" action="servlet/addteam1" method="post" οnsubmit="return mycheck()">
<p>组名：<input type="text" name="name" onBlur="startRequest()"><span id="nameCheck"></span>
<p>口号：<input type="text" name="slogan">
<p>组长：<input type="text" name="leader">
<p><input type="submit" value="确定">
<input type="reset" value="重填">
</form>
<a href="index.html">返回首页</a>
</body>
</html>
NameCheck.java
package servlet;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import bean.Team;
import business.TeamBusiness;
public class NameCheck extends HttpServlet{
public void doPost(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException{
String name=request.getParameter("name");
//用来转换中文字符的
String name1=new String(name.getBytes("ISO-8859-1"),"GBK");
response.setContentType("text/html;charset=GBK");
PrintWriter pw=response.getWriter();
Team team=null;
TeamBusiness tb=new TeamBusiness();
try{
team=tb.getTeamByName(name1);
}catch(Exception e){
e.printStackTrace();
}
if(team!=null){
pw.println(" <img src=\"smallFail.gif\" width=15 height=15 align=\"bottom\"><font color='red'> 组名已存在</font>");
}else{
pw.println(" <img src=\"smallSuccess.gif\" width=15 height=15 align=\"bottom\"><font color='green'>恭喜,用户名可以使用</font>");
}
}
public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException{
this.doPost(request, response);
}
}
关键词：span ajax startRequest onready handlestate
2126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
