jsp頁(yè)面代碼如下：
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.創(chuàng)建XMLHttpRequest對(duì)象
15 if(window.XMLHttpRequest){
16 //IE7,IE8,Firefox,Mozilla,Safari,Opera支持這種直接的創(chuàng)建方式
17 xhr = new XMLHttpRequest();
18 //如果服務(wù)器端發(fā)送過(guò)來(lái)的數(shù)據(jù)沒(méi)有MimeType頭的話，瀏覽器可能無(wú)法正常工作
19 //所以要加上如下代碼
20 if(xhr.overrideMineType){
21 xhr.overrideMineType("text/xml")
22
}
23 }else if(window.ActiveXObject){
24 //IE6,IE5.5,IE5由于這些版本在創(chuàng)建XMLHttpRequest時(shí)所用控件不同，所以采用如下方式
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]);//如果不能創(chuàng)建它會(huì)拋出一個(gè)異常
30 break;//如果創(chuàng)建成功，則跳出循環(huán)
31 }catch(e){}
32 }
33 }
34 if(xhr == undefined || xhr == null){
35 alert("當(dāng)前瀏覽器不支持創(chuàng)建XMLHttpRequest對(duì)象");
36 return;
37 }
38
39 // 2.注冊(cè)回調(diào)函數(shù)
40 xhr.onreadystatechange = callback; //注意這個(gè)回調(diào)函數(shù)名不能加括號(hào)
41
42 //3.設(shè)置與服務(wù)器進(jìn)行交互的一些參數(shù)
43 /**//*
44 //采用GET方式與服務(wù)端交互
45 xhr.open("GET","login.do?username="+username.value+"&password="+password.value,true)
46 //4.設(shè)置向服務(wù)器端發(fā)送的數(shù)據(jù)，啟動(dòng)與服務(wù)器的交互
47 xhr.send(null);
48 */
49 //采用POST方式與服務(wù)端交互
50 xhr.open("POST","login.do",true)
51 //采用POST方式需要增加如下設(shè)置
52 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
53 //4.設(shè)置向服務(wù)器端發(fā)送的數(shù)據(jù)，啟動(dòng)與服務(wù)器的交互
54 xhr.send("username="+username.value+"&password="+password.value);
55
56 }
57
58 function callback(){
59 //5.判斷與服務(wù)器端的交互是否完成，還要判斷服務(wù)器端是否正確返回了數(shù)據(jù)
60 if(xhr.readyState==4){//表示交互已完成
61 if(xhr.status==200){//表示正確返回了數(shù)據(jù)
62 //純文本數(shù)據(jù)的接受方法
63 var msg = xhr.responseText;
64 var tt = document.getElementById("message");
65 tt.innerHTML=msg;
66 /**//*
67 //XML數(shù)據(jù)對(duì)應(yīng)的DOM對(duì)象的接受方法
68 注意它的使用前提是，服務(wù)器端需要設(shè)置content-type為text/xml
69 var domXml = xhr.responseXML;
70 //得到這個(gè)Dom之后，得判別返回的XML數(shù)據(jù)的正確性
71 var rootElement = domXml.documentElement;
72 if(rootElement == null || rootElement.nodeName != ""){
73
74 }else{
75 //數(shù)據(jù)正確返回時(shí)的代碼處理
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>
與之相關(guān)的服務(wù)器代碼如下，關(guān)于這個(gè)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}