Ajax一个简单入门程序（用户登录验证）
2009-03-02 16:28
746 查看
非常，非常，非常简单的入门程序。
呵呵，我这里不想贴那些艰深晦涩的东西，简单实用为上。方便遇到问题好来这里找答案。
一个登陆页面，使用一点前台验证的玩意。
一个后台控制程序，检查用户对不对。这里使用了mysql数据库，很简单的。
1。首先贴出来登陆页面吧
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script type="text/javascript" src="login.js"></script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
</body>
2。页面里调用了一个JavaScript文件，这个才是我主要想要贴出来的东西
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
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);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
3。发送请求到控制器，这里就是简单验证一下而已
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 {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法.
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
out.println("<response>");
//连接数据库进行身份验证
DB db = new DB();
ResultSet rs;
String strSql=null;
strSql = "select * from classuser where username='"
+ uname + "' and password='" + psw + "'";
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();
}
/*
* 处理<POST> 请求方法.
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
4。还定义了一个DB连接用的bean。代码也贴出来吧
package classmate;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DB {
Connection connect = null;
ResultSet rs = null;
public DB() {
try {
Class.forName("org.gjt.mm.mysql.Driver"); //设置驱动程序类型
}
catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
}
//执行查询语句的方法
public ResultSet executeQuery(String sql) {
try {
connect = DriverManager.getConnection("jdbc:mysql://localhost/test", "root", "admin"
4000
); //建立与数据库服务器的连接
Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
rs = stmt.executeQuery(sql);//执行指定的数据查询语句
}
catch(SQLException ex) {
ex.printStackTrace();
}
return rs;
}
//执行增、删改语句的方法
public int executeUpdate(String sql) {
int result = 0;
try {
connect = DriverManager.getConnection("jdbc:mysql://localhost/test", "root", "zgy01");
Statement stmt = connect.createStatement();
result = stmt.executeUpdate(sql);//执行指定的数据操作语句
}
catch(SQLException ex) {
System.err.println(ex.getMessage());
}
return result;
}
//关闭数据库连接的方法
public void close(){
if(connect!=null){
try{
connect.close();
connect = null;
}catch(SQLException ex) {
System.err.println(ex.getMessage());
}
}
}
}
5。基本上就这样结束了。最后把配置文件贴出来
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>ms1</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
6。连接mysql数据库的话，需要一个连接jar包。版本好像都是可以兼容的。
http://mysql.mirror.vmmatrix.net/Downloads/Connector-J/mysql-connector-java-5.0.3.zip
呵呵，我这里不想贴那些艰深晦涩的东西，简单实用为上。方便遇到问题好来这里找答案。
一个登陆页面，使用一点前台验证的玩意。
一个后台控制程序，检查用户对不对。这里使用了mysql数据库，很简单的。
1。首先贴出来登陆页面吧
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script type="text/javascript" src="login.js"></script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>
</body>
2。页面里调用了一个JavaScript文件，这个才是我主要想要贴出来的东西
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
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);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
3。发送请求到控制器，这里就是简单验证一下而已
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 {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法.
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
out.println("<response>");
//连接数据库进行身份验证
DB db = new DB();
ResultSet rs;
String strSql=null;
strSql = "select * from classuser where username='"
+ uname + "' and password='" + psw + "'";
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();
}
/*
* 处理<POST> 请求方法.
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
4。还定义了一个DB连接用的bean。代码也贴出来吧
package classmate;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DB {
Connection connect = null;
ResultSet rs = null;
public DB() {
try {
Class.forName("org.gjt.mm.mysql.Driver"); //设置驱动程序类型
}
catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
}
//执行查询语句的方法
public ResultSet executeQuery(String sql) {
try {
connect = DriverManager.getConnection("jdbc:mysql://localhost/test", "root", "admin"
4000
); //建立与数据库服务器的连接
Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
rs = stmt.executeQuery(sql);//执行指定的数据查询语句
}
catch(SQLException ex) {
ex.printStackTrace();
}
return rs;
}
//执行增、删改语句的方法
public int executeUpdate(String sql) {
int result = 0;
try {
connect = DriverManager.getConnection("jdbc:mysql://localhost/test", "root", "zgy01");
Statement stmt = connect.createStatement();
result = stmt.executeUpdate(sql);//执行指定的数据操作语句
}
catch(SQLException ex) {
System.err.println(ex.getMessage());
}
return result;
}
//关闭数据库连接的方法
public void close(){
if(connect!=null){
try{
connect.close();
connect = null;
}catch(SQLException ex) {
System.err.println(ex.getMessage());
}
}
}
}
5。基本上就这样结束了。最后把配置文件贴出来
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>ms1</servlet-name>
<servlet-class>classmate.LoginAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>
6。连接mysql数据库的话，需要一个连接jar包。版本好像都是可以兼容的。
http://mysql.mirror.vmmatrix.net/Downloads/Connector-J/mysql-connector-java-5.0.3.zip
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个很好的ajax入门小实例，用户登录验证
- struts1的运行原理，我们以一个简单的用户登录验证为例
- 一个简单的注册登录页面（包括阿里大于的手机验证）html+JS+AJAX+PHP
- EOS非Portal模式下，如何开发一个用户登录验证程序，用户只有在登录验证通过后，方可访问系统。
- Perl CGI 一个简单的用户登录验证应用
- 利用AJAX实现简单的用户登录程序（处理服务端返回的文本数据）
- ajax简单的后台用户登录验证
- python学习之最简单的用户注册及登录验证小程序
- 利用Xpath实现一个简单的登录验证程序
- 一个汇编小程序：用户登录验证程序
- 简单实现ajax验证用户是否可以登录
- 使用structs2.0开发一个简单的用户登录程序
- 一个简单的采用SPRING框架的登录及验证程序
- WPF入门（五）：简单绑定 - 用户输入合法性验证
- thinkphp3.2用户登录ajax提交验证
- 新手教你学Spring MVC4.0+MyBatis+MySQL5.0实现简单用户注册登录程序（一）
- 分享一个用Xcode4实现基于Webservice用户登录的iphone程序
- SSM框架---二手教材交易系统之用户登录（包括表单提前验证,ajax）
- 一个简单的Ajax登录例子
- [置顶] Java+Eclipse+Maven+struts2从MySQL数据库中查询用户密码实现简单的登录验证