paulwong — Fri, 05 May 2006 14:21:00 GMT

AJAX 上手��?o:p>

�W�一�?�?说声「请�?�Q�又�U�Cؓ「怎么发出 XMLHttpRequest」）

��Z��?JavaScript �Ҏ��务器发�?HTTP 要求�Q�你必须先以相关的类别（class�Q�制出实体（instance�Q�。Internet
Explorer 首先�?ActiveX 对象方式提供 XMLHTTP �c�d��Q��?Mozilla、Safari及其它浏览器则随后以 XMLHttpRequest �c�d��支持�?ActiveX 对象中的�c�d��及属性�?

因此�Q�如果想跨浏览器�Q�那么可以这么写�Q��?/p>

if (window.XMLHttpRequest) { // Mozilla, Safari,

http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject( " Microsoft.XMLHTTP " );

}

(�׃��q�段�E�序仅供说明�Q�所以是采最��方式写出。本文第三步中有另一�U�我们比较常用的写法�?

有些版本�?Mozilla ��览器在服务器送回的数据未�?XML mime-type 文�g��_��header�Q�时会出错。�ؓ了避免这个问题，你可以用下列�Ҏ��覆写服务器传回的档头�Q�以免传回的不是text/xml�?/p>

http_request = new XMLHttpRequest();

http_request.overrideMimeType('text / xml');

接下来是要决定服务器传回资料后的处理方式�Q�此时你只要�?onreadystatechange �q�个属性指明要处理传回值的
JavaScript 函式名称卛_��Q�例如：

http_request.onreadystatechange = nameOfTheFunction;

注意�Q�指定的函式名称后不加括号也没有参数。除了指定函式名�U�外�Q�你也能�?Javascript 实时定义函式的方法来定一个新的处理函式，如下�Q?/p>

http_request.onreadystatechange = function (){

// 做些�?/span>

};

军_��处理方式之后你得��实发出 request�Q�此旉��叫用 HTTP request �c�d��?open() �?send() �Ҏ��Q�如下：

http_request.open('GET', 'http: // www.example.org/some.file', true);
http_request.send( null );

open() 的第一个参数是
HTTP request 的方法，也就是从
GET、POST、HEAD 中择一使用�Q�亦可用你主��Z��支持的方式。�ؓ遵��@ HTTP 标准�Q�请记得�q�些�Ҏ��都是大写�Q�不然有的浏览器�Q�如 Firefox�Q�或�怸�会理你。其�?HTTP request 可以支持的方法列表请参�?br /> W3C 规格�?/a> (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)�?
�W�二个参数是目标 URL。基于安全考虑�Q�你不能叫用同网域以外的�|�页。如果网域不同，则叫�?br /> open() 时会出现「权限不��I��拒绝存取」那�cȝ��错误。通常大伙会犯的错误多为在 domain.tld �|�的�|�站下呼�?www.domain.tld 中的�|�页�Q�仅是一点点差别都不行�?br />
�W�三个参数决定此 request 是否不同步进行，如果讑֮��?br /> TRUE 则即使服务器��未传回数据也会�l�箋执行其余的程序，�q�也��是 AJAX 中第一�?A 代表的意义�?

send() 的参数在�?POST 发出 request 时可以是��M��想传�l�服务器的东西，而数据则以查询字�W�串的方式列出，例如�Q?

name = value & anothername = othervalue & so = on

不过如果你想要以 POST 方式传送数据，则必��d��?MIME 型态改好，如下�Q?

				
						
						http_request.setRequestHeader('Content
						-
						Type', 'application
						/
						x
						-
						www
						-
						form
						-
						urlencoded');

否则服务器就不会理你传过来的数据了�?

�W�二�?�?「就上咩�Q�」（又称为「处理服务器传回的数据」）

传出 request 时必��L��供处理传回值的函式名称�?

http_request.onreadystatechange = nameOfTheFunction;

////////////////////////////////////////////////////////////////////

//但是�Q�FireFox 对onreadyStateChange没有反应�Q�怎么办，�q�个�Ҏ��不能用在

//FireFox 中，有没有其它的�Ҏ���Q?o:p>

//      Added by www.besook.com 2006-03-19

//////////////////////////////////////////////////////////////

那么来看看这个函式该做些什么。首先，它必��L��?request 目前的状态：如果状态��gؓ 4 代表服务器已�l�传回所有信息了�Q�便可以开始解析所得信息�?/p>

if (http_request.readyState == 4 ) {

// 一切 ok, �l�箋解析

} else {

// �q�没完成

}

readyState 所有可能的值如下：

0 (�q�没开�?
1 (��d��?
2 (已读�?
3 (信息交换�?
4 (一切完�?

(资料来源: MSDN (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp))

接下来要��查服务器传回�?HTTP 状态码。所有状态码列表可于 W3C
�|�站 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)上查刎ͼ�但我们要��的�?code>200 OK �q�种状态�?/p>

if (http_request.status == 200 ) {

// 万事具备

} else {

// ��g��有点问题�Q�或许服务器传回了�?04 (查无此页) 或者�?00 (内部错误) 什么的

}

��查传回的 HTTP 状态码后，要怎么处理传回的数据就�׃��军_��了。有两种存取数据的方式：

http_request.responseText �?�q�样会把传回值当字符串用
http_request.responseXML �?�q�样会把传回��D��?br /> XMLDocument 对象�Q�而后可用
JavaScript DOM 相关函式处理

�W�三�?- 万事俱备 - ��单范�?

好，接着��做一�ơ简单的 HTTP 范例�Q�演�C�方才的各项技巧。这�D?JavaScript 会向服务器要一份里头有「I'm
a test.」字��L�� HTML 文�g(test.html)�Q�而后�?alert() ��文件内容列出�?/p>

< 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�?
�q�么一来就会呼�?br /> makeRequest() 函式�Q�亦传入参数�?test.html (也就是那�?HTML 档的名称�Q�放在同目录�?
接着发出 request�Q�而后会将��d��权交�l?br /> onreadystatechange 指定�?alertContents() 函式
alertContents() ��查响应是否正常，而后�?alert() ��?test.html 的内容列�?

你可�?a target="_blank">由此��试本例 (http://www.w3clubs.com/mozdev/httprequest_test.html)�Q�也可以参�?a target="_blank">��试档案 (http://www.w3clubs.com/mozdev/test.html)�?br />

�W�四�?�?「X 档案」（又称为「处�?XML 响应倹{��）

前面的例子中�Q�在收到 HTTP 传回值后我们以对象的 reponseText 属性��?test.html 档案的内容，接着来试�?responseXML 属性的�Ҏ��?

首先�Q�我们得做个格式正确�?XML 文�g�Q�以便稍后取用。此档名�?test.xml�Q�内容如下：

xml version="1.0" ?>

< root >

I'm a test.

root >

在程序中�Q�我们叫用档案的地方只须略事修改如下�Q?

...

				
						
						onclick
						=
						"
						makeRequest('test.xml')
						"

...

接着�?alertContents() 中，我们必须��?alert(http_request.responseText); �Ҏ��q�样�Q?/p>

var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item( 0 );

alert(root_node.firstChild.data);

�q�样一来我们便可取�?responseXML 所传回�?XMLDocument 对象�Q�而后�?DOM 相关的方法取�?br />XML 文�g内容。你可以参�?test.xml 的原始码 (http://www.w3clubs.com/mozdev/test.xml)
以及修改�q�后�?a target="_blank">��试�E�序 (http://www.w3clubs.com/mozdev/httprequest_test_xml.html)�?img src ="http://www.tkk7.com/paulwong/aggbug/44684.html" width = "1" height = "1" />

paulwong 2006-05-05 22:21 发表评论

亚洲精品综合一二三区在线 ,亚洲av日韩精品久久久久久a,亚洲精品视频免费看

AJAX 上手��?o:p>

�W�一�?�?说声「请�?�Q�又�U�Cؓ「怎么发出 XMLHttpRequest」）

�W�二�?�?「就上咩�Q�」（又称为「处理服务器传回的数据」）

�W�三�?- 万事俱备 - ���单范�?

�W�四�?�?「X 档案」（又称为「处�?XML 响应倹{��）

�W�三�?- 万事俱备 - ��单范�?