paulwong

AJAX 上手篇

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;

////////////////////////////////////////////////////////////////////
//但是,FireFox 对onreadyStateChange没有反应,怎么办,这个方法不能用在
//FireFox 中,有没有其它的方法?
//      Added by www.besook.com 2006-03-19
//////////////////////////////////////////////////////////////

那么来看看这个函式该做些什么。首先,它必须检查 request 目前的状态:如果状态值为 4 代表服务器已经传回所有信息了,便可以开始解析所得信息。


if  (http_request.readyState  ==   4 ) {

    
//  一切 ok, 继续解析

else  {

    
//  还没完成

}


readyState 所有可能的值如下:

  • 0 (还没开始)
  • 1 (读取中)
  • 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)上查到,但我们要管的是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 文件内容。你可以参考 test.xml 的原始码 (http://www.w3clubs.com/mozdev/test.xml)
以及修改过后的测试程序 (http://www.w3clubs.com/mozdev/httprequest_test_xml.html)。

posted on 2006-05-18 21:56 paulwong 阅读(443) 评论(0)  编辑  收藏 所属分类: AJAX


只有注册用户登录后才能发表评论。


网站导航: