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>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
XML代码:
1
<?xml version="1.0" encoding="gb2312"?>
2
<root>
3
<username>
4
george wing
5
</username>
6
</root>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
Javascript代码:
1
function 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
}
18
function updateobj(obj, data) {
19
document.getElementsByTagName(obj)[0].firstChild.nodeValue = data;
20
}
21![](/Images/OutliningIndicators/None.gif)
22
var 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![](/Images/OutliningIndicators/None.gif)
29
function 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
}
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](/Images/OutliningIndicators/InBlock.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
18
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
23
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
24
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
25
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
26
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
学会AJAX的关键是XHR对象的使用,另外还需要HTTP的知识。
(完)
AJAX 系列blog文章: