基于ajax的简单的登录验证

来源：互联网发布：北京婚纱照价位知乎编辑：程序博客网时间：2024/04/30 02:20

Ajax是多种技术的集合(Asynchronous JavaScript and XML)

1.JavaScript负责操作XMlHttpRequest对象来跟数据库打交道

2.DOM(文档对象模型)负责数据的动态显示和交互

3.XML(可扩展标识语言)负责数据的交换和处理

4.XMLHttpRequest负责数据的异步读取

5.XHTML(可扩展超文本标记语言)和CSS(层叠样式表)编写结构化的web页面

6.json

   优点
   1.无刷新请求处理数据。
   缺点
1.要求IE5.0,Mozilla1.0,NetScape7以上。
2.对流媒体和PDA之类的支持不是很好。

Ajax的一般流程(Request/Server模式)
对象初始化--->发送请求--->服务器接受--->服务器响应并返回--->客户端接受--->修改客户端页面内容

首先写一个JSP页面（里面包含JS代码），如下：

Code:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title> 登录页面 </title>
<link rel=stylesheet href="css/login.css" type="text/css">
<script type="text/javascript">
//声明一个全局的XMLHttpRequest对象
var xmlhttp_request;
//声明一个标签
var message;
function check(){
var username=document.getElementById("usernameID").value;
message=document.getElementById("message");
message.innerHTML="正在检测用户名.....";
try{ 　
//用于获取支持IE浏览器的XMLHttpRequest对象
if(window.ActiveXObject){ 　　
for( var i = 5;i; i-- ){ 　　
try{ 　　
if( i == 2 ){ 　　
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");//大于5.0
//
alert("1:"+xmlhttp_request.readyState);
}
else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );////3.0或4.0, 5.0
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Charset","gb2312");
} 　　
break;
}catch(e){
xmlhttp_request = false;
}
}
}
else if(window.XMLHttpRequest)//非IE浏览器Mozilla﹑Netscape﹑Safari等浏览器
{
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType){
xmlhttp_request.overrideMimeType('text/xml');
}
}
}
catch(e){
xmlhttp_request = false;
}
//打开一个连接
alert("2:"+xmlhttp_request.readyState);
alert(username);
//xmlhttp_request.open("get","http://localhost:8080/ajax/check?name="+username,true);
xmlhttp_request.open("post","http://localhost:8080/ajax/check",true);
//POST请求要设置请求头
xmlhttp_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定处理服务器端相应的函数
alert("3:"+xmlhttp_request.readyState);
xmlhttp_request.onreadystatechange=handle;
//get发送请求
//xmlhttp_request.send(null);
//post发送请求
xmlhttp_request.send("name="+username);
}
function handle(){
alert("4:"+xmlhttp_request.readyState);
if(xmlhttp_request.readyState==4){
alert(xmlhttp_request.status);
if(xmlhttp_request.status==200){
var result=xmlhttp_request.responseText;
alert(result);
message.innerHTML=result;
alert("5:"+xmlhttp_request.readyState);
}
}
}
</script>
</head>
<body>
<h1 align="center">用户登录页面</h1>
<hr color="blue">
<div align="center">
<form action="login.do" method="post">
<table cellspacing=5 border=5 bodercolor=#ffaa00 >
<tr><th colspan="3" align="center" bgcolor=#ffaa00>用户登录</th></tr>
<tr>
<th rowspan="3" background="images/2.jpg" style="width=90px"></th>
<td>用户名：</td><td><input id="usernameID" type="text" class="message" name="username" onBlur="check()"><label id="message"></label></td></tr>
<tr><td>密码：</td><td><input id="userpasswordID" class="message" type="password" name="userpassword" ></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="注册"> <input type="reset" value="重置"></td></tr>
</table>
</form>
</div>
</body>
</html>

本页面中的重点就是js代码中的xmlhttp_request对象，它是XMLHTTP组件的对象，XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。

接下来我们写一个写一个serlet来处理xmlhttp_request对象发送过来的数据，当前例子传送的数据为username的值，如下：

Code:

package myclass.serlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Check extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//输出流
PrintWriter out=null;
out=response.getWriter();
String name=request.getParameter("name");
System.out.print(name);
if("liping".equals(name)){
out.println("sorry,user name:"+name+" has existed");
}else{
out.println("congratulation,user name: "+name+" can use");
}
out.flush();
out.close();
}
}

servlet中使用printwriter输出流来向客户端返回处理结果，前面JS中使用function handle()函数来处理，这样就实现了AJAX局部刷新。用户在填写用户名后，光标一离开，就产生一个onchange()事件，用户名的值就立刻通过xmlhttp_request对象对值传到servlet中进行验证，验证后马上把信息返回，显示到页面，实现了局部刷新的效果。

这就是AJAX。