jQuery 模板/视图引擎和 JSON 服务
4.96/5 (27投票s)
使用 jQuery、JavaScript 视图引擎以及通过 AJAX 调用由 JavaScript 代码访问提供 JSON 结果的 Web 服务来创建纯 JavaScript 应用程序的基本概念。
引言
本文将介绍一种纯客户端应用程序的开发模型，其中所有处理逻辑都使用 jQuery 实现，信息直接通过客户端上的 JavaScript 视图引擎呈现给用户。在此应用程序模型中，除了提供数据的 Web 服务外，没有服务器端代码。客户端和服务器端代码之间的唯一通信是通过提供数据的 AJAX 调用完成的，所有处理都在客户端代码中完成。此模型最适合 JavaScript 插件，但也可应用于纯 JavaScript 应用程序。
JavaScript 视图引擎是 Web 开发中一种新颖有趣的概念。经典的 Web 应用程序开发在向用户显示页面时使用相同的逻辑——应在客户端浏览器中显示的内容是在服务器端生成的，然后将 HTML、CSS、JavaScript 和其他内容发送到浏览器并呈现给用户。如果我们看一下标准的 Model-View-Controller 模型，应用程序会从某些持久存储（Model）获取数据，执行一些处理（Controller），然后将数据传递给某个渲染组件（View），在那里渲染模型。无论服务器端使用什么技术（ASP.NET、J2EE、PHP），这个逻辑或多或少地应用于所有应用程序框架。
这种方法的逻辑是基于这样一个假设：我们有强大且可扩展的服务器、服务器场、集群或云来处理任何数量的请求，而客户端浏览器很弱，不应该有太多处理。然而，考虑到客户端计算机已变得更加强大，浏览器也越来越快，您可能会考虑将一些逻辑转移到浏览器。如果您正在使用 jQuery，处理逻辑封装在执行浏览器操作的 jQuery 插件中。JavaScript 视图引擎为 Web 应用程序开发引入了一个新概念。使用 JavaScript 视图引擎，您可以在浏览器中直接生成视图，而不是在服务器上。如果使用 JavaScript 视图引擎，服务器端组件（Controllers）会发送以 JSON 格式表示的 JavaScript 对象（这些 JSON 对象就是 Models），然后在浏览器中渲染这些对象（在这种情况下，浏览器就是 View 组件）。客户端代码和服务器端代码之间的通信通过 AJAX 调用执行。有许多 JavaScript 视图引擎，例如 jQuery template、Pure、noTemplate、jsTemplate、Populate，它们可用于将 JSON 转换为 HTML——在本文中，我们将使用 loadJSON 插件。
客户端视图引擎的通用用法将在以下示例中展示。我将假设以下 JavaScript 是从服务器发送的，并在客户端用作模型
var data = {
"Name":"Emkay Entertainments",
"Address":"Nobel House, Regent Centre",
"Contact":"Phone"
}
这个 JavaScript 对象可以直接从服务器端生成，通过 Web 服务调用返回，或者通过某个 AJAX 调用加载。为了在浏览器中显示这个对象，我们需要某种模板——以下模板可与 loadJSON 插件一起使用
<div id="data">
<h1 id="Name"></h1>
<label for="Address">Address:</label>
<span id="Address"></span>
<label for="Contact">Contact by:</label>
<span id="Contact"></span>
</div>
在此模板中，我们拥有与 JavaScript 对象属性同名的类。jQuery loadJSON 插件将 JavaScript 对象与 HTML 元素的类、ID 和名称进行匹配，并通过以下调用在 JavaScript 代码中将 JSON 对象加载到模板中
("#data").loadJSON(data);
此调用的结果是一个已填充了 JavaScript 对象信息的模板。下面显示了一个示例
<div id="data">
<h1 id="Name">Emkay Entertainments</h1>
<label for="Address">Address:</label>
<span id="Address">Nobel House, Regent Centre</span>
<label for="Contact">Contact by:</label>
<span id="Contact">Phone</span>
</div>
有关 loadJSON 插件的更多详细信息，请访问该插件站点。我在“在 ASP.NET MVC 中使用 JavaScript 视图引擎”一文中描述了如何在 ASP.NET MVC 应用程序中使用 JavaScript 视图引擎，其中我描述了如何生成列表、显示详细信息、填充用于编辑的表单或生成分层报告。如果您想了解 JavaScript 视图引擎的用法，可以参考这篇文章。在本文中，我将介绍一种使用 JavaScript 引擎的新概念——直接在浏览器中与第三方应用程序集成。
背景
JavaScript 视图引擎使您能够创建功能齐全的客户端应用程序，而无需服务器端生成 HTML 的代码。如果您使用 JavaScript 视图引擎和 AJAX，您可以查询返回客户端可处理响应的 Web 服务。如果您有提供 JSON 格式信息的公共 Web 服务，您可以创建纯 JavaScript 代码来调用该服务，并使用 JavaScript 视图引擎直接在浏览器窗口中生成内容。从客户端代码使用 Web 服务的概念如图所示
尽管所有操作都在客户端完成，但您仍需要一个 Web 服务器来放置页面，并通过标准的 HTTP GET 或 POST 请求在浏览器中加载。Web 服务器应返回 Web 页面的初始 HTML。页面加载后，使用 JavaScript 视图引擎的应用程序就可以从 Web 服务中获取所有必要的信息。使用 AJAX 调用，您可以将请求发送回服务器甚至第三方服务，获取响应，并使用 JavaScript 视图引擎在浏览器窗口中显示它。如果 AJAX 调用发送到原始服务器，将返回标准的 JSON 对象；但是，如果 AJAX 调用发送到其他服务器，则应使用 JSONP 协议（您可以在下面找到有关 JSON/JSONP AJAX 调用的更多信息）。
如您所见，一旦页面在浏览器中加载，AJAX 就是客户端和服务器之间的基本通信协议。
在本文中，我们将使用 Bing Maps 作为公共服务，并演示如何创建一个纯 JavaScript 应用程序，该应用程序使用 AJAX 调用 Bing Maps，获取 JSON 响应，并在页面上显示。为了将 JSON 转换为 HTML，我们将使用 loadJSON 插件，但也可以使用任何其他视图引擎。如果我们使用 MVC 模型来描述应用程序结构，在这种类型的应用程序中，我们有以下组件
- 模型 - 模型表示从远程服务获取的信息结构。在此示例中，模型是从 Bing Maps Web 服务检索到的 JSON 对象。模型对象中的信息将显示给浏览器中的用户。
- 控制器 – 在此应用程序模型中，控制器也移动到了客户端。Controller 使用 jQuery 库实现了功能，该库响应客户端事件，从服务中获取模型数据，并将它们发送到视图引擎。
- 视图 是 JavaScript 视图引擎，它根据 JSON 模型生成 HTML。在此示例中，loadJSON 插件用作视图引擎。
如您所见，这是胖客户端应用程序的应用程序模型，其中控制器和视图都实现为 JavaScript 组件。在此代码示例中，我们将创建一个具有以下功能的 JavaScript 应用程序
- 它将使用户能够通过关键字搜索位置——结果将显示在列表和地图上。
- 用户将能够将任何结果定位到地图中心。
- 用户将能够调整地图的缩放级别。
Bing Maps REST API
Bing Maps 提供了一组 Web 服务，您可以用来搜索地址、生成地图、显示两点之间的路线等。您唯一需要的是一个 Bing Maps 密钥，可以在 Microsoft Bing Maps 站点（免费）上获取。获得密钥后，您可以向 Bing Maps 服务器发送各种查询。Bing Maps 提供 SOAP 和 REST Web 服务。在此示例中，我们将使用 Bing Maps 提供的 REST Web 服务，因为它们可以轻松地与 JavaScript 代码集成（SOAP Web 服务更适合服务器端调用）。您可以发送到 Bing Maps REST Web 服务的某些请求的示例是
- 如果您想通过地址或关键字查找对象，可以打开以下 URL： http://dev.virtualearth.net/REST/v1/Locations/US/WA/98052/ Redmond/1 Microsoft Way?o=xml&key=BingMapsKey。
- 您还可以通过以下调用获取某个区域的地图： http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/47.619048,-122.35384/15?mapSize=500,500&pp=47.620495,-122.34931;21;AA&pp=47.619385,-122.351485;;AB&pp=47.616295,-122.3556;22&mapVersion=v1&key=BingMapsKey。
如上所述，您唯一需要的是一个 Bing Maps 密钥，应将其替换为上面示例中的 BingMapsKey。我将不详细介绍 Bing Maps REST API，但您可以在 此链接 找到更多信息，您还可以找到更多示例。
您可以使用任何其他公共服务替换 Bing Maps——唯一的先决条件是该服务支持 JSONP 协议。
使用 AJAX 调用调用服务
一旦您知道可以从外部 Web 服务（此处为 Bing Maps）获取什么，您就需要向该服务发出 AJAX 调用。jQuery 提供了一种简单的方法来使用以下代码向服务器端页面发送 AJAX 请求
$.ajax({
url: "<<URL>>",
success: function (data) { }
});
您应该将真正的 Web 页面或 Web 服务地址放在 <<URL>> 的位置，并且如果请求成功，将调用 success 函数。
当您向加载您页面的服务器发出 AJAX 调用时，这效果很好。但是，如果 URL 是第三方站点，浏览器会阻止该调用。在大多数浏览器中，不允许跨站点 AJAX 调用，AJAX 调用的结果将是一个空字符串。但是，如果您使用 JSONP 协议，有一种方法可以执行跨站点 AJAX 调用。以下列表显示了使用 JSONP 调用 URL 的 jQuery 示例
$.ajax({
url: "<<URL>>",
dataType: "jsonp",
jsonp: "jsonp",
success: function (data) { }
});
如果服务器端应用程序接受 JSONP 调用，即使它是跨站点调用，也将调用 success functional。您可以在 JSONP、jQuery 站点上找到有关创建 JSONP 请求的更多信息。Bing Maps 服务支持 JSONP 协议，因此可以在此示例中使用。
将响应加载到页面
一旦您执行了 AJAX 调用并从服务器端获取了 JSON 对象，您就可以使用 JavaScript 视图引擎（此处为 loadJSON 插件）将其加载到模板中。如上所述，如果您有一个与 JSON 结构匹配的模板，您可以使用以下代码轻松地将其加载到页面中
$("#template").loadJSON(data);
此代码应放在 AJAX 调用的 success handler 中。JSON 对象加载到页面后，您可以将事件处理程序附加到元素，并执行其他 AJAX 调用以获取新信息（如果需要）——无需任何服务器端代码。本节介绍了使用 JavaScript 视图引擎与第三方公共服务的用法的基本概念。在下一节中，将展示一个如何使用纯 JavaScript 逻辑创建简单的 Bing Maps 应用程序的示例。
Using the Code
此示例演示了如何使用 loadJSON 插件生成一个简单的 Bing Maps 界面。请注意，这只是一个案例研究，展示了如何使用 JavaScript 视图引擎集成第三方数据——如果您需要 Bing Maps 界面，最好使用现有的组件，例如 Bing Maps JavaScript 控件或某个 jQuery Bing Maps 插件。
在此示例中，我将创建一个简单的应用程序，该应用程序使用户能够根据查询搜索位置，在 HTML 列表和地图上显示结果，并允许一些简单的地图交互（设置地图中心、放大和缩小）。显示的搜索结果如图所示
列表和地图显示了所有符合搜索条件的地点；地点的坐标放在链接中，当您点击链接时，选定的地点将位于中心。您可以在 loadJSON 演示页面上看到此应用程序的实时版本。以下各节描述了用于实现此示例的模型、视图和控制器代码。
模型
如上所述，模型是 Bing Maps 服务返回的 JSON 对象。以下列表显示了当执行一个返回位置的查询时，Bing Maps 服务返回的 JSON 代码
{
"brandLogoUri" : "http://dev.virtualearth.net/Branding/logo_powered_by.png",
"resourceSets" : [ {
"resources" : [ {
"name" : "Regent Street, London NW10 5",
"point" : { "coordinates" : [ 51.528781000000002,-0.216583] }
},
{ "name" : "Regent Street, London W1S 2",
"point" : { "coordinates" : [ 51.511755000000001,-0.139491] }
},
{ "name" : "Regent Street, London W4 3",
"point" : { "coordinates" : [ 51.488630999999998,-0.28262900000000002] }
}
]
} ]
}
在 resources 数组中放置了位置对象列表，其中包含位置名称和该位置的点。Point 包含一个坐标对象，该对象具有纬度和经度信息。此信息结构将使用视图引擎加载。
视图
视图负责用户界面，如果您使用 JavaScript 视图引擎，这将是纯静态 HTML。在此示例中，我们需要一个表单，用户可以在其中输入地址并运行搜索。这是以下列表所示的 HTML 代码
<div id="searchDiv">
<label for="searchBox">Search: </label>
<input id="searchBox" /><button id="search">Search</button>
</div>
当用户进行搜索时，从 Bing Maps 服务返回的 JSON 结果将被加载到模板中。HTML 模板的结构匹配 JSON 对象的结构。此示例中使用的 HTML 模板如下列表所示
<div id="data" style="display:none">
<img src="#" id="brandLogoUri" />
<div id="copyright"></div>
<div id="slider"></div>
<img src="#" id="searchmap" />
<ol class="resourceSets">
<li class="resources">
<span class="name"></span>
<span class="point">
(<a href="#" class="coordinates">
<span rel="0"></span>,<span rel="1"></span>
</a>)
</span>
</li>
</ol>
<a href="BingMapsSearch.html">New search</a>
</div>
在 HTML 结构中，可以找到具有类名 brandLogoUrl、name 的空元素，以及将加载 JSON 属性的坐标。具有类名 resourceSet 和 resource 的元素仅用于匹配 JSON 对象的结构。在类名为“point”的元素中，放置了两个带有 rel 属性 0 和 1 的元素，分别用于放置坐标数组的第一个和第二个元素。在此结构中，可以加载表示模型的 JSON 对象中的元素。JSON 对象将使用以下 JavaScript 调用加载到模板中
$("#data").ladJSON(data);
变量 data 将作为 Bing Maps AJAX 调用的响应返回。
控制器 (Controller)
控制器在客户端作为一组 jQuery 事件处理程序实现。在此应用程序中，控制器具有以下功能
- 查找匹配搜索查询的位置，并在列表和地图上显示结果
- 将一些返回的位置设置到地图中心
- 放大和缩小地图
根据查询查找位置
当用户在 searchBox 文本框中输入地址并按下搜索按钮时，将向 Bing Maps 发送一个带有查询和身份验证密钥的 AJAX 调用。当请求成功完成时，AJAX 调用的结果将加载到模板中，搜索表单将被隐藏，然后显示模板。此外，地图的中心将被设置，地图也将被显示。此操作的代码如下列表所示
$("#search").click( function () {
$.ajax({
url: "http://dev.virtualearth.net/REST/v1/Locations",
dataType: "jsonp",
data: {
key: key,
q: $("#searchBox").val()
},
jsonp: "jsonp",
success: function (data) {
$("#searchDiv").hide();
$("#data").loadJSON(data).fadeIn("slow");
center = $($(".point .coordinates")[0]).text();
showMap();
}
});
});
在 AJAX 调用中，会发送在 searchBox 文本输入框中输入的值，以便 Bing Maps 服务可以返回匹配此搜索查询的位置。最重要的处理放在 success handler 中。请求成功完成时，将隐藏搜索框，JSON 结果将加载到模板中并在页面上显示，将找到第一个点的坐标并将其设置为地图中心，然后调用显示地图的函数（该函数将在稍后描述）。变量 center 是全局定义的变量，用于本节描述的所有函数中。
设置地图位置
在此示例中，当用户单击任何包含坐标的链接时，选定的位置将作为地图中心。在类名为“coordinates”的链接中加载每个位置的坐标，因此当用户单击其中任何一个链接时，文本将设置为地图中心，如下列表所示
$("a.coordinates").live("click", function(event){
center = $(this).text();
showMap();
});
设置完 center 变量后，将使用 showMap() 方法刷新地图。变量 center 与前一个函数中使用的变量相同。
调整图像缩放级别
在此示例应用程序中，用户可以更改地图的缩放级别。更改缩放级别可以使用 jQuery UI 滑块，用户可以在 1 到 19 之间更改缩放级别的值。用于设置 jQuery UI 滑块的代码如下列表所示
$( "#slider" ).slider({
value:12,
min: 1,
max: 19,
step: 1,
slide: function( event, ui ) {
zoom = ui.value;
showMap();
}
});
滑块放置在 ID 为“slider”的空 DIV 中，并初始化为 jQuery UI 滑块控件，其值范围从 1 到 19（这些设置为缩放级别）。当滑块的值在 slide 事件处理程序中更改时，zoom 值将设置为滑块的当前值，然后再次显示地图。变量 zoom 定义为全局变量。
用于显示地图的实用函数
jQuery 代码的最后一部分是显示地图的实用函数。函数如下列表所示
function showMap(){
var pushpins = "";
var i = 1;
$("a.coordinates").each(function(){
pushpins += "&pp="+$(this).text()+";;"+(i++); } );
$("#searchmap").attr("src",
"http://dev.virtualearth.net/REST/V1/Imagery/Map/road/"+center+"/"+
zoom+"?mapSize=600,400&ml=TrafficFlow&mapVersion=v1&key="+
key+pushpins);
}
此函数获取链接中的所有坐标，并格式化将在地图上放置的图钉。全局变量 center 和 zoom 在前面的函数中设置。通过将图像的 src 属性设置为返回带有 Bing Maps 服务器图钉的图像的 URL 来显示地图。
结论
我在本文中展示了如何使用 JavaScript 视图引擎创建使用第三方服务（此处为 Bing Maps）的纯 JavaScript 组件。视图引擎使您可以将所有处理转移到客户端，这非常适合创建 UI 组件，例如应根据 JSON 数据生成 HTML 的 jQuery 插件。视图引擎使您可以轻松处理 HTML 生成，并专注于插件或客户端代码的逻辑。
这里展示了使用 jQuery 创建胖客户端 JavaScript 应用程序或插件的基本概念，进行到外部站点的跨站点调用，以及使用 loadJSON JavaScript 视图引擎在客户端生成视图。这种新的应用程序模型与所有内容都在服务器端生成的经典服务器端模型不同。考虑到客户端计算机随着浏览器速度的加快而变得更加强大，并且可以处理大量 JavaScript 处理，如果这能提高整体应用程序的性能，那么将一些处理转移到客户端是合理的。
尽管本文展示了如何将 Bing Maps 服务集成到您的站点中，但这并不是使用 Bing Maps 的指南。如果您想将 Bing Maps 集成到您的站点中，您应该使用类似 Bing Maps AJAX Control, Version 7.0 的东西。如果您想创建自己的插件，或者可能需要 Bing Maps 控件更简单或更自定义的外观，您将使用本文描述的代码。