客户端将使用XMLHttpRequest 从REST服务检索JSON 对象。一旦检索到该对象，JavaScript. 代码将需要反序列化对象，然后遍历整个数组。看一下mapper.js，就可以看到 getLocationsAndMap 和 getLocationsAndMapCallback 函数完成了这一功能：

　   

// Gets the current locations from the REST service
// on the server and writes out the HTML that
// contains links for the map

function getLocationsAndMap() {
if (receiveReq.readyState == 4 ||
     receiveReq.readyState == 0)
{     
   // getD2DSites.html is a REST service
   // that returns the list of locations
   // as JSON
 
   receiveReq.open("GET", 'getD2DSites.html',
                   true);              
   receiveReq.onreadystatechange =
               getLocationsAndMapCallback;     
   receiveReq.send(null);      
} // end  if  
} // end  function

function getLocationsAndMapCallback() {
// state == 4 is when the response is complete
if (receiveReq.readyState == 4) {             
  // Deserialize the JSON response (eval() command)
  // This creates an array of location objects.
  var response = eval("("+request.responseText+")");
  // generate HTML listing the locations and update 
  //   the page DOM so the user will see the HTML
  var div = document.getElementById('loc_div');        
  div.innerHTML = '

Received ' +
   response.locations.location.length+' results.';

  for(i=0;i < response.locations.location.length; i++) {
        var city = response.locations.location[i].city;
        var anchor = ''; // TODO: we will fix this later
        div.innerHTML += '

'+ city + ' ' +
          anchor + loc + '
' + addr + '

';
  } // end  for loop
} // end   if (state == 4)
} // end   function

　　请注意， eval 调用将接收JSON 并对它进行计算，有效地构建一个可以导航的JavaScript数组。For 循环显示了如何在数组内遍历地理位置：

　　至此，您已经完成了这些工作：

　　创建一个静态的 REST 服务 HTML 文件

　　向HTML文件添加一个JSON 有效负载

　　编写代码通过eval()将JSON 重构为一个JavaScript. 对象

　　编写代码来循环遍历地址数组，使用新的HTML操纵DOM

　　现在，让我们来看如何在Google 地图中显示这些位置。

　　使用 REST 和Google 地图 API 来组装Mashup

　　实现REST 服务后，就可以开始构建mashup了。图1显示了mashup 的完整格式。用户可以单击按钮来获取位置，然后单击纽约的链接。请注意Google 地图是如何以街道地址位置为中心进行显示的。

使用 REST 和Google 地图 API 来组装Mashup

　　实现REST 服务后，就可以开始构建mashup了。图1显示了mashup 的完整格式。用户可以单击按钮来获取位置，然后单击纽约的链接。请注意Google 地图是如何以街道地址位置为中心进行显示的。

　　

　　                   图 1. mashup应用程序实例

　　图 2 显示的是运行ajaxmashup.googlepages.com 时本教程的演示的架构。

　　

　　                                图 2.演示程序的架构

　　第一步是定义ajaxGoogleMashup.html mashup 页面的结构。您需要三个主要结构元素：

　　允许用户调用您以上构建的REST 服务的按钮

　　保存REST 服务的占位符div 标记

　　地图的占位符div 标记

　查看下面的 HTML 片断来了解这一结构：

　　

   

          >
   

       
       

 

 
 

　　请注意，当用户按下按钮时，将触发一个onclick 事件。该事件连接到了前述getLocationsAndMap() 函数，该函数将调用针对REST 服务的XMLHttpRequest。您已经看到，getLocationsAndMapCallback() 函数之后会将服务响应从JSON 文本转换为注入到DOM 的HTML。

　　现在，您需要将地址组合到Google 地图中。首先，getLocationsAndMapCallback() 中的JavaScript. 代码会编写HTML ，因此每个地址都会有一个调用JavaScript. 函数的锚定标记。函数showAddress()和代码会传递所点击的位置地址。以上代码中getLocationsAndMapCallback()函数的 TODO注释替换为这行代码：