| 方法 | 描述 |
| abort() |
停止當前請求 |
| getAllResponseHeaders() |
作為字符串返回完整的headers |
| getResponseHeader("headerLabel") |
作為字符串返回單個的header標簽 |
| open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) | 設置未決的請求的目標 URL，方法，和其他參數 |
| send(content) | 發送請求 |
| setRequestHeader("label", "value") | 設置header并和請求一起發送 |
XMLHttpRequest對象的屬性：
| 屬性 | 描述 |
| onreadystatechange | 狀態改變的事件觸發器 |
| readyState | 對象狀態(integer):
0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成 |
| responseText | 服務器進程返回數據的文本版本 |
| responseXML | 服務器進程返回數據的兼容DOM的XML文檔對象 |
| status | 服務器返回的狀態碼, 如：404 = "文件未找到" 、200 ="成功" |
| statusText | 服務器返回的狀態文本信息 |
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
有些版本的Mozilla瀏覽器處理服務器返回的未包含XML mime-type頭部信息的內容時會出錯。因此，要確保返回的內容包含text/xml信息。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');B、指定響應處理函數
http_request.onreadystatechange = processRequest;
需要指出的時，這個函數名稱不加括號，不指定參數。也可以用Javascript即時定義函數的方式定義響應函數。比如：
http_request.onreadystatechange = function() { };
C、發出HTTP請求指定響應處理函數之后，就可以向服務器發出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);
open的第一個參數是HTTP請求的方法，為Get、Post或者Head。
open的第二個參數是目標URL。基于安全考慮，這個URL只能是同網域的，否則會提示“沒有權限”的錯誤。這個URL可以是任何的URL，包括需要服務器解釋執行的頁面，不僅僅是靜態頁面。目標URL處理請求XMLHttpRequest請求則跟處理普通的HTTP請求一樣，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)來取得URL參數值。
open的第三個參數只是指定在等待服務器返回信息的時間內是否繼續執行下面的代碼。如果為True，則不會繼續執行，直到服務器返回信息。默認為True。
按照順序，open調用完畢之后要調用send方法。send的參數如果是以Post方式發出的話，可以是任何想傳給服務器的內容。不過，跟form一樣，如果要傳文件或者Post內容給服務器，必須先調用setRequestHeader方法，修改MIME類別。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
這時資料則以查詢字符串的形式列出，作為sned的參數，例如：
name=valueanothername=othervalueso=onD、處理服務器返回的信息
首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態。參照前文的屬性表可以知道，readyState值為4的時候，代表服務器已經傳回所有的信息，可以開始處理信息并更新頁面內容了。如下：
if (http_request.readyState == 4) {
// 信息已經返回，可以開始處理
} else {
// 信息還沒有返回，等待
}
服務器返回信息后，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。
if (http_request.status == 200) {
// 頁面正常，可以開始處理信息
} else {
// 頁面有問題
}
XMLHttpRequest對成功返回的信息有兩種處理方式：
responseText：將傳回的信息當字符串使用；
responseXML：將傳回的信息當XML文檔使用，可以用DOM處理。
script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定處理函數、發送請求的函數
http_request = false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設置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) { // 異常，創建對象實例失敗
window.alert("不能創建XMLHttpRequest對象實例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 確定發送請求的方式和URL以及是否同步執行下段代碼
http_request.open("GET", url, true);
http_request.send(null);
}
// 處理返回信息的函數
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態
if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
alert(http_request.responseText);
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
/script>7.3、簡單的示例在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>
在開發框架的基礎上再增加一個調用函數：
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("用戶名已經被注冊，請更換一個用戶名。");
else out.print("用戶名尚未被使用，您可以繼續。");
%>
運行一下，嗯，沒有彈出窗口，沒有頁面刷新，跟預想的效果一樣。如果需要的話，可以在sample1_2.jsp中實現更復雜的功能。最后，只要將反饋信息打印出來就可以了。
首先，在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')">經理室/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')">開發部/a>
/td>
/tr>
tr style="display:none ">
td id="pos_2" height="20"> /td>
/tr>
/table>
在框架的基礎上增加一個響應函數showRoles(obj)：
//顯示部門下的崗位
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在讀取數據..."
currentPos = obj;
send_request("sample2_2.jsp?playPos="+obj);
}
修改框架的processRequest函數：
// 處理返回信息的函數
function processRequest() {
if (http_request.readyState == 4) { // 判斷對象狀態
if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
最后就是smaple2_2.jsp了：
%@ page contentType="text/html; charset=gb2312" errorPage="" %>
%
String playPos = request.getParameter("playPos"); if("pos_1".equals(playPos)) out.print("nbsp;nbsp;總經理br>nbsp;nbsp;副總經理"); else if("pos_2".equals(playPos)) out.println("nbsp;nbsp;總工程師br>nbsp;nbsp;軟件工程師");
%>
運行一下看看效果：
上一篇：AJAX和DOM的運行經驗
下一篇：asp+Ajax簡單客戶登陸驗證