JSON解读完全发挥Ajax应用_H5之家 - 中国HTML5教程资源分享第一站

　　为了便于说明，我们已将这段代码将置入JSP(restservice.jsp)中。如果它真是一段程序，那么类似这样的代码也会出现在servlet或helper类中。 REST风格Web服务首先提取两个通过URL请求传递给它的输入参数，根据这些值过滤现有的地址簿以适应请求。过滤过地址簿后，即可开始循环检查Java映射中的每个条目。

　　您会注意到，在循环内部，json.org API被广泛用于将本地Java格式转化为JSON字符串。虽然仅使用了少量类(即JSONArray和JSONObject)，但API提供的转换方法相当广泛，甚至能将XML结构转换成JSON输出。但回到我们的Web服务，一旦循环遍历了所有条目，那么变量“result”会包含准备返回给请求方的地址簿的JSON同等部分。

　　既然已经生成了JSON输出，下面来看看等式的另一边：浏览器应用程序中JSON有效负载的使用。

　　JSON有效负载的使用

　　作为基于浏览器的客户端，我们的设计中大部分工作都是在HTML、JavaScript加上附加的JavaScript 框架下完成的。例如利用Prototype库轻松创建跨浏览器样式的Ajax调用。下面的清单包含了我们的应用程序的第一部分，以及相应的JavaScript函数。

<html>
<head>
<title> JSON Address Book </title>
<script type="text/javascript" src="prototype-1.4.0.js"></script>
<script type="text/javascript">
// Method invoked when user changes letter range
function searchAddressBook() {

// Select values from HTML select lists
var fromLetter = $F('fromLetter');
var toLetter = = $F('toLetter');

// Prepare parameters to send into REST web service
var pars = 'from=' + fromLetter + '&to=' + toLetter;
// Define REST web service URL
var url = 'restservice.jsp';

// Make web service Ajax request via prototype helper,
// upon response, call showResponse method
new Ajax.Request( url, { method: 'get', parameters: pars,
onComplete: showResponse });
}

</script>
</head>

　　首先导入了prototype库，该库用于促进对REST风格Web服务的Ajax调用。接下来是searchAddressBook()函数，当用户修改其下所示的HTML选择列表时，将会触发此函数。该函数被触发后，用户将会获得HTML选择列表中已选中的选项，并将其放入两个用于过滤地址簿的变量中，随后定义一个指向REST风格服务URL restservice.jsp的附加变量。

　　此方法中还包括借助原型函数new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse }); 的实际Ajax Web服务调用;表明了对相关URL的一个请求，其请求参数包含在pars中;最后一旦Ajax请求终止，即执行showResponse()。

　　下面以showResponse()为例说明用于评估JSON有效负载并将其放入HTML主体布局环境中的的必要代码。

// Method invoked when page receives Ajax response from REST web service
function showResponse(originalRequest) {
   // Get JSON values
   jsonRaw = originalRequest.responseText;
   // Eval JSON response into variable
   jsonContent = eval("(" + jsonRaw + ")");

   // Create place holder for final response
   finalResponse = "<b>" + jsonContent.addressbook.length +
                   " matches found in range</b><br/>";

   // Loop over address book length.
   for (i = 0; i < jsonContent.addressbook.length; i++) {
        finalResponse += "<hr/>";
        finalResponse += "<i>Name:</i> " + jsonContent.addressbook[i].name + "<br/>";
        finalResponse += "<i>Address:</i> " + jsonContent.addressbook[i].address.street + " -- " +
                          jsonContent.addressbook[i].address.city + "," +
                          jsonContent.addressbook[i].address.zip + ".<br/>";
        finalResponse += "<i>Telephone numbers:</i> " + jsonContent.addressbook[i].phoneNumbers[0] + " & " +
        jsonContent.addressbook[i].phoneNumbers[1] + ".";
   }

// Place formatted finalResponse in div element
document.getElementById("addressBookResults").innerHTML = finalResponse;
}

JSON解读 完全发挥Ajax应用

JSON解读完全发挥Ajax应用