AJAX實例:XHR的入門

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>

js代碼：

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}