原文：http://m.tkk7.com/eamoi/archive/2005/11/01/17639.html
有網(wǎng)友反映說(shuō)《AJAX開(kāi)發(fā)簡(jiǎn)略》配文代碼不全。其實(shí)應(yīng)該是全的，只是要把包括框架和兩個(gè)示例的程序都整合起來(lái)看。這里把全部的代碼貼出來(lái)，需要的朋友可以看看。
sample1_1.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無(wú)標(biāo)題文檔</title>
<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數(shù)、發(fā)送請(qǐng)求的函數(shù)
http_request = false;
//開(kāi)始初始化XMLHttpRequest對(duì)象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設(shè)置MiME類(lèi)別
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常，創(chuàng)建對(duì)象實(shí)例失敗
window.alert("不能創(chuàng)建XMLHttpRequest對(duì)象實(shí)例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發(fā)送請(qǐng)求的方式和URL以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對(duì)象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開(kāi)始處理信息
alert(http_request.responseText);
} else { //頁(yè)面不正常
alert("您所請(qǐng)求的頁(yè)面有異常。");
}
}
}
function userCheck() {
var f = document.form1;
var username = f.username.value;
if(username=="") {
window.alert("用戶名不能為空。");
f.username.focus();
return false;
}
else {
send_request('sample1_2.jsp?username='+username);
}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="form1" action="" method="post">
用戶名：<input type="text" name="username" value="">
<input type="button" name="check" value="唯一性檢查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
<!--span
style="cursor: pointer; text-decoration: underline"
onclick="send_request('2.jsp?username=educhina')">Send a
request</span-->
</body>
</html>
sample1_2.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos)) out.print("用戶名已經(jīng)被注冊(cè)，請(qǐng)更換一個(gè)用戶名。");
else out.print("用戶名尚未被使用，您可以繼續(xù)。");
%>
sample2_1.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無(wú)標(biāo)題文檔</title>
<script language="javascript">
var http_request = false;
var currentPos = null;
function send_request(url) {//初始化、指定處理函數(shù)、發(fā)送請(qǐng)求的函數(shù)
http_request = false;
//開(kāi)始初始化XMLHttpRequest對(duì)象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設(shè)置MiME類(lèi)別
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常，創(chuàng)建對(duì)象實(shí)例失敗
window.alert("不能創(chuàng)建XMLHttpRequest對(duì)象實(shí)例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發(fā)送請(qǐng)求的方式和URL以及是否同步執(zhí)行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對(duì)象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開(kāi)始處理信息
//alert(http_request.responseText);
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //頁(yè)面不正常
alert("您所請(qǐng)求的頁(yè)面有異常。");
}
}
}
//顯示部門(mén)下的崗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在讀取數(shù)據(jù)..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20"><a href="javascript:void(0)"
onClick="showRoles('pos_1')">經(jīng)理室</a></td>
</tr>
<tr style="display:none">
<td height="20" id="pos_1"> </td>
</tr>
<tr>
<td height="20"><a href="javascript:void(0)"
onClick="showRoles('pos_2')">開(kāi)發(fā)部</a></td>
</tr>
<tr style="display:none ">
<td id="pos_2" height="20"> </td>
</tr>
</table>
<!--a href="javascript:void(0)" onClick="showRoles('pos_1')">測(cè)試</a-->
<!--span
style="cursor: pointer; text-decoration: underline"
onclick="send_request('2.jsp?username=educhina')">Send a
request</span-->
</body>
</html>
sample2_2.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos)) out.print(" 總經(jīng)理<br> 副總經(jīng)理");
else if("pos_2".equals(playPos)) out.println(" 總工程師<br> 軟件工程師");
%>