迷失的风

就这样活着
随笔 - 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">
<p 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 迷失的风 阅读(134) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。
网站导航: