你在這裡

 
XMLHttpRequest 物件是 AJAX 中的靈魂物件.

建構方式非常簡單, 但是對於 IE6 以前的 Browser 用戶, 就非常的麻煩. (規格與大多數Browser不同的東西, 卻是大多數人在用的東西). 終於 IE7 開始與大多數規格相同了.

async.js
var myxmlHttp = createXMLHttpRequestObject();

function createXMLHttpRequestObject(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest(); // 大多數的 Browser 與 IE 7
} catch(e) {
// for IE 6 以前
var IE = new Array(
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"
);
for (var i=0; i<IE.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(IE[i]);
} catch (e){}
}
}
// 到這裡都還建構不出來的話...
if (!xmlHttp){
alert("XML Request Object Create Error.");
} else {
alert("XML Request Object Create OK.");
return xmlHttp;
}
}

當事件被觸發之後, 便會透過該物件方法, 進行非同步的處理程序.
以下列出該物件的方法:
Method / Attribute
 說明
abort()
 停止目前的 request
getAllResponseHeaders()
 將多個回應Header以字串回傳
getResponseGeaser("指定Header的Label")
 將指定 Header 以字串串回應
open("get|post", "URL", true|false)
 開啟同步或非同步(false 或 true)的通訊傳遞
send(content)
 執行 HTTP resuest
setRequestHeader("自訂Header的Label", "Value")
 設定 Header 的 Label/Value
onreadystatechange()
 用於要求狀態改變的回傳函式
readyState
 回傳狀態值:
0: 尚未初始化 uninitalized
1: 載入中 loading
2: 載入完成 loaded
3: 可互動 interactive
4: 完成 completed
responseText
 要求文字內容回傳
responseXML
 要求XML內容回傳
Status
 回傳狀態碼(舉例)
200: OK; 請求成功
400: Bad Request; 請求格式錯誤
401: Unauthorized; 授權失敗
403: Forbidden; 權限拒絕
404: Not Found; 找不到網頁
408: Request Timeout; 逾時
500: Internal Server Error; 內部錯誤
statusText
 回傳狀態訊息


處理程序:
  1. 產生 XMLHttpRequest 物件實體
  2. 以該物件對 Server 端的資源進行非同步呼叫
  3. 定義一個回傳函式, 當 Server 端的 Response 到達實自動執行.
  4. 在該回傳函式進行處理 Response
  5. 可重複步驟 2.

async.js
var myxmlHttp = createXMLHttpRequestObject();

function createXMLHttpRequestObject(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
} catch(e) {
var IE = new Array(
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP"
);
for (var i=0; i<IE.length && !xmlHttp; i++){
try {
xmlHttp = new ActiveXObject(IE[i]);
}catch (e){}
}
}
if (!xmlHttp){
alert("XML Request Object Create Error.");
} else {
alert("XML Request Object Create OK.");
return xmlHttp;
}
}

function process(){
if (myxmlHttp){
try{
myxmlHttp.open("GET", "async.txt", true); // 資源 1
// myxmlHttp.open("GET", "async.jsp", true); // 資源 2
myxmlHttp.onreadystatechange = handleRequestStateChange;
myxmlHttp.send(null);
} catch (e) {
alert("連接伺服器失敗");
}
} else {
alert("XML Request Object Create Error.");
}
}

function handleRequestStateChange(){
myDiv1 = document.getElementById("xmlr1");
myDiv2 = document.getElementById("xmlr2");
myDiv3 = document.getElementById("xmlr3");
myDiv4 = document.getElementById("xmlr4");
if (myxmlHttp.readyState == 1){
myDiv1.innerHTML = "1. Loading";
}else if (myxmlHttp.readyState == 2){
myDiv2.innerHTML = "2. Loaded";
}else if (myxmlHttp.readyState == 3){
myDiv3.innerHTML = "3. interactive";
}else if (myxmlHttp.readyState == 4){
if (myxmlHttp.status == 200){
myDiv4.innerHTML += "4. complete<br />";
myDiv4.innerHTML += responseText; // 資源 1
// myDiv4.innerHTML += responseXML; // 資源 2
}
if (myxmlHttp.status == 404){
myDiv4.innerHTML += "404 Accepted <br />";
}
}
}


網頁介面:
async.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="async.js"></script>
</head>
<body>
<input type="button" onClick="process()" value="start"/><hr />
<div id="xmlr1"></div>
<div id="xmlr2"></div>
<div id="xmlr3"></div>
<div id="xmlr4"></div>
</body>
</html>

存取資源:
async.txt
Hello, Brad1


或另一個存取資源:
async.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
out.println("Hello, Brad2");
%>
</body>
</html>



最後修改紀錄: 2008年 08月 1日(五.) 17:23