在JSP中使用Ajax

前台

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>
<TITLE>留学生系统</TITLE>
<META http-equiv=Content-Type content="text/html; charset=GBK">
<SCRIPT language=JavaScript type=text/JavaScript>
var XMLHttpReq = false;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
try{
XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP");
}catch(e1){}
}
}
}
function sendRequest(url){
createXMLHttpRequest();
XMLHttpReq.open("GET",url,true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function processResponse(){
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
window.alert(res);
document.myform.userid.value="";
document.myform.pwd.value="";
}else{
window.alert("你请求的页面有异常1");
}
}
}
function userCheck(){
var userid = document.myform.userid.value;
var pwd = document.myform.pwd.value;
if(userid == ""){
window.alert("用户名不能为空");
document.myform.pwd.value="";
document.myform.userid.focus();
return false;
}else{
sendRequest("login?userid="+userid);
}
}

function pwdCheck(){
var pwd = document.myform.pwd.value;
var pwd2 = document.myform.pwd2.value;
if(pwd!=pwd2){
window.alert("密码不一致");
document.myform.pwd.value="";
document.myform.pwd2.value="";
document.myform.pwd.focus();
return false;
}
}

</SCRIPT>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</HEAD>

<body>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
<tr>
<td width="17%"><img src="images/logo.jpg" width="124" height="101"></td>
<td width="558" height="101" background="images/banner.jpg"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="558" height="101">
<param name="movie" value="images/2.swf">
<param name="quality" value="high">
<embed src="images/2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="558" height="101"></embed>
<param name="wmode" value="transparent">
</object>
</div></td>
<td width="11%"><table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="30" class="style1"><div align="center">设为首页</div></td>
</tr>
<tr>
<td height="30" class="style1"><div align="center">收藏本站</div></td>
</tr>
<tr>
<td height="30" class="style1"><div align="center">联系我们</div></td>
</tr>
</table></td>
</tr>
</table>
<form method="post" action="control.jsp?action=register" name="myform">
<table width="300" border="0" align="center" bgcolor="#F0F0F0">
<tr>
<td align="center">用户名</td>
<td><input name="userid" type="text" size="20" onblur="userCheck()"></td>
</tr>
<tr>
<td align="center">真实姓名</td>
<td><input name="username" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="sex" value="0" checked="checked">男&nbsp;
<input type="radio" name="sex" value="1">女&nbsp;
</td>
</tr>
<tr>
<td align="center">密码</td>
<td><input name="pwd" type="password" size="20"/></td>
</tr>
<tr>
<td align="center">密码确认</td>
<td><input name="pwd2" type="password" size="20" onblur="pwdCheck()"/></td>
</tr>
<tr>
<td align="center">电子邮箱</td>
<td><input name="email" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">学校</td>
<td><input name="school" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">电话号码</td>
<td><input name="phonenum" type="text" size="20"/></td>
</tr>
<tr>
<td align="center"><img border=0 src="image.jsp"></td>
<td><input type=text name=in maxlength=4 size="8"></td>
</tr>

<tr>
<td align="center"><input type="submit" value="确定" /></td>
</tr>
</table>
</form>
</body>
</html>


后台连接MySql数据库

DB.java

package com.common;

import java.sql.Connection;
import java.sql.SQLException;
import javax.naming.InitialContext;
import javax.sql.DataSource;

public class DBConfig
{
public static boolean inited = false;
public static DataSource ds = null;

public static void Init()
{
InitialContext localInitialContext;
try
{
localInitialContext = new InitialContext();
ds = (DataSource)localInitialContext.lookup("java:/comp/env/jdbc/saDB");
inited = true;
}
catch (Exception exception)
{
System.err.println("DBConfig (): " + exception.getMessage());
exception.printStackTrace();
}
}

public static Connection getConn()
{
if (!(inited))
Init();
try
{
return ds.getConnection();
}
catch (SQLException localSQLException)
{
System.err.println("getConn ():" + localSQLException.getMessage());
localSQLException.printStackTrace(System.err);
Init();
}
return null;
}
}


接受request和回应response

LoginAction.java

package com.common;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginAction extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
req.setCharacterEncoding("UTF-8");
String userid = req.getParameter("userid");
resp.setContentType("text/xml;charset=UTF-8");
resp.setHeader("Cache-Control", "no-cache");
PrintWriter out = resp.getWriter();
out.println("<response>");
DB db = new DB();
ResultSet rs;
String strSql = null;
strSql = "select * from users where user_id='" + userid + "';";
rs = db.executeQuery(strSql);
try{
if(rs.next()){
out.println("<res>" + "用户名已存在" + "</res>");
}else{
out.println("<res></res>");
}
}catch(SQLException e){
e.printStackTrace();
}
out.println("</response>");
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
@Override
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
}
}


注意编码最好是UTF-8,GBK会出错?(搞了一个晚上也没搞明白)



posted @ 2012-02-26 22:47    阅读(19444)  评论(0编辑  收藏  举报