|
本文是關(guān)于使用 web 服務的 — 簡單服務和 RESTful web 服務 — 使用 Dojo Toolkit。為了更好地理解本文，您需要在您的系統(tǒng)進行以下安裝和配置：
- 一個文本編輯器或集成開發(fā)環(huán)境（IDE）
（本文使用 Eclipse JavaScript IDE。） - 一個 web 服務器
Dojo Toolkit 概述
隨著人們對構(gòu)建更好的 Rich Internet Applications (RIAs) 的關(guān)注。JavaScript 架構(gòu)的出現(xiàn)使得 web 開發(fā)人員可以將它們的應用程序開發(fā)得更具吸引力。
預先包裝的 JavaScript 庫擁有諸多優(yōu)點。第一，使用在不同瀏覽器和不同平臺上驗證過的代碼可以極大地減少在許多不同瀏覽器上驗證功能需要的測試次數(shù)，因而也減少了代碼中缺陷。第二，使用已編寫且測試的代碼節(jié)省了大量時間，使您可以更快地完成您的應用程序。
Ajax 概述
Ajax 是一個用來描述一個組合技術(shù)的術(shù)語，在加載用戶 web 頁面時用來調(diào)用（異步）服務器。這項技術(shù)在今天的 web 頁中無處不在，在提供豐富的 Web 體驗方面起著重要的作用。
在本文的示例中，每一次用戶只要修改文本框中的文本內(nèi)容，JavaScript 代碼都會進行一個服務器調(diào)用來獲取參考值。一方面，這個附加函數(shù)將產(chǎn)生一些流量。另一方面，如果用戶通過提交整個表單進行重復的搜索，該技術(shù)將節(jié)省很多流量。
回頁首 創(chuàng)建項目
本例使用最新版 Eclipse 以及已安裝的 JavaScript 工具。這些工具提供改進功能來編輯 JavaScript 和 HTML 頁面。
根據(jù)下面步驟創(chuàng)建一個項目，然后利用這個項目創(chuàng)建幾個 HTML 文件，來完成這個示例：
-
使用 File > New > Project 創(chuàng)建一個新的靜態(tài) web 項目。
-
選擇 Web\Static Web Project 并單擊 Next.
-
輸入您的項目名稱（例如，MyDojoExample ）。
-
單擊 New Runtime。
-
從列表中選擇 New Server，然后選擇 Create a new local server 復選框。
-
根據(jù)服務器列表中顯示輸入服務器名稱，然后輸入您想要發(fā)布文件的目錄名。通常，這應該是一個目錄位置，您可以在其中發(fā)布用戶的 web 文件。
-
在 Static Web Project 向?qū)е袉螕?Next。
-
讓上下文根路徑同項目名稱保持一致，并將 web 目錄文件夾命名為 WebContent。
-
單擊 Finish。Eclipse 為您創(chuàng)建了新項目。
當您向您的項目添加文件時，Eclipse 自動將文件發(fā)布到為服務器配置的目錄下。您可以通過在該項目中創(chuàng)建您的第一個 HTML 文件（是一個 index.html 文件）來了解這些，您需要修改該文件來包含實例所用的搜索框。
按照以下步驟創(chuàng)建新 HTML 文件：
- 在您的新項目中選擇 WebContent 文件夾，然后用備用鼠標按鈕打開上下文菜單。
- 從菜單中選擇 New > HTML file。
- 在 File name 字段輸入文件名，然后單擊 Next 來查看 HTML 模板選擇器。
- 對于這個示例，選擇 New XHTML File (1.0 strict) 選項，然后單擊 Finish 按鈕。
新文件看起來像清單 1 這樣。
清單1. 新 index.html 文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
</body>
</html>
|
現(xiàn)在，您已經(jīng)有一個靜態(tài) web 項目和一個 HTML 頁了，是時候向 HTML 頁中添加一個輸入控件了。HTML 文件包含一些 div 標記，定位輸入控件并使建議選項容易些。結(jié)果生成清單 2 所示的 HTML 文件。
清單 2. 有控件的 index.html 文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="wrapper">
<form>
<div id="search"><input id="searchBox" type="text"
maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></div>
<div id="suggestions"></div>
</form>
</div>
</body>
</html>
|
在這一點上，與空白版本有很大的區(qū)別。大部分工作可以通過使用 web 頁中的 JavaScript 代碼完成。
回頁首 包含 Dojo Toolkit
您可以以兩種方式包含 Dojo Toolkit：
- 使用一個公開托管（publicly hosted）的 Dojo 文件位置。
- 自己下載 Dojo Toolkit JavaScript 文件然后同您的代碼一并包含在其中。
哪個方法更好取決于您的需求。
使用一個公開托管文件
使用公開托管文件有兩個很好的理由：
- 使用一個內(nèi)容分發(fā)網(wǎng)絡（CDN）來簡單地托管文件，對您來說減少了本地跟蹤文件的需求。
- 您可以少部署一個文件。
使用一個公開托管的文件主要優(yōu)勢是，如果 CDN 不可用（這種情況未必會發(fā)生，但是也有可能）您將不需要任何控件。如果由于某種原因 CDN
關(guān)閉了，您的網(wǎng)站也就不起作用了。如果您的內(nèi)部 web 應用程序需要確保運行正常，考慮維護 Dojo 腳本文件來減少您應用程序的單點故障。
要從一個 CDN 中鏈接 Dojo 文件系統(tǒng)，修改您的 index.html 文件使其看起來如清單 3 所示。
清單 3. 包含到 Dojo CDN 位置的鏈接
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<script
src="http://ajax./ajax/libs/dojo/1.5/dojo/dojo.xd.js"
type="text/javascript"></script>
</head>
<!-- snipped... -->
</html>
|
下載和包含 Dojo Toolkit 基本文件
如果您想下載和包含 Dojo Toolkit 基本文件，而不是鏈接它，您可以從 參考資料 中鏈接的網(wǎng)站下載 Dojo JavaScript 代碼。下載完這個文件之后，您可以使用 File > Import 將其導入到 Eclipse 中的項目中。按照慣例，通常創(chuàng)建一個名為 js 或 script 的文件夾比較好，您不僅可以將您的 JavaScript 代碼放在其中，也可以將您下載的文件放在其中。
為了將您下載的文件包含到您的 Web 頁，像這樣修改 index.html，如清單 4 所示。
清單 4. 包含一個本地引用到已下載的 dojo.js
<script src="js/dojo.js" type="text/javascript"></script>
|
現(xiàn)在您有了一個基本 web 頁，您要準備添加更多的功能，通過添加調(diào)用服務的 JavaScript 代碼來完成。
回頁首 調(diào)用一個服務
現(xiàn)在您已經(jīng)創(chuàng)建了 index.html 文件，并將 Dojo JavaScript 文件鏈接到您的 index.html 文件了，是時候調(diào)用一個簡單服務，來為用戶提供建議選項了。
本文提供兩個不同的調(diào)用服務和得到結(jié)果的示例。第一個是一個簡單的服務，不一定要符合常見 RESTful web 服務 URL 習慣。REST
不是一個標準，但是有很多方法可以巧妙地獲取 URL，為客戶端和 RESTful web 服務提供一個較好的互操作性。第二個實例是一個使用
dojox.rpc.Rest 方法的介紹。
使用一個簡單服務
因為來自服務的響應根據(jù)查詢字符串進行改變，服務不需要您以一個動態(tài) web 應用程序技術(shù)寫入其中（參考 參考資料，了解更多關(guān)于動態(tài) web 應用程序的信息）。清單 5 中顯示的是一個簡單的 PHP 腳本，有一個名稱數(shù)組。根據(jù)用戶所提供的，從名稱列表中過濾出來，然后將它們添加到 Extensible Markup Language (XML) 響應。
清單 5. 使用 PHP 編寫一個簡單的服務
<?php
header("Content-type: text/xml");
$data = array(
"Bilbo Baggins",
"Frodo Baggins",
"Samwise (Sam) Gamgee",
"Meriadoc (Merry) Brandybuck",
"Peregrin (Pippin) Took");
$resultXML = '';
$resultsXML .= '<suggestions>';
foreach ($data as $d) {
$pattern = '/'.$_GET['s'].'/';
if (preg_match($pattern, $d)) {
$resultsXML .= '<item>'.$d.'</item>';
}
}
$resultsXML .= '</suggestions>';
print($resultsXML);
|
您可以以其他任何語言編寫一個簡單的腳本，返回一個類似的響應來測試 JavaScript 代碼。
從 Dojo Toolkit 調(diào)用 URL 并不是很容易。如清單 6 所示簡單地設置參數(shù)進行調(diào)用，然后將它們傳遞到服務。
清單 6. 為 dojo.xhrGet 設置參數(shù)
var args = {
url:"mockService.php?s=" + dojo.byId("searchBox").value,
handleAs:"xml",
preventCache:true,
load:function(data) {
// handle the data...
},
error:function(error) { target.innerHTML = "Error:" + error; }
|
這些參數(shù)將在表 1 中進一步說明。
表 1. dojo.xhrGet 參數(shù)
| 參數(shù) | 說明 |
|---|
| url | 此參數(shù)包括 URL（記住，這個 URL 不是一個 RESTful URL）。 | | handleAs | json、text 或 xml 之一。PHP 腳本使用 XML 響應，所以用在這里。 | | preventCache | 如果您不想緩存數(shù)據(jù)，使用 ture。緩存數(shù)據(jù)可以執(zhí)行得更快，但是，如果結(jié)果是完全自動化的，這也不可取。 | | load | 該回調(diào)函數(shù)在服務返回數(shù)據(jù)時執(zhí)行。 | | error | 該回調(diào)函數(shù)在出現(xiàn)錯誤時執(zhí)行。 |
如果已經(jīng)正確設置了參數(shù)，將它們傳遞到 dojo.xhrGet 方法。全部代碼如清單 7 所示。
清單 7. 全部 JavaScript 代碼
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title>Test web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<script
src="http://ajax./ajax/libs/dojo/1.5/dojo/dojo.xd.js"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// You could move all this code to a JavaScript file and include it...
dojo.require("dojox.xml.parser");
function update() {
if (dojo.byId("searchBox").value.length < 3 )
return;
var target = dojo.byId("suggestions");
var args = {
url:"mockService.php?s=" + dojo.byId("searchBox").value,
handleAs:"xml",
preventCache:true,
load:function(data) {
// handle the data...
},
error:function(error) { target.innerHTML = "Error:" + error; }
};
var ajaxCall = dojo.xhrGet(args);
}
//]]>
</script>
</head>
<body>
<div id="wrapper">
<form>
<div id="search"><input id="searchBox" type="text"
maxlength="2048" name="criteria" title="Search" onkeyup="update()" /></div>
<div id="suggestions"></div>
</form>
</div>
</body>
</html>
|
除了調(diào)用標準 Ajax 風格服務之外，您也要使用 Dojo Toolkit 調(diào)用 RESTful web 服務。
使用一個 RESTful 服務
除了用于發(fā)送請求的 HTTP 方法之外，大部分 RESTful web 服務的 URL 構(gòu)建方式都遵守為特定類型請求構(gòu)建 URL
的方式。如果您構(gòu)建一個符合這些傳統(tǒng)習慣的 RESTful 服務，您可以使用 dojo.rpc.Rest
對象為您進行調(diào)用。dojo.rpc.Rest 對象進一步簡化了傳統(tǒng)服務調(diào)用。
清單 8 是一個使用 Dojo Toolkit 調(diào)用 RESTful web 服務的示例。
清單 8. 使用 dojo.rpc.Rest 調(diào)用一個 RESTful web 服務
// Calling this access the URL hobbits/1 (see Table 2)
var service = dojox.rpc.Rest("hobbits");
service("1");
|
表 2 列出了固有的 RESTful URL 和 HTTP 動作的示例，應該同每個類型的服務相匹配。注意，不是每一個瀏覽器都支持所有 HTTP 方法，因此您應該根據(jù)您的需要進行測試和驗證，對于多數(shù)用戶，使用 GET 和 POST 方法可能是最佳選擇。
表 2. RESTful 傳統(tǒng) URL
| 動作 | HTTP 方法 | 示例 URL |
|---|
| 查找一個對象 | GET | http://www./hobbits/1 | | 查找所有對象 | GET | http://www./hobbits/ | | 刪除一個對象 | DELETE | http://www./hobbits/1 | | 創(chuàng)建一個對象 | POST | http://www./hobbits/ | | 更新一個新對象 | PUT | http://www./hobbits/1 |
如果您想創(chuàng)建一個 RESTful web 服務的全部實現(xiàn)，框架有助于指導您構(gòu)建符合 RESTful URL 習慣的 URL。參見 參考資料，尋找不同語言的各種框架的更多信息。
回頁首 精確地顯示結(jié)果
既然您將要使用 Dojo 代碼調(diào)用服務，您也可以更新 div 元素的內(nèi)容來包含查詢結(jié)果。這使得用戶可以根據(jù)其類型查看建議選項。
想要更新包含建議選項的 div 元素的值，使用 dojo.byId 方法通過 ID 獲取 div 的參考資料，并如清單 9 所示設置 innerHTML 屬性。dojo.byId 方法是傳統(tǒng) JavaScript 的 document.getElementById 方法的別名。
清單 9. 更新元素的內(nèi)容
// the full load function...
load:function(data) {
var rootEl = data.documentElement;
var resultHTML = "<ul>";
for (var i = 0; i < rootEl.childNodes.length;i++) {
resultHTML += "<li>" +
dojox.xml.parser.textContent(rootEl.childNodes[i]) +
"</li>";
}
resultHTML+="</ul>";
target.innerHTML = resultHTML;
},
|
現(xiàn)在，您的代碼已經(jīng)可以正常運行了，您可以在瀏覽器中查看您的 index.html 頁。當您輸入一個值時 — 例如 Bag
— 建議選項將自動出現(xiàn)在您的 div 元素中。盡管本文并不能涵蓋全部的，您也應該使用 Cascading Style Sheets (CSS) 使這些 div 整齊地排列在下拉框中，根據(jù)用戶的輸入提供建議選項。
回頁首 處理長期運行的服務
當從一個 web 瀏覽器處理長期運行服務時，主要關(guān)注兩方面的問題：
用戶體驗
在服務執(zhí)行時，如果在瀏覽器中沒有明顯的改變，用戶體驗將受長期運行服務的影響。如果您的 web 頁含有一個按鈕，可以進行一個 Ajax 或
RESTful
服務調(diào)用或者顯示結(jié)果，您應該利用這些瀏覽器來顯示用戶即將發(fā)生的事情。否則您將要冒這樣的風險，一個用戶多次提交表單或者您將對網(wǎng)站很不耐煩甚至離開。
為了應對用戶體驗問題，使用一個動畫（Dojo Toolkit 有針對這些的方法）或者禁用提交按鈕，使用戶不能多次提交。有了動畫視覺（例如，旋轉(zhuǎn)時鐘）
，用戶可以意識到將要發(fā)生什么，更愿意等待進程完成。
可靠性
期待長期運行的服務來使用 Ajax 調(diào)用可能有問題，但是它們可能是有效的示例。長期運行服務的示例是那些聚集數(shù)據(jù)、生成文檔或者存檔文件示例。
在這種情況下，簡單調(diào)用服務并等待 — 特別是如果服務要運行好幾秒，不是一個最佳實踐。如果您的連接是混亂的，或者您的瀏覽器關(guān)閉了，那么在服務完成時，您將不能依賴回調(diào)機制來觸發(fā)。
如果您可以控制服務，可以考慮向您的調(diào)用者返回一個惟一的限定符，使用一種后來向不同服務詢問請求狀態(tài)的方式。您的瀏覽器可以將這些數(shù)字放到本地的一個 cookie 存儲設備中，也可以讓瀏覽器和服務一起來保存用戶數(shù)量。
調(diào)用服務的這種方法允許您在服務器端開始長期運行的進程。在瀏覽器端，您可以對請求狀態(tài)使用輪詢來訪問服務層。（您可以對此使用 Dojo Toolkit's Timer 對象），該方法為用戶提供靈活性和穩(wěn)定性。
回頁首 結(jié)束語
除此之外，Dojo Toolkit 使您可以在您的 web 應用程序中進行 Ajax
調(diào)用，來提供 RIA 函數(shù)。不管是使用一個 CDN 或者是您自己下載 Dojo Toolkit 文件，您都可以利用預先寫入的且已測試的函數(shù)的優(yōu)勢。
Dojo Toolkit 使用 Ajax 和 RESTful web 服務提供調(diào)用純 web 服務的方法。這個工具包允許您處理 JSON、XML 和來自 Ajax 服務的文本響應。
參考資料 學習 獲得產(chǎn)品和技術(shù) 討論
|
