迷失的风

就这样活着
随笔 - 1, 文章 - 1, 评论 - 1, 引用 - 0
数据加载中……

Ajax做的小例子

学习Ajax好多天了,终于做出一个小例子。
环境
eclipse3.2
tomcat6.0
jdk1.5
下面简单介绍下关于Ajax的主要实现部分

index.jsp
<%@ page contentType="text/html; charset=gb2312" language="java"
import
="java.sql.*" errorPage=""
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用户注册</title>
<style type="text/css">
<!--
.STYLE1 
{
font-family
: "新宋体";
font-size
: 18px;
font-weight
: bold;
}

-->
</style>
<script src="prototype.js" type="text/javascript"></script>
<script src="validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style_min.css"/>
<script language="JavaScript" type="text/javascript">
    
var request = false;
    
try{
     request 
= new XMLHttpRequest();
    }
catch(microsoftIE){
     
try{
      request 
= new ActiveXObject("Msxml2.XMLHTTP");
     }
catch(microsoftOldIE){
      
try{
       request 
= new ActiveXObject("Microsoft.XMLHTTP");
      }
catch(failed){
       request 
= false;
      }

     }

    }

    
if(!request){
     alert(
"初始化XMLHttpRequest对象失败");
    }

    
function sendUsername(){
     
var username = document.getElementById("username").value;
     
if(username!=null && username!=""){
      
var url = "/MeetingAction.do?mode=isexist&username="+escape(username);
      request.open(
"get",url,true);
      request.onreadystatechange
=updatepage;
      request.send(
null);
     }

    }

    
function updatepage(){
     
if(request.readyState==4){
      
if(request.status==200){
       document.getElementById(
"reusername").innerHTML = request.responseText;
       
//document.getDocumentById("reusername").innerText = request.responseText;
      }
else if(request.status==404){
       alert(
"找不到页面!");
      }
else{
       alert(
"错误代码:"+request.status);
      }

     }

    }

    
function clearMessage(){
     document.getElementById(
"reusername").innerHTML = "";
    }

    
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="/MeetingAction.do?mode=insertuser">
<div align="center">
<class="STYLE1">新用户注册</p>
<table width="339" height="197" border="1" bgcolor="#FFCCFF">
<tr>
  
<td>用户名  <input type="text" name="username"
   onblur
="sendUsername()" onfocus="clearMessage()" /></td>
  
<td width="40%" id="reusername"></td>
</tr>
<tr>
  
<td>密 码  <input type="password" class='required equals-$otherInputId' name="password1" /> </td>
</tr>
<tr>
  
<td>确 认  <input type="password" class='required equals-$otherInputId' name="password2" /> </td>
</tr>
<tr>
  
<td height="34">邮 箱 <input type="text" class='required validate-email'
   name
="email" /></td>
</tr>
<tr>
  
<td>
  
<div align="center"><input type="submit" name="Submit"
   value
="提交" /></div>
  
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

在index.jsp中  var url = "/MeetingAction.do?mode=isexist&username="+escape(username);
这个请求URL是查询用户输入的用户名在数据库里面是否存在;
在action里面这样
String username = request.getParameter("username");//从index.jsp里面得到用户输入的用户名
   Boolean exist = this.getIMeetingService().isExist(username);//执行SQL语句
   request.setAttribute("exist", exist);

SQL语句为select count(*) from userinf where username in(?)

exist.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="style_min.css"/>
<%
Boolean exist = (Boolean)request.getAttribute("exist");
//System.out.println("username:"+username);
if(exist){
  out.println(
"<font color='red'>用户名已经注册</font>");
}
else{
  out.println(
"<font color='green'>用户名可以用</font>");
}
%>


通过action处理后返回到exist.jsp来展现具体内容。

posted on 2008-03-20 09:12 迷失的风 阅读(133) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: