jsp页面代码如下：
1
<%
@ page language="java" contentType="text/html; charset=ISO-8859-1"
2
pageEncoding="gbk"%>
3
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4<html>
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
7<title>login jsp</title>
8<script type="text/javascript">
9
var xhr;
10
function submit(){
11 var username = document.getElementById("username");
12 var password = document.getElementById("password");
13
14 //1.创建XMLHttpRequest对象
15 if(window.XMLHttpRequest){
16 //IE7,IE8,Firefox,Mozilla,Safari,Opera支持这种直接的创建方式
17 xhr = new XMLHttpRequest();
18 //如果服务器端发送过来的数据没有MimeType头的话，浏览器可能无法正常工作
19 //所以要加上如下代码
20 if(xhr.overrideMineType){
21 xhr.overrideMineType("text/xml")
22
}
23 }else if(window.ActiveXObject){
24 //IE6,IE5.5,IE5由于这些版本在创建XMLHttpRequest时所用控件不同，所以采用如下方式
25 var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0",
26 "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
27 for(var i=0;i<activexName.length;i++){
28 try{
29 xhr = new ActiveXObject(activexName[i]);//如果不能创建它会抛出一个异常
30 break;//如果创建成功，则跳出循环
31 }catch(e){}
32 }
33 }
34 if(xhr == undefined || xhr == null){
35 alert("当前浏览器不支持创建XMLHttpRequest对象");
36 return;
37 }
38
39 // 2.注册回调函数
40 xhr.onreadystatechange = callback; //注意这个回调函数名不能加括号
41
42 //3.设置与服务器进行交互的一些参数
43 /**//*
44 //采用GET方式与服务端交互
45 xhr.open("GET","login.do?username="+username.value+"&password="+password.value,true)
46 //4.设置向服务器端发送的数据，启动与服务器的交互
47 xhr.send(null);
48 */
49 //采用POST方式与服务端交互
50 xhr.open("POST","login.do",true)
51 //采用POST方式需要增加如下设置
52 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
53 //4.设置向服务器端发送的数据，启动与服务器的交互
54 xhr.send("username="+username.value+"&password="+password.value);
55
56 }
57
58 function callback(){
59 //5.判断与服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
60 if(xhr.readyState==4){//表示交互已完成
61 if(xhr.status==200){//表示正确返回了数据
62 //纯文本数据的接受方法
63 var msg = xhr.responseText;
64 var tt = document.getElementById("message");
65 tt.innerHTML=msg;
66 /**//*
67 //XML数据对应的DOM对象的接受方法
68 注意它的使用前提是，服务器端需要设置content-type为text/xml
69 var domXml = xhr.responseXML;
70 //得到这个Dom之后，得判别返回的XML数据的正确性
71 var rootElement = domXml.documentElement;
72 if(rootElement == null || rootElement.nodeName != ""){
73
74 }else{
75 //数据正确返回时的代码处理
76 }
77 */
78 }
79 }
80 }
81</script>
82</head>
83<body>
84 username:<input type="text" id="username" /><br/>
85 password:<input type="password" id="password" /><br/>
86 <input type="button" value="submit" onclick="submit()" />
87 <div id="message"></div>
88</body>
89</html>
与之相关的服务器代码如下，关于这个Servelet类的配置在此省略。
1package per.ajax.web;
2
3import java.io.IOException;
4import java.io.PrintWriter;
5
6import javax.servlet.ServletException;
7import javax.servlet.http.HttpServlet;
8import javax.servlet.http.HttpServletRequest;
9import javax.servlet.http.HttpServletResponse;
10
11public class LoginServlet extends HttpServlet {
12
13 @Override
14 public void service(HttpServletRequest request, HttpServletResponse response)
15 throws ServletException, IOException {
16 String username = request.getParameter("username");
17 String password = request.getParameter("password");
18 if(!"jone".equals(username)||!"jone".equals(password)){
19 response.setContentType("text/html; charset=ISO-8859-1");
20 PrintWriter pw = response.getWriter();
21 pw.print("<font color='red'>username or password is error!</font>");
22 }
23 }
24}