AJAX 上手篇.docx
《AJAX 上手篇.docx》由会员分享，可在线阅读，更多相关《AJAX 上手篇.docx（17页珍藏版）》请在冰豆网上搜索。
AJAX上手篇
AJAX上手篇
FromMoztwWiki
本文章為MozillaDeveloperCenter的AJAX:
GettingStarted （http:
//developer.mozilla.org/en/docs/AJAX:
Getting_Started）的翻譯。
原文的作者與編修歷史可在它的歷史頁 （http:
//developer.mozilla.org/en/docs/index.php?
title=AJAX:
Getting_Started&action=history）上看到。
這篇文章說明AJAX相關技術的基礎，並提供實例供您上手。
內容大綱[顯示隱藏]
1AJAX是啥？
2第一步–說聲「請」（又稱為「怎麼發出XMLHttpRequest」）
3第二步–「就上咩！
」（又稱為「處理伺服器傳回的資料」）
4第三步-萬事俱備-簡單範例
5第四步–「X檔案」（又稱為「處理XML回應值」）
[編輯]
AJAX是啥？
AJAX（AsynchronousJavaScriptandXML,非同步JavaScript及XML技術）是個新詞，但內涵是兩個存在已有一段時間的JavaScript功能。
這兩種功能以往一直被忽略，在Gmail、Googlesuggest及GoogleMaps出現後才一舉成名天下知。
這兩個JavaScript功能是：
∙在不重新讀取頁面的情況下對伺服器送出要求（request）
∙解析、使用XML文件
[編輯]
第一步–說聲「請」（又稱為「怎麼發出XMLHttpRequest」）
為了用JavaScript對伺服器發送HTTP要求，你必須先以相關的類別（class）製出實體（instance）。
InternetExplorer首先以ActiveX物件方式提供XMLHTTP類別，而Mozilla、Safari及其他瀏覽器則隨後以XMLHttpRequest類別支援此ActiveX物件中的類別及屬性。
因此，如果想跨瀏覽器，那麼可以這麼寫：
if（window.XMLHttpRequest）{//Mozilla,Safari,...
http_request=newXMLHttpRequest（）;
}elseif（window.ActiveXObject）{//IE
http_request=newActiveXObject（"Microsoft.XMLHTTP"）;
}
（由於這段程式僅供說明，所以是採最簡方式寫出。
本文第三步中有另一種我們比較常用的寫法。
）
有些版本的Mozilla瀏覽器在伺服器送回的資料未含XMLmime-type檔頭（header）時會出錯。
為了避免這個問題，你可以用下列方法覆寫伺服器傳回的檔頭，以免傳回的不是text/xml。
http_request=newXMLHttpRequest（）;
http_request.overrideMimeType（'text/xml'）;
接下來是要決定伺服器傳回資料後的處理方式，此時你只要以onreadystatechange這個屬性指明要處理傳回值的JavaScript函式名稱即可，例如：
http_request.onreadystatechange=nameOfTheFunction;
注意，指定的函式名稱後不加括號也沒有參數。
除了指定函式名稱外，你也能用Javascript即時定義函式的方法來定一個新的處理函式，如下：
http_request.onreadystatechange=function（）{
//做些事
};
決定處理方式之後你得確實發出request，此時需叫用HTTPrequest類別的open（）及send（）方法，如下：
http_request.open（'GET','http:
//www.example.org/some.file',true）;
http_request.send（null）;
∙open（）的第一個參數是HTTPrequest的方法，也就是從GET、POST、HEAD中擇一使用，亦可用你主機上支援的方式。
為遵循HTTP標準，請記得這些方法都是大寫，不然有的瀏覽器（如Firefox）或許不會理你。
其他HTTPrequest可以支援的方法列表請參考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（一切完成）
（資料來源:
MSDN （
接下來要檢查伺服器傳回的HTTP狀態碼。
所有狀態碼列表可於W3C網站 （http:
//www.w3.org/Protocols/rfc2616/rfc2616-sec10.html）上查到，但我們要管的是200OK這種狀態。
if（http_request.status==200）{
//萬事具備
}else{
//似乎有點問題，或許伺服器傳回了404（查無此頁）或者500（內部錯誤）什麼的
}
檢查傳回的HTTP狀態碼後，要怎麼處理傳回的資料就由你決定了。
有兩種存取資料的方式：
∙http_request.responseText–這樣會把傳回值當字串用
∙http_request.responseXML–這樣會把傳回值視為XMLDocument物件，而後可用JavaScriptDOM相關函式處理
[編輯]
第三步-萬事俱備-簡單範例
好，接著就做一次簡單的HTTP範例，演示方才的各項技巧。
這段JavaScript會向伺服器要一份裡頭有「I'matest.」字樣的HTML文件（test.html），而後以alert（）將文件內容列出。
varhttp_request=false;
functionmakeRequest（url）{
http_request=false;
if（window.XMLHttpRequest）{//Mozilla,Safari,...
http_request=newXMLHttpRequest（）;
if（http_request.overrideMimeType）{
http_request.overrideMimeType（'text/xml'）;
}
}elseif（window.ActiveXObject）{//IE
try{
http_request=newActiveXObject（"Msxml2.XMLHTTP"）;
}catch（e）{
try{
http_request=newActiveXObject（"Microsoft.XMLHTTP"）;
}catch（e）{}
}
}
if（!
http_request）{
alert（'Givingup :
（CannotcreateanXMLHTTPinstance'）;
returnfalse;
}
http_request.onreadystatechange=alertContents;
http_request.open（'GET',url,true）;
http_request.send（null）;
}
functionalertContents（）{
if（http_request.readyState==4）{
if（http_request.status==200）{
alert（http_request.responseText）;
}else{
alert（'Therewasaproblemwiththerequest.'）;
}
}
}
style="cursor:
pointer;text-decoration:
underline"
onclick="makeRequest（'test.html'）">
Makearequest
在此範例中：
∙首先使用者按下「Makearequest」
∙這麼一來就會呼叫makeRequest（）函式，亦傳入參數值test.html（也就是那份HTML檔的名稱，放在同目錄下）
∙接著發出request，而後會將主導權交給onreadystatechange指定的alertContents（）函式
∙alertContents（）檢查回應是否正常，而後以alert（）將test.html的內容列出
你可以由此測試本例 （ （
[編輯]
第四步–「X檔案」（又稱為「處理XML回應值」）
前面的例子中，在收到HTTP傳回值後我們以物件的reponseText屬性使用test.html檔案的內容，接著來試試responseXML屬性的方法。
首先，我們得做個格式正確的XML文件，以便稍後取用。
此檔名喚test.xml，內容如下：
xmlversion="1.0" ?
>
I'matest.
在程式中，我們叫用檔案的地方只須略事修改如下：
...
onclick="makeRequest（'test.xml'）">
...
接著在alertContents（）中，我們必須將alert（http_request.responseText）;改成這樣：
varxmldoc=http_request.responseXML;
varroot_node=xmldoc.getElementsByTagName（'root'）.item（0）;
alert（root_node.firstChild.data）;
這樣一來我們便可取得responseXML所傳回的XMLDocument物件，而後以DOM相關的方法取用XML文件內容。
你可以參考test.xml的原始碼 （以及修改過後的測試程式 （
其他與DOM相關的方法，請參考MozillaDOM （http:
//www.mozilla.org/docs/dom/）文件。
[[Category:
{{{4}|{{{4}}}=}}|AJAX上手篇}=}}]]
[[Category:
{{{5}|{{{5}}}=}}|AJAX上手篇}=}}]][[Category:
{{{6}|{{{6}}}=}}|AJAX上手篇}=}}]]
‧返回上一頁:
開發人員文件主頁
取自"http:
//wiki.moztw.org/index.php/AJAX_%E4%B8%8A%E6%89%8B%E7%AF%87"
基于Ajax的应用程序架构汇总
浏览器端框架被划分成两大类：
·应用程序框架：
提供浏览器的功能，但是常以包括窗口小部件抽象和另外的部件而出名，其功能主要围绕桌面GUI框架。
·基本结构框架：
提供基本的管道和可移植的浏览器抽象，让开发者去创建内容。
典型的功能：
*针对XMLHttpRequest的包装器以封装浏览器-服务器的交互。
（所有的框架都提供这一功能）。
*XML操作和查询。
*根据来自XMLHttpRequest的应答执行DOM操作。
*在一些情况中，与另外的浏览器端技术如Flash（和潜在的Javaapplets）集成在一起。
而服务器端框架通常以下面两种方式工作（尽管它们在这里根据语言的不同进行了分类）：
·HTML/JS生成：
服务器提供完整的HTML/Javascript代码生成和浏览器-服务器协调，结果是只有浏览器端编码可以被定制。
·远程调用：
Javascript调用直接被路由到服务器端功能（例如Java方法）并返回到Javascript回叫处理器；或者Javascript调用服务器以提取信息，例如会话细节，数据库查询等。
·纯Javascript：
应用程序框架
1.1Bindows（自从2003年）
网址是：
，Bindows是一个软件开发包（SDK），它，通过强力联合DHTML，JavaScript，CSS和XML等技术，能生成高度交互的互联网应用程序-成为现代的桌面应用程序的强有力对手。
Bindows应用程序不要求下载和也不需要在用户端安装-仅要求有一个浏览器（也不需要Java，Flash或者ActiveX）。
Bindows有可能领导面向对象开发的AJAX应用程序的平台。
·它是商业化的，使用来自于MB的技术（总部位于GAUSA，主要开发中心在瑞典，成立于2002年）。
Bindows框架提供给你：
·基于类的面向对象的API
·一套完整的窗口系统，提供宽范围的窗口小部件支持，包括菜单、表单、格子、滑动条、量程，甚至更多
·用于开发zero-footprintSOA客户端应用程序的领先的工具箱
·本机的XML，SOAP和XML-RPC支持
·单用户到企业级的支持
·内建的对AJAX的支持
Bindows开发环境：
·支持企业级规模的工程开发
·跨浏览器，跨平台支持
·服务器独立结构
·与新的和现有资源的互操作性
·一致性开发方法学
1.2BackBase（自从2003年）
网址是：
，是一个全面的浏览器端框架，支持丰富的浏览器功能以及与.NET和Java的集成。
·商业化，来自于BackbaseB.V（总部在Amsterdam，成立于2003年）。
1.3DOJO（开发中;自从2004年9月）
网址是：
http:
//dojotoolkit.org/，提供全面窗口小组件和浏览器-服务器消息支持。
·为创建定制的Javascript窗口小组件提供框架支持。
·预置的窗口小组件库。
·浏览器-服务器消息支持-XMLHttpRequest和另外的机制。
·支持浏览器中的URL操纵功能。
·开源许可（学术自由许可2.1（http:
//opensource.org/licenses/afl-2.1.php）），由JotSpot（Russell（http:
//alex.dojotoolkit.org/）所领导。
1.4OpenRico（开发中;自从2005年5月;基于早期的私有框架）
网址是：
http:
//openrico.org/demos.page，是一多用途框架，支持Ajax基础结构和用户交互。
·一个XMLHttpRequest应答能被路由到一个或者更多回叫操作，DOM对象，或者Javascript对象。
·容易鼠标拖动支持。
·Ajax动画，例如缩放和变换。
·"行为"-实质上是窗口小组件库。
·使用指南（
·开源。
源于Sabre航空公司解决方案，由BillScott（），DarrenJames及另外一些人所支持。
1.5qooxdoo（开发中;自从2005年5月）
网址是：
·基础结构：
*DOM和事件/焦点管理的可移植的抽象。
*调试支持。
*易于时间调度的Timer类。
*Getter/Setter支持。
·UI：
*窗口小组件框架和预置的窗口小组件库。
*布局管理器。
*图像缓冲和可移植的PNG透明性。
·开源（LGPL）。
来自多方面的贡献者。
1.6Tibet（开发中;自从2005年6月）
网址是：
API，结果是，可能自动生成大量的客户端代码。
自称是"企业级Ajax"。
·远程脚本运行在XMLHttpRequest包装之上-通过协调调用结果支持工作流管理，例如应答可以发生在只有当两个分离的调用返回时。
·URI支持。
·所有的HTTP方法-不仅是"GET"和"POST"。
·低级的协议-File:
//和WebDav以及HTTP。
·Web服务调用-SOAP，XML-RPC，等等。
·预置的针对GoogleAPI，AmazonAPI等等服务的支持。
·由高级Javascript对象组成一个巨大的库。
·许多XML操作。
·IDE和开发工具。
·开源许可（显然经过OSI认证，但是细节不多）。
2纯Javascript：
基础结构框架
2.1AjaxCaller（Alpha版本;自从5月2005年）
网址是：
·实现对服务器的调用（GET/POST/PUT/DELETE），用路由到一个回叫操作的plain-text或者XML完成。
·使用过的XMLHttpRequest对象的析构。
·Response缓冲（计划的）。
·针对Ajax新手-并非强调性能优化，该库主要用于实现易读的基础代码并将提供调试支持。
·开源许可。
由MichaelMahemoff（）（具有JohnWehr和RichardSchwartz的一些思想）维护。
2.2FlashJavaScript集成包
网址是：
http:
//www.osflash.org/doku.php?
id=flashjs，允许JavaScript和Flash内容的集成：
·使JavaScript能够调用ActionScript功能和反过来的实现。
·所有主要的数据类型能在这两种环境之间传递。
·开源许可。
由多个开源Flash贡献者提供支持。
2.3GoogleAJAXSLT（发行于2005年6月）
网址是：
http:
//goog-
·建立在Google地图工作基础之上。
·开源许可（BSD）。
由一家创新搜索方案公司支持，自称为"Google"。
2.4HTMLHttpRequest（Beta版；始于2005年）
HtmlHttpRequest（
·测试过并能工作在:
IE6/Win，IE5.5/Win，IE5/Win，IE4/Win，Mozilla/Win，Opera7/Win，Safari/Mac，IE5/Mac。
·未测试，可能能工作在：
IE4/Mac，Mozilla/Mac，Opera/Other，Konqueror/Linux。
你正在使用这些之一吗？
作者正在请求兼容性信息。
·开源许可（LGPL）。
由TwinHelixDesigns（Turnbull维护。
2.5交互式网站框架（自从2005年5月）
交互式网站框架（
·线程安全的XMLHttpRequest实现。
·针对XML文档的包装器，以便你能够创建更具可读性的代码：
varno
升级会员 