利用 Domino V8 新特性開發 Mashup 應用

JSON 介紹

JSON（JavaScript. Object Notation）是一種更輕、更友好的 Web services 客戶端的格式引起了 Web 服務供應商的注意。

XML——這種用於表示客戶端與伺服器間資料交換有效負載的格式，這種標記語言已經在廣闊的軟體應用領域中佔據了主導地位。XML 與生俱來的語言無關性使之在軟體架構師心目中佔據著獨特的地位，但即便最著名的 XML 權威也不得不承認：在某些環境中，XML 的使用已經超出了它自身能力的極限。很多 Web 應用程式更新通常是通過 REST 風格 Web services 獲得 XML 資料，一旦被使用者的瀏覽器接收到，就需要整合到 HTML 頁面的總體佈局之中，我們處理 XML 資料通常是使用 DOM 實現的，採用 DOM 的複雜性源於其基於函式的根，這使得對資料樹的簡單修改或訪問都需要進行無數次方法呼叫。此外，眾所周知，DOM 在各種瀏覽器中的實現細節不盡相同，這一過程帶來更為複雜的程式設計模式，其跨瀏覽器相容性出現問題的可能性也大大增加。顯而易見：如何使一種標記語言輕鬆地整合到 HTML 頁面中以滿足簡便開發的要求？問題的答案就是：利用所有主流瀏覽器中的一種通用元件——JavaScript. 引擎。

讓我們通過一個 Domino 檢視資料，說明 XML 和 JSON 展現的不同結構，我們在伺服器上建立一個名為 Mashupdemo 資料庫，在該資料庫中我們建立一個名為 homedata 表單，其作用為輸入人員的地理位置資訊，然後建立一個展現資訊的檢視 vHomedata：

我們通過以下的 Domino URL 命令

http://hostname/map/mashuodemo.nsf/vHomedata?ReadViewEntries&Count=1

訪問 vHomedata 檢視，獲得一行資料的 XML 輸出：

 

    
        
            24.55 
        
        
            116.1 
        
        
            John 
        
    

這是大家比較熟悉的 Domino XML 格式資料，通過 Domino URL 命令 ReadViewEntries 輸出檢視 vHomedata 為 XML 格式，裡面內容包括每行資料的位置（viewentry position="1"），文件識別符號（unid="175C4B37CAFA54164825732C002EFB9D"），列的位置和列值（2" name="dname">）、資料型別和值（Samon），我們在解析它的時候一般用 DOM。Domino 8 擴充套件了 ReadViewEntries 命令的功能，其中加入了 Outputformat=JSON 這個引數，使檢視資料可以輸出為 JSON 這種格式，例如通過以下的 Domino URL 命令：

http://hostname/map/mashuodemo.nsf/vHomedata?ReadViewEntries&outputformat=JSON&Count=1

此命令把檢視 vHomedata 第一行資料輸出成 JSON 格式的檔案，內容為：

{"@toplevelentries": "4",
    "viewentry":
        [{"@position": "1",
            "@unid": "175C4B37CAFA54164825732C002EFB9D",
            "@noteid": "97A",
            "@siblings": "4",
            "entrydata": 
        [{"@columnnumber": "0",
            "@name": "locationx",
            "number": {"0": "24.55"}
        },
        {"@columnnumber": "1",
            "@name": "locationy",
            "number": {"0": "116.1"}
        },
        {"@columnnumber": "2",
        "@name": "dname",
        "text": {"0": "John"}
        }
]}]}

我們可以看出 XML 格式資料：

    John 

在 Domino 8 中轉換 JSON 格式資料，表現為

{"@columnnumber": "2",
    "@name": "dname","text": {"0": "John"}
}

在語法層面上，JSON 與其他格式的區別在於分隔資料的字元，JSON 中的分隔符限於單引號、小括號、中括號、大括號、冒號和逗號。乍看上去，使用 JSON 的資料分隔符的優點可能並不那麼明顯，但它們簡化了資料訪問。使用這些資料分隔符時， JavaScript. 引擎對資料結構（如字串、陣列、物件）的內部表示恰好與這些符號相同，那我們訪問 JSON 中資料就可以使用類似語法：homedata@dname[0]。

Mashup 介紹

更多 Mashup 資源 請訪問 developerWorks Mashup 資源中心。通過本專題，您將找到一系列的文章和教程，瞭解 Mashup 相關概念，理解 Mashup 應用與眾多 Web 2.0 技術之間的關係，以及學習 Mashup 應用的開發技術。

Mashup 是一種令人興奮的互動式 Web 應用程式，它利用了從外部資料來源檢索到的內容來建立全新的創新服務。它們具有第二代 Web 應用程式的特點，也稱為 Web 2.0。在本篇中我們通過地圖 mashup 的整合應用展現 DOMINO 8 如何方便地融入到 Web 2.0 的世界裡，在具體應用中人們蒐集大量有關事物和行為的資料，二者都常常具有位置註釋資訊。所有這些包含位置資料的不同資料集均可利用地圖通過令人驚奇的圖形化方式呈現出來。mashup 蓬勃發展的一種主要動力就是 Google 公開了自己的 Google Maps API。這彷彿開啟了一道大門，讓 Web 開發人員可以在地圖中包含所有型別的資料。

本例中，我們首先到 Google Map 站點 上申請一個 API 授權碼及設定對應的信任站點名稱 www.huangym.com。我們在資料庫 mashupdemo.nsf 中建一個 ajaxgooglemap 表單，如圖：

