PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

JSON解读 完全发挥Ajax应用

JSON解读 完全发挥Ajax应用

来源:PHP程序员站  作者:PHP程序员站  发布时间:2011-06-28
XML这种用于表示客户端与服务器间数据交换有效负载的格式,几乎已经成了Web services的同义词。然而,由于Ajax和REST技术的出现影响了应用程序架构,这迫使人们开始寻求`XML的替代品,如:JavaScript Object Notation(JSON)。 JSON 作为一种更轻、更友好的 Web services

为了便于说明,我们已将这段代码将置入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
JSON 入门指南
实例详解PHP serialize与JSON解析
PHP中JSON的应用
PHP中JSON技巧讲解
PHP json_encode函数进行中文转换
JSON Jquery Codeigniter 使用详解
在PHP使用json_encode
jquery JSON的解析方式
jQuery新版本加载json注意事项
jQuery插件—把xml转化为json插件


jQuery JSON插件json_encode and json_decode
JavaScript 解析 JSON 数据
json和xml比较
JSON压缩算法 JSON.hpack
Tags: JSON   ajax   应用  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号