AJAX 是啥?
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。
这两个 JavaScript 功能 是:
* 在不重新读取页面的情况下对伺服器送出要求(request)
* 解析、使用 XML 文件
第一步 – 怎么发出 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(){
// do the thing
};
决定处理方式之后你得确实发出 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 规格书 。
* 第二个参数是目标 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) {
// everything is good, the response is received
} else {
// still not ready
}
readyState 所有可能的值如下:
* 0 (还没开始)
* 1 (读取中)
* 2 (已读取)
* 3 (资讯交换中)
* 4 (一切完成)
接下来要检查伺服器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站上查到,但我们要管的是 200 OK 这种状态。
if (http_request.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}
检查传回的 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">
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// See note below about this line
}
} 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 = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request) {
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"
οnclick="makeRequest('test.html')">
Make a request
</span>
在此范例中:
* 首先使用者按下「Make a request」
* 这么一来就会呼叫 makeRequest() 函式,亦传入参数值 test.html (也就是那份 HTML 档的名称,放在同目录下)
* 接着发出 request,而后会将主导权交给 onreadystatechange 指定的 alertContents() 函式
* alertContents() 检查回应是否正常,而后以 alert() 将 test.html 的内容列出
你可以由此测试本例 ,也可以参考测试档案 。
第四步 – 处理 XML 回应值
前面的例子中,在收到 HTTP 传回值后我们以物件的 reponseText 属性使用 test.html 档案的内容,接着来试试 responseXML 属性的方法。
首先,我们得做个格式正确的 XML 文件,以便稍后取用。此档名唤 test.xml,内容如下:
<?xml version="1.0" ?>
<root>
I'm a test.
</root>
在程式中,我们叫用档案的地方只须略事修改如下:
...
οnclick="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 文件内容。你可以参考 test.xml 的原始码 以及修改过后的测试程式。
其他与 DOM 相关的方法,请参考 Mozilla's DOM implementation 文件。
:D [color=blue][/color][color=blue][/color] :D
AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。
这两个 JavaScript 功能 是:
* 在不重新读取页面的情况下对伺服器送出要求(request)
* 解析、使用 XML 文件
第一步 – 怎么发出 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(){
// do the thing
};
决定处理方式之后你得确实发出 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 规格书 。
* 第二个参数是目标 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) {
// everything is good, the response is received
} else {
// still not ready
}
readyState 所有可能的值如下:
* 0 (还没开始)
* 1 (读取中)
* 2 (已读取)
* 3 (资讯交换中)
* 4 (一切完成)
接下来要检查伺服器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站上查到,但我们要管的是 200 OK 这种状态。
if (http_request.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}
检查传回的 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">
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
// See note below about this line
}
} 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 = function() { alertContents(http_request); };
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents(http_request) {
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"
οnclick="makeRequest('test.html')">
Make a request
</span>
在此范例中:
* 首先使用者按下「Make a request」
* 这么一来就会呼叫 makeRequest() 函式,亦传入参数值 test.html (也就是那份 HTML 档的名称,放在同目录下)
* 接着发出 request,而后会将主导权交给 onreadystatechange 指定的 alertContents() 函式
* alertContents() 检查回应是否正常,而后以 alert() 将 test.html 的内容列出
你可以由此测试本例 ,也可以参考测试档案 。
第四步 – 处理 XML 回应值
前面的例子中,在收到 HTTP 传回值后我们以物件的 reponseText 属性使用 test.html 档案的内容,接着来试试 responseXML 属性的方法。
首先,我们得做个格式正确的 XML 文件,以便稍后取用。此档名唤 test.xml,内容如下:
<?xml version="1.0" ?>
<root>
I'm a test.
</root>
在程式中,我们叫用档案的地方只须略事修改如下:
...
οnclick="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 文件内容。你可以参考 test.xml 的原始码 以及修改过后的测试程式。
其他与 DOM 相关的方法,请参考 Mozilla's DOM implementation 文件。
:D [color=blue][/color][color=blue][/color] :D