本文中將使用工具輕松構(gòu)建終極的Hello World mashup：Google地圖mashup……

　　Web開發(fā)的新紀(jì)元達(dá)到了頂峰，這一階段稱為 Web2.0。這一時期迎來了新一批原型化Web 應(yīng)用程序，包括blog、wiki和mashup。 Mashup是本教程論述的重點，您將了解到如何使用一組通用技術(shù)構(gòu)建一個示例 mashup 。這組技術(shù)包括 JavaScript、Ajax、REST、JSON 和Google地圖API。 作為 Web開發(fā)人員，了解如何結(jié)合使用這些工具很重要。

　　簡介

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

　　本教程分為三部分：

• 　　Web2.0工具箱
• 　　從一個REST 數(shù)據(jù)服務(wù)檢索方位
• 　　用 Google 地圖標(biāo)繪地址

　　第一部分介紹了我在第二部分和第三部分構(gòu)建 mashup 時所用的技術(shù)。

　　Web 2.0 工具箱

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

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

• 　　HTML
• 　　XML
• 　　瀏覽器和 Web 服務(wù)器的角色
• 　　HTTP 請求/響應(yīng)模型
• 　　現(xiàn)代編程語言，例如Java、JavaScript、PHP 和 C#

　　客戶端編程

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

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

　　JavaScript包含一種功能強大的事件機制，使得 JavaScript 能夠響應(yīng)瀏覽器中的用戶交互。我將使用事件響應(yīng)功能來構(gòu)建下文的mashup。學(xué)習(xí)HTML的人已經(jīng)見過以事件的形式表現(xiàn)的JavaScript 事件響應(yīng)機制，例如下面代碼中的 onclick 屬性：

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