|
这篇文章说明 AJAX
相关技术的基础，并提供实例供您上手。
第一步 – 说声「请」
（又称为「怎么发出 XMLHttpRequest」）
为了用 JavaScript 对服务器发送 HTTP
要求，你必须先以相关的类别（class）制出实体（instance）。Internet
Explorer 首先以 ActiveX 对象方式提供 XMLHTTP
类别，而 Mozilla、Safari 及其它浏览器则随后以
XMLHttpRequest 类别支持此 ActiveX
对象中的类别及属性。
因此，如果想跨浏览器，那么可以这么写：
if (window.XMLHttpRequest) { // Mozilla,
Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new
ActiveXObject("Microsoft.XMLHTTP");
}
(由于这段程序仅供说明，所以是采最简方式写出。本文第三步中有另一种我们比较常用的写法。)
有些版本的 Mozilla
浏览器在服务器送回的数据未含 XML mime-type
文件头（header）时会出错。为了避免这个问题，你可以用下列方法覆写服务器传回的档头，以免传回的不是
text/xml。
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
接下来是要决定服务器传回资料后的处理方式，此时你只要以
onreadystatechange 这个属性指明要处理传回值的
JavaScript 函式名称即可，例如：
http_request.onreadystatechange =
nameOfTheFunction;
注意，指定的函式名称后不加括号也没有参数。除了指定函式名称外，你也能用
Javascript
实时定义函式的方法来定一个新的处理函式，如下：
http_request.onreadystatechange =
function(){
// 做些事
};
决定处理方式之后你得确实发出 request，此时需叫用
HTTP request 类别的 open() 及 send() 方法，如下：
http_request.open('GET', 'http://www.example.org/some.file',
true);
http_request.send(null);
* open() 的第一个参数是 HTTP request 的方法，也就是从
GET、POST、HEAD 中择一使用，亦可用你主机上支持的方式。为遵循 HTTP 标准，请记得这些方法都是大写，不然有的浏览器（如
Firefox）或许不会理你。其它 HTTP request 可以支持的方法列表请参考 W3C 规格书 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)。
* 第二个参数是目标 URL。基于安全考虑，你不能叫用同网域以外的网页。如果网域不同，则叫用
open() 时会出现「权限不足，拒绝存取」那类的错误。通常大伙会犯的错误多为在 domain.tld 网的网站下呼叫
www.domain.tld 中的网页，仅是一点点差别都不行。
* 第三个参数决定此 request
是否不同步进行，如果设定为 TRUE
则即使服务器尚未传回数据也会继续执行其余的程序，这也就是
AJAX 中第一个 A 代表的意义。
send() 的参数在以 POST 发出 request
时可以是任何想传给服务器的东西，而数据则以查询字符串的方式列出，例如：
name=value&anothername=othervalue&so=on
不过如果你想要以 POST
方式传送数据，则必须先将 MIME
型态改好，如下：
http_request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
否则服务器就不会理你传过来的数据了。
第二步 –
「就上咩！」（又称为「处理服务器传回的数据」）
传出 request
时必须提供处理传回值的函式名称。
http_request.onreadystatechange = nameOfTheFunction;
那么来看看这个函式该做些什么。首先，它必须检查
request 目前的状态：如果状态值为 4
代表服务器已经传回所有信息了，便可以开始解析所得信息。
if (http_request.readyState == 4) {
// 一切 ok, 继续解析
} else {
// 还没完成
}
readyState 所有可能的值如下：
* 0 (还没开始)
* 1 (读取中)
* 2 (已读取)
* 3 (信息交换中)
* 4 (一切完成)
接下来要检查服务器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站 上查到，但我们要管的是 200
OK 这种状态。
if (http_request.status == 200) {
// 万事具备
} else {
//
似乎有点问题，或许服务器传回了 404 (查无此页)
或者 500 (内部错误) 什么的
}
检查传回的 HTTP
状态码后，要怎么处理传回的数据就由你决定了。有两种存取数据的方式：
* http_request.responseText –
这样会把传回值当字符串用
* http_request.responseXML –
这样会把传回值视为 XMLDocument
对象，而后可用 JavaScript DOM 相关函式处理
第三步 - 万事俱备 - 简单范例
好，接着就做一次简单的 HTTP
范例，演示方才的各项技巧。这段 JavaScript
会向服务器要一份里头有「I'm a test.」字样的
HTML 文件(test.html)，而后以 alert()
将文件内容列出。
＜script type="text/javascript"
language="javascript"＞
var http_request = false;
function makeRequest(url) {
http_request =
false;
if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject)
{ // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request)
{
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState
== 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
＜/script＞
＜span
style="cursor: pointer;
text-decoration: underline"
onclick="makeRequest('test.html')"＞
Make a request
＜/span＞
在此范例中：
* 首先使用者按下「Make a
request」
* 这么一来就会呼叫 makeRequest()
函式，亦传入参数值 test.html (也就是那份 HTML
档的名称，放在同目录下)
* 接着发出 request，而后会将主导权交给
onreadystatechange 指定的 alertContents() 函式
* alertContents()
检查响应是否正常，而后以 alert() 将 test.html
的内容列出
你可以由此测试本例 (http://www.w3clubs.com/mozdev/httprequest_test.html)，也可以参考测试档案
(http://www.w3clubs.com/mozdev/test.html)。
第四步 – 「X 档案」（又称为「处理
XML 响应值」）
前面的例子中，在收到 HTTP
传回值后我们以对象的 reponseText 属性使用
test.html 档案的内容，接着来试试 responseXML
属性的方法。
首先，我们得做个格式正确的 XML
文件，以便稍后取用。此檔名唤 test.xml，内容如下：
＜?xml version="1.0" ?＞
＜root＞
I'm a test.
＜/root＞
在程序中，我们叫用档案的地方只须略事修改如下：
...
onclick="makeRequest('test.xml')"＞
...
接着在 alertContents() 中，我们必须将
alert(http_request.responseText); 改成这样：
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
这样一来我们便可取得 responseXML 所传回的 XMLDocument 对象，而后以 DOM 相关的方法取用
XML 文件内容。
本文章为 Mozilla Developer Center 的 AJAX:Getting Started
(http://developer.mozilla.org/en/docs/AJAX:Getting_Started)
的翻译。原文的作者与编修历史可在它的历史页 (http://developer.mozilla.org/en/docs/index.php?title=AJAX:Getting_Started&action=history)上看到。
|