Ajax支持的Google地圖 MASHUP教程

Web 開發的新紀元達到了頂峰，這一階段稱為 Web 2.0。這一時期迎來了新一批原型化Web 應用程序，包括blog、wiki和mashup。 Mashup是本教程論述的重點，您將了解到如何使用一組通用技術構建一個示例 mashup 。這組技術包括 JavaScript、Ajax、REST、JSON 和Google地圖API。 作為 Web 開發人員，了解如何結合使用這些工具很重要。在本教程中，我將使用這些工具輕松構建終極的 Hello World mashup：一個Google地圖mashup。
　　簡介

　　所謂Mashup，就是在將一些數據源和服務組合到一起創建一種新功能或以某種方式添加新值的時候創建的。本教程將介紹如何創建一個Google地圖mashup —— 將 Google 地圖提供的地圖數據與您自己創建的方位數據服務相結合。

　　本教程分為三部分：

　　Web 2.0工具箱

　　從一個REST 數據服務檢索方位

　　用 Google 地圖標繪地址

　　Web 2.0 工具箱

　　Web 開發人員很清楚技術總是在不斷地進步，技能在幾年之內就會變得過時。我對此并無異議：創新使得 Web 開發變得有趣。新主張、新工具和新技術讓我們能夠在更短的時間內構建更出色的系統。本節將介紹一些您可能用過也可能沒有用過的技術。如果這些對于您來說是新技術，可以將本小節的內容看作快速入門，在此之后，我鼓勵您繼續深入學習。下文所述內容并不完整，在某些方面過于簡略，這樣做是為了傳達重要的概念。

　　雖然我要討論多種技術，但是本教程也需要從頭說起。我假定您熟悉以下概念和Web 技術：

　　HTML

　　XML

　　瀏覽器和 Web 服務器的角色

　　HTTP 請求/響應模型

　　現代編程語言，例如Java、JavaScript、PHP 和 C#

　　客戶端編程

　　Web 2.0 應用程序的特征是高度的交互性——它像傳統桌面應用程序那樣進行響應。傳統 Web 應用程序一成不變的外觀和刷新整個頁面的長時間中斷都無法滿足這一期望。 因此，Web 2.0 應用程序利用了客戶端編程技術來幫助應用程序獲得更快的響應速度。兩種最流行的客戶端技術是 JavaScript 和 Adobe Flex。 這兩種技術都具備令人嘆服的特性，在應用上都取得了巨大的成功。然而，為了縮小本教程的討論范圍，在構建 mashup 的時候，我僅考慮JavaScript 方法。

　　JavaScript 技術成熟。它是一種強大的客戶端編程語言，已經流行數年。隨著標準的不斷改進，跨瀏覽器支持顯著進步，使得它成為一種可行的方法。對于那些沒有接觸過這門語言的人來說，會發現它的基本代碼構造和其他主流語言(例如 Java)類似。

　　JavaScript包含一種功能強大的事件機制，使得 JavaScript 能夠響應瀏覽器中的用戶交互。我將使用事件響應功能來構建下文的mashup。學習HTML的人已經見過以事件的形式表現的JavaScript 事件響應機制，例如下面代碼中的 onclick 屬性：

<onclick="javascript:myEventHandler(); return true"
href="myURL.html">My Link</a>


JavaScript 在瀏覽器中執行時的另一個重要功能就是能夠操縱 HTML 文檔對象模型(HTML Document Object Model，DOM)。該功能允許 JavaScript 代碼在 HTML 頁面加載后以編程方式改變頁面內容。DOM 操縱是提高Web 2.0 應用程序交互性時使用的重要功能。在 Web 應用程序中，重置 HTML 中一個元素所包含的文本很常見，例如：



// find the tag with id 'greet_div'
var div = document.getElementById('greet_div');
div.innerHTML = 'Hello ' + name;



　　最后，還需提到的JavaScript 功能就是向后端服務器發出帶外 HTTP 請求。通過此功能， JavaScript 可以發出不會導致頁面重載或改變瀏覽器地址欄的請求。該功能通常被稱為Ajax，但是實現該功能的實際上是XMLHttpRequest，它是調用 HTTP 請求的JavaScript 類。HTTP 請求通常是異步的，這要求編程人員定義一個回調函數，在接收響應時調用。

　　

var request = new XMLHttpRequest();
function invokeAjax() {
request.open("GET", 'ajaxTarget.html', true);
request.onreadystatechange = ajaxCallback;
request.send(null);
}