強(qiáng)烈推薦-ajax開發(fā)者必看的文章第1/3頁

XMLHttpRequest對(duì)象初始化：
script language=”javascript”>
var http_request = false;
//IE瀏覽器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla瀏覽器
http_request = new XMLHttpRequest();
/script>

　　XMLHttpRequest對(duì)象的屬性：

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

　　有些版本的Mozilla瀏覽器處理服務(wù)器返回的未包含XML mime-type頭部信息的內(nèi)容時(shí)會(huì)出錯(cuò)。因此，要確保返回的內(nèi)容包含text/xml信息。

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

http_request.onreadystatechange = processRequest;

　　需要指出的時(shí)，這個(gè)函數(shù)名稱不加括號(hào)，不指定參數(shù)。也可以用Javascript即時(shí)定義函數(shù)的方式定義響應(yīng)函數(shù)。比如：

http_request.onreadystatechange = function() { };

　　指定響應(yīng)處理函數(shù)之后，就可以向服務(wù)器發(fā)出HTTP請(qǐng)求了。這一步調(diào)用XMLHttpRequest對(duì)象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

　　open的第一個(gè)參數(shù)是HTTP請(qǐng)求的方法，為Get、Post或者Head。

　　open的第二個(gè)參數(shù)是目標(biāo)URL?；诎踩紤]，這個(gè)URL只能是同網(wǎng)域的，否則會(huì)提示“沒有權(quán)限”的錯(cuò)誤。這個(gè)URL可以是任何的URL，包括需要服務(wù)器解釋執(zhí)行的頁面，不僅僅是靜態(tài)頁面。目標(biāo)URL處理請(qǐng)求XMLHttpRequest請(qǐng)求則跟處理普通的HTTP請(qǐng)求一樣，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL參數(shù)值。

　　open的第三個(gè)參數(shù)只是指定在等待服務(wù)器返回信息的時(shí)間內(nèi)是否繼續(xù)執(zhí)行下面的代碼。如果為True，則不會(huì)繼續(xù)執(zhí)行，直到服務(wù)器返回信息。默認(rèn)為True。

　　按照順序，open調(diào)用完畢之后要調(diào)用send方法。send的參數(shù)如果是以Post方式發(fā)出的話，可以是任何想傳給服務(wù)器的內(nèi)容。不過，跟form一樣，如果要傳文件或者Post內(nèi)容給服務(wù)器，必須先調(diào)用setRequestHeader方法，修改MIME類別。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

　　這時(shí)資料則以查詢字符串的形式列出，作為sned的參數(shù)，例如：

name=valueanothername=othervalueso=on

　　首先，它要檢查XMLHttpRequest對(duì)象的readyState值，判斷請(qǐng)求目前的狀態(tài)。參照前文的屬性表可以知道，readyState值為4的時(shí)候，代表服務(wù)器已經(jīng)傳回所有的信息，可以開始處理信息并更新頁面內(nèi)容了。如下：

if (http_request.readyState == 4) {
// 信息已經(jīng)返回，可以開始處理
} else {
// 信息還沒有返回，等待
}

　　服務(wù)器返回信息后，還需要判斷返回的HTTP狀態(tài)碼，確定返回的頁面沒有錯(cuò)誤。所有的狀態(tài)碼都可以在W3C的官方網(wǎng)站上查到。其中，200代表頁面正常。

if (http_request.status == 200) {
// 頁面正常，可以開始處理信息
} else {
// 頁面有問題
}

　　XMLHttpRequest對(duì)成功返回的信息有兩種處理方式：
　　 responseText：將傳回的信息當(dāng)字符串使用；
　　 responseXML：將傳回的信息當(dāng)XML文檔使用，可以用DOM處理。

script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數(shù)、發(fā)送請(qǐng)求的函數(shù)
http_request = false;
//開始初始化XMLHttpRequest對(duì)象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設(shè)置MiME類別
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)成功返回，開始處理信息
alert(http_request.responseText);
} else { //頁面不正常
alert("您所請(qǐng)求的頁面有異常。");
}
}
}
/script>

　　在body>/body>之間增加一段form表單代碼：

form name="form1" action="" method="post">

用戶名：input type="text" name="username" value="">nbsp;

input type="button" name="check" value="唯一性檢查" onClick="userCheck()">

input type="submit" name="submit" value="提交">

/form>

　　在開發(fā)框架的基礎(chǔ)上再增加一個(gè)調(diào)用函數(shù)：

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);
}
}

　　看看sample1_2.jsp做了什么：

%@ page contentType="text/html; charset=gb2312" errorPage="" %>
%
String username = request.getParameter("username");
if("educhina".equals(username)) out.print("用戶名已經(jīng)被注冊(cè)，請(qǐng)更換一個(gè)用戶名。");
else out.print("用戶名尚未被使用，您可以繼續(xù)。");
%>

　　運(yùn)行一下，嗯，沒有彈出窗口，沒有頁面刷新，跟預(yù)想的效果一樣。如果需要的話，可以在sample1_2.jsp中實(shí)現(xiàn)更復(fù)雜的功能。最后，只要將反饋信息打印出來就可以了。

　　首先，在body>/body>中間增加如下HTML代碼：

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')">開發(fā)部/a>
/td>
/tr>
tr style="display:none ">
td id="pos_2" height="20"> /td>
/tr>
/table>

　　在框架的基礎(chǔ)上增加一個(gè)響應(yīng)函數(shù)showRoles(obj)：

//顯示部門下的崗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在讀取數(shù)據(jù)..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}

　　修改框架的processRequest函數(shù)：

// 處理返回信息的函數(shù)
function processRequest() {
if (http_request.readyState == 4) { // 判斷對(duì)象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開始處理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //頁面不正常
alert("您所請(qǐng)求的頁面有異常。");
}
}
}

　　最后就是smaple2_2.jsp了：

%@ page contentType="text/html; charset=gb2312" errorPage="" %>
%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("nbsp;nbsp;總經(jīng)理br>nbsp;nbsp;副總經(jīng)理");
else if("pos_2".equals(playPos))
out.println("nbsp;nbsp;總工程師br>nbsp;nbsp;軟件工程師");
%>

　　運(yùn)行一下看看效果：