首先XMLHttpRequest不是web標(biāo)準(zhǔn)，而是大部分主流瀏覽器都支持的一種擴(kuò)展技術(shù)。它被認(rèn)為是一種異步調(diào)用的實(shí)現(xiàn)技術(shù)，因?yàn)樗緛硎潜辉O(shè)計(jì)在后臺(tái)取數(shù)據(jù)用的。在IE中它被作為一個(gè)ActiveX控件提供，而其他一些瀏覽器都提供一些本地API以供調(diào)用。
下面是一些關(guān)于XMLHttpRequest的基本方法：
1、獲取得一個(gè)XMLHttpRequest對(duì)象：
function getXMLHttpRequest() 
{
var xRequest = null;
if (window.XMLHttpRequest) {
xRequest = new XMLHttpRequest();
} else if (typeof ActiveObject != "undefined") {
xRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}
2、向服務(wù)器發(fā)送XMLHttpRequest：
function sendRequest(url, params, HttpMethod) {
if (!HttpMethod){
HttpMethod = "POST";
}
var req = getXMLHttpRequest();
if (req) {
req.open(HttpMethod, url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(params);
}
}
3、使用回調(diào)方法來監(jiān)測(cè)XMLHttpRequest對(duì)象的狀態(tài)
XMLHttpRequest使用屬性readyState來表示它的狀態(tài)
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
在事件驅(qū)動(dòng)開發(fā)中我們經(jīng)常使用回調(diào)技術(shù)，比如UI設(shè)計(jì)中的對(duì)按鍵的響應(yīng)等等。我們可以使用對(duì)XMLHttpRequest對(duì)象的onreadystatechange屬性來設(shè)置監(jiān)視XMLHttpRequest對(duì)象的狀態(tài)的回調(diào)方法：
function sendRequest(url, params, HttpMethod) {
if (!HttpMethod){
HttpMethod = "POST";
}
var req = getXMLHttpRequest();
if (req) {
req.onreadystatechange = onReadStateChage;
req.open(HttpMethod, url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(params);
}
}
function onReadyStateChange(){
//
}
4、完整的例子
<html>
<head>
<script language="JavaScript">
var req = null;
var infos = new Array("init", "loading", "loaded", "running", "finished");
var console = null;
function initXMLHttpRequest() {
if (req == null) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (typeof ActiveObject != "undefined") {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
function sendRequest(url) {
if (req == null) {
initXMLHttpRequest();
}
if (req) {
req.onreadystatechange = onReadyStateChange;
req.open("GET", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(null);
}
}
function onReadyStateChange(){
if (console == null) {
console = document.getElementById('console');
}
var state = req.readyState;
var txt;
if (state == 4) {
if (!req.status == 200) {
txt = "response:" + req.status;
} else {
txt = "response:" + req.responseText;
}
} else {
txt = infos[state];
}
var newline = document.createElement("div");
newline.appendChild(document.createTextNode(txt));
console.appendChild(newline);
}
</script>
</head>
<body>
<div id="console"></div>
<input type="button" onClick="sendRequest('ajax_test.txt')" value="Send Request"/>
</body>
</html>
將上面的代碼保存為ajax_text.html文檔中，然后在同一路徑放一個(gè)ajax_test.txt，在這個(gè)文本文件寫下一行文字，用瀏覽器打開 ajax_text.html，點(diǎn)擊"Send Request"看看發(fā)生了什么？
學(xué)習(xí)參考資料：
《AJAX in Action》
AJAX開發(fā)簡(jiǎn)略
AJAX開發(fā)簡(jiǎn)略續(xù)一
posted on 2006-02-26 13:42
kelven 閱讀(398)
評(píng)論(0) 編輯 收藏 所屬分類:
Ajax