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}