AJAX執行個體:XHR的入門

XHR對象的使用是 AJAX 的核心。為了學習的方便，在編寫代碼過程中沒有用服務端開發的部分，Web前端開發與服務端開發的結合處在於“響應資料”(如XML)。 XML部分我直接寫好已放在伺服器了，重點不在服務端程式如何去從資料庫調出相應的資料的內容。

一個很簡單的樣本：點擊“查看”按鈕，使用者名稱(username)顯示在網頁中。

HTML代碼：

1<label>使用者名稱</label>
2<span>username 值</span>
3<a href="#" onclick="ajaxread('3.xml', ''); return false;">查看</a>

XML代碼：

1<?xml version="1.0" encoding="gb2312"?>
2<root>
3    <username>
4        george wing
5    </username>
6</root>

 

Javascript代碼：

1function ajaxread(file, postData) {
2    var req = createXMLHTTPObject();
3    if(!req) return;
4    req.onreadystatechange = function() {
5        if (req.readyState != 4) return;
6        if (req.status != 200 && req.status != 304) {
7            alert('HTTP error ' + req.status);
8            return;
9        }
10       
11        updateobj('span', req.responseXML.getElementsByTagName('username')[0].firstChild.nodeValue);
12    }
13    req.open('GET', file, true);
14    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
15    if (req.readyState == 4) return;
16    req.send(postData);
17}
18function updateobj(obj, data) {
19    document.getElementsByTagName(obj)[0].firstChild.nodeValue = data;
20}
21
22var XMLHttpFactories = [
23    function() {return new XMLHttpRequest()},
24    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
25    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
26    function () {return new ActiveXObject("Microsoft.XMLHTTP")},
27];
28
29function createXMLHTTPObject() {
30    var xmlhttp = false;
31    for(i=0; i<XMLHttpFactories.length; i++) {
32        try {
33            xmlhttp = XMLHttpFactories[i]();
34        }
35        catch(e) {
36            continue;
37        }
38        break;
39    }
40    return xmlhttp;
41}

學會AJAX的關鍵是XHR對象的使用，另外還需要HTTP的知識。

(完)

AJAX 系列blog文章:

AJAX 執行個體:ASP.NET 服務端的XML處理

Ajax:用非同步回調對ASP.NET 開發重構執行個體

AJAX執行個體:ASP.NET中的文本及包括JSON響應處理