圖 2. 建立 ajaxgooglemap 表單

可以看到主要在 HTML 首頁內容的程式碼：

" 

"

其申明瞭 ditu.google.com 的授權號 key, 表單啟動觸發 onload() 方法。

我們在 JS Header 裡面加入下列幾個方法：

function load()
{
  var stringURL=
  'http://www.huangym.com/map/mashupdemo.nsf/vHomedata?readviewentries&outputformat=json';
  XHR = new ActiveXObject("Microsoft.XMLHTTP");
  oXHR.onreadystatechange = loadmap;
  oXHR.open('GET', stringURL, true);
  oXHR.send(null);
}

該方法在網頁開啟時會被自動呼叫，主要的功能是向儲存“homedata”的伺服器發出 ajax 請求，同時設定方法“loadmap”響應請求的結果。

在程式碼我們可以發現，所定義的 stringURL 是獲取“homedata”的 URL，其中加入了“outputformat=json”，這樣 Domino 是返回結果的時候就不是返回 XML，而是返回 json 結果。

有關 ActivexObject("Microsoft.XMLHTTP") 的更多資訊，請參考 Ajax 相關的文章。在這裡只給出程式碼的概要解釋：

oXHR = new ActiveXObject("Microsoft.XMLHTTP");
// 新建 ActiveObject 物件，為發起 ajax 請求做準備
oXHR.onreadystatechange = loadmap;
// 指定回撥函式的名字為 loadmap，當伺服器返回結果時由 loadmap 方法進行響應。
// 有關 loadmap 方法的具體實現在下面進行解釋
oXHR.open('GET', stringURL, true);
// 定義 ajax 請求的目標，就是以上定義好的 stringURL
oXHR.send(null);
// 傳送 ajax 請求

function loadmap() { 
    if (oXHR.readyState == 4) {
	    if (oXHR.status == 200) {
		    if (GBrowserIsCompatible()) {
			    map = new GMap2(document.getElementById("map"));
                map.addControl(new GSmallMapControl());
                map.addControl(new GScaleControl());
                eval("dataobj="+oXHR.responseText+";");
 
                for (j=0;j

方法 loadmap 作為回撥函式響應 ajax 請求的返回結果。主要功能是對返回結果進行判斷，如果返回結果不是錯誤訊息則對結果進行解析，將返回結果轉換成陣列，供 googlemap 物件顯示時使用。最後呼叫 switchlocation 方法，開始迴圈顯示返回結果中的不同地點。有關 switchlocation 方法在下面詳細解釋。

在 loadmap 方法中的前三行是對返回結果進行判斷。

從 map = new GMap2(document.getElementById("map")); 這一句開始對返回結果進行處理。

其中 GMap2 是 googlemap 定義好的類名，document.getElementById("map") 是獲取當前網頁中的 "map" 物件，這一物件是在 Domino 表單中指定的。

在 googlemap 物件生成後，則通過 addControl 方法對 googlemap 物件新增控制元件，如地圖的控制器等：

 map.addControl(new GSmallMapControl());
 map.addControl(new GScaleControl());

然後通過 eval 方法將 domino 返回的 json 結果轉變為物件。

eval("dataobj="+oXHR.responseText+";");

注意，這裡的 eval 方法是在 java script. 中與 json 結合的最好方法，該方法的作用是將引數中提供的字串作為一句 javascript. 語句解釋執行。這樣我們就可以通過字串操作動態生成 javascript. 程式碼。如以上這句就是將 oXHR.responseText 這個 Domino 返回的 Json 字串轉換成為名為 dataobj 的物件。

此後對 dataobj 物件進行遍歷，分別將第 1 列，第 2 列 , 第 2 列轉換成陣列 locationx，locationy，distext。

最後呼叫 switchlocation() 方法開始迴圈顯示地圖。

function switchlocation() {
    map.setCenter(new GLatLng(Number(locationx[i]), Number(locationy[i])), 7);
    map.openInfoWindow(map.getCenter(),document.createTextNode(distext[i]));
    if(i>=locationx.length-1) {
        i=0;
    } else {
        i++;
    }
    window.setTimeout(switchlocation,7000);
}

方法 switchlocation 主要是通過“window.setTimeout”方法實現定時呼叫，每 7 秒種呼叫一次 switchlocation。顯示不同的地點。其中變數 i 用於記錄當前顯示的行數，i 每迴圈都加 1，指向下一條記錄，當 i 大於等於陣列長度時，則將 i 至零，重新從第一行開始顯示。顯示過程中使用的方法有 map.setCenter（）用於指定地圖中心的經緯度。還有 map.openInfoWindow() 用於在地圖中心顯示文字資訊。

最後，如上所述，通過呼叫 window.setTimeout(switchlocation,7000) 設定定時器，在 7 秒種後重新呼叫方法 switchlocation。作到這裡我們的 Google Map 的應用雛形基本可以完工了，通過註冊的 Google 信任站點www.huangym.com訪問我們的 Domino 表單 ajaxgooglemap，URL 為：http://www.huangym.com/map/mashupdemo.nsf/ajaxgooglemap?OpenForm。效果如圖：

圖 3. 效果

這樣我們檢視記錄的資訊就在 Google Map 輪流顯示出來了。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/14751907/viewspace-588828/，如需轉載，請註明出處，否則將追究法律責任。