掌握 Ajax，第 11 部分: 服务器端的 JSON

文档选项 <!-- document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img alt="将打印机的版面设置成横向打印模式" height="16" src="//www.ibm.com/i/v14/icons/printer.gif" width="16" vspace="3" /></td><td width="122"><p><b><a class="smallplainlink" href="javascript:print()">打印本页</a></b></p></td></tr>'); //--> <noscript></noscript> <noscript></noscript> 打印本页 将此页作为电子邮件发送 <!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- this content will be automatically generated across all content areas --> <!--END RESERVED FOR FUTURE USE INCLUDE FILES--> 级别： 高级 Brett D. McLaughlin, Sr. ([email protected]), 作家兼编辑, O'Reilly Media, Inc. 2007 年 8 月 28 日 在 本系列最近发表的一篇文章中，您已经了解了如何将 JavaScript 对象转变成 JSON 格式。这种格式很容易用于发送（和接收）与对象甚至对象数组对应的数据。在 本系列 的最后一篇文章中，您将会学习如何处理以 JSON 格式发送到服务器的数据以及如何使用相同格式对脚本进行回复。 <!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES--> JSON 的真正价值 正如在 本系列上一篇文章 中所描述的那样，JSON 是适用于 Ajax 应用程序的一种有效格式，原因是它使 JavaScript 对象和字符串值之间得以快速转换。由于 Ajax 应用程序非常适合将纯文本发送给服务器端程序并对应地接收纯文本，相比不能生成文本的 API，能生成文本的 API 自然更可取；而且，JSON 让您能够处理本地 JavaScript 对象，而无需为如何表示这些对象多费心思。 developerWorks Ajax 资源中心 请访问 Ajax 资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何关于 Ajax 的新信息都能在这里找到。 XML 也可以提供文本方面的类似益处，但用于将 JavaScript 对象转换成 XML 的几个现有 API 没有 JSON API 成熟；有时，您必须在创建和处理 JavaScript 对象时格外谨慎以确保所进行的处理能与所选用的 XML 会话 API 协作。但对于 JSON，情况就大不相同：它能处理几乎所有可能的对象类型，并会返回给您一个非常好的 JSON 数据表示。 因此，JSON 的最大价值在于可以将 JavaScript 真的作为 JavaScript 而非数据格式语言进行处理。您所学到的所有有关使用 JavaScript 对象的技巧都可以应用到代码中，而无需为如何将这些对象转变成文本而多费心思。这之后，可以进行如下所示的简单 JSON 方法调用： String myObjectInJSON = myObject.toJSONString(); 现在就可以将结果文本发送给服务器了。 回页首 将 JSON 发给服务器 将 JSON 发给服务器并不难，但却至关重要，而且还有一些重要的选择要做。但是，一旦决定使用 JSON，所要做的这些选择就会十分简单而且数量有限，所以您需要考虑和关注的事情不多。重要的是能够将 JSON 字符串发送给服务器，而且最好能做到尽快和尽可能简单。 通过 GET 以名称/值对发送 JSON 将 JSON 数据发给服务器的最简单方法是将其转换成文本，然后以名称/值对的值的方式进行发送。请务必注意，JSON 格式的数据是相当长的一个对象，看起来可能会如清单 1 所示： 清单 1. JSON 格式的简单 JavaScript 对象 var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "[email protected]" }, { "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" } ], "authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ], "musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ] } 如果要以名称/值对将其发送到服务器端，应该如下所示： var url = "organizePeople.php?people=" + people.toJSONString(); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); 这看起来不错，但却存在一个问题：在 JSON 数据中会有空格和各种字符，Web 浏览器往往要尝试对其继续编译。要确保这些字符不会在服务器上（或者在将数据发送给服务器的过程中）引起混乱，需要在 JavaScript escape() 函数中做如下添加： var url = "organizePeople.php?people=" + escape( people.toJSONString() ); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); 该函数可以处理空格、斜线和其他任何可能影响浏览器的内容，并将它们转换成 Web 可用字符（比如，空格会被转换成 %20，浏览器并不会将其视为空格处理，而是不做更改，将其直接传递到服务器）。之后，服务器会（通常自动）再把它们转换回它们传输后的本来 “面目”。 这种做法的缺点有两个： 在使用 GET 请求发送大块数据时，对 URL 字符串有长度限制。虽然这个限制很宽泛，但对象的 JSON 字符串表示的长度可能超出您的想象，尤其是在使用极其复杂的对象时更是如此。 在跨网络以纯文本发送所有数据的时候，发送数据面临的不安全性超出了您的处理能力。 简言之，以上是 GET 请求的两个限制，而不是简单的两个与 JSON 数据相关的事情。在想要发送用户名和姓之外的更多内容，比如表单中的选择时，二者可能会需要多加注意。若要处理任何机密或极长的内容，可以使用 POST 请求。 利用 POST 请求发送 JSON 数据 当决定使用 POST 请求将 JSON 数据发送给服务器时，并不需要对代码进行大量更改，如下所示： var url = "organizePeople.php?timeStamp=" + new Date().getTime(); request.open("POST", url, true); request.onreadystatechange = updatePage; request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send(people.toJSONString()); 这些代码中的大部分，您都在 “ 掌握 Ajax，第 3 部分：Ajax 中的高级请求和响应” 中见过，应该比较熟悉，第 3 部分重点介绍了如何发送 POST 请求。请求使用 POST 而非 GET 打开，而且 Content-Type 头被设置为让服务器预知它能得到何种数据。在这种情况下，即为 application/x-www-form-urlencoded，它让服务器知道现在发送的是文本，正如它从常规的 HTML 表单中得到的一样。 另一个简单提示是 URL 的末尾追加了时间。这就确保了请求不会在它第一次被发送后即缓存，而是会在此方法每次被调用后重新创建和重发；此 URL 会由于时间戳的不同而稍微有些不同。这种技巧常被用于确保到脚本的 POST 每次都会实际生成新请求且 Web 服务器不会尝试缓存来自服务器的响应。 JSON 就只是文本 不管使用 GET 还是 POST，关键之处在于 JSON 就只是文本。由于不需要特殊编码而且每个服务器端脚本都能处理文本数据，所以可以轻松利用 JSON 并将其应用到服务器。假如 JSON 是二进制格式的或是一些怪异的文本编码，情况就不这么简单了；幸好 JSON 只是常规的文本数据（正如脚本能从表单提交中所接收到的数据，在 POST 段和 Content-Type 头中亦可以看出），所以在将数据发送到服务器时无需太费心。 回页首 在服务器上解释 JSON 一旦您编写完客户端 JavaScript 代码、允许用户与 Web 表单和 Web 页的交互、收集发送给服务器端程序以做处理所需的信息，此时，服务器就成为了应用程序（如果调用了异步使用的服务器端程序，则可能是我们认为的所谓的 “Ajax 应用程序”）中的主角。在此时，您在客户端所做的选择（比如使用 JavaScript 对象，然后将其转换成 JSON 字符串）必须要与服务器端的选择相匹配，比如使用哪个 API 解码 JSON 数据。 处理 JSON 的两步骤 不管在服务器端使用何种语言，在服务器端处理 JSON 基本上就需要两个步骤。 针对编写服务器端程序所用的语言，找到相应的 JSON 解析器/工具箱/帮助器 API。 使用 JSON 解析器/工具箱/帮助器 API 取得来自客户机的请求数据并将数据转变成脚本能理解的东西。 以上差不多就是目前所应了解的大致内容了。接下来，我们对每个步骤进行较为详细的介绍。 寻找 JSON 解析器 寻找 JSON 解析器或工具箱最好的资源是 JSON 站点（有关链接，请参阅 参考资料）。在这里，除了可以了解此格式本身的方方面面之外，还可以通过各种链接找到 JSON 的各种工具和解析器，从 ASP 到 Erlang，到 Pike，再到 Ruby，应有尽有。您只需针对自己编写脚本所用的语言下载相应的工具箱即可。为了让服务器端脚本和程序能够使用此工具箱，可以根据情况对其进行选择、扩展或安装（如果在服务器端使用的是 C#、PHP 或 Lisp，则可变性更大）。 例如，如果使用的是 PHP，可以简单将其升级至 PHP 5.2 并用它完成操作；在 PHP 这个最新版本默认包含了 JSON 扩展。实际上，那也是在使用 PHP 时处理 JSON 的最好方法。如果使用的是 Java servlet，json.org 上的 org.json 包显然就是个不错的选择。在这种情况下，可以从 JSON Web 站点下载 json.zip 并将其中包含的源文件添加到项目构建目录。编译完这些文件后，一切就就绪了。对于所支持的其他语言，同样可以使用相同的步骤；使用何种语言取决于您对该语言的精通程度，最好使用您所熟悉的语言。 使用 JSON 解析器 一旦获得了程序可用的资源，剩下的事就是找到合适的方法进行调用。比如，假设为 PHP 使用的是 JSON-PHP 模板： // This is just a code fragment from a larger PHP server-side script require_once('JSON.php'); $json = new Services_JSON(); // accept POST data and decode it $value = $json->decode($GLOBALS['HTTP_RAW_POST_DATA']); // Now work with value as raw PHP 通过该模板，可将获得的所有数据（数组格式的、多行的、单值的或 JSON 数据结构中的任何内容）转换成原生 PHP 格式，放在 $value 变量中。 如果在 servlet 中使用的是 org.json 包，则会使用如下代码： public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { StringBuffer jb = new StringBuffer(); String line = null; try { BufferedReader reader = request.getReader(); while ((line = reader.readLine()) != null) jb.append(line); } catch (Exception e) { //report an error } try { JSONObject jsonObject = new JSONObject(jb.toString()); } catch (ParseException e) { // crash and burn throw new IOException("Error parsing JSON request string"); } // Work with the data using methods like... // int someInt = jsonObject.getInt("intParamName"); // String someString = jsonObject.getString("stringParamName"); // JSONObject nestedObj = jsonObject.getJSONObject("nestedObjName"); // JSONArray arr = jsonObject.getJSONArray("arrayParamName"); // etc... } 可以参考 org.json 包文档（有关链接，请参阅 参考资料 部分）以了解详细信息。（注意：如果想要获得有关 org.json 或其他 JSON 工具箱的详细信息，可以给我发电子邮件。您的来信会有助于我决定将来大概写的内容！） 回页首 结束语 至此，您应该从技术角度对如何在服务器端处理 JSON 有了基本的把握。本篇文章和本系列的 第 10 部分 不仅提供了技术层面的帮助，而且还向您展示了 JSON 是一种多么灵活、强大的数据格式。即使您不会在每个应用程序中都使用 JSON，但优秀的 Ajax 和 JavaScript 程序员的工具箱中总少不了 JSON 以备不时之需。 我当然很希望能够分享您的 JSON 使用经验以及您对何种语言更善于在服务器端处理 JSON 数据的高见。您可以访问 Java 和 XML 新闻组（有关链接，请参阅 参考资料 部分）跟我联系。享受 JSON 和文本数据格式的乐趣吧。 参考资料 学习 您可以参阅本文在 developerWorks 全球站点上的 英文原文 。 掌握 Ajax 系列：阅读本系列以前的文章。第 3 部分 着重介绍了如何发送和接收 Ajax 高级请求和响应。 JSON 站点：有关 JSON 所有内容的集汇站，寻找 JSON 解析器和工具箱的最佳资源站点。 阅读 org.json 包 的 JavaDoc。 xml.com：最易于理解的在线资源之一，如果您还不是一名经验丰富的 XML 程序员，那么就从这里开始了解关于 XML 的一切吧！ “面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序”（Philip McCarthy，developerWorks，2005 年 9 月）：从 Java 的角度看看服务器端的 Ajax。 “面向 Java 开发人员的 Ajax: Ajax 的 Java 对象序列化 ”（Philip McCarthy，developerWorks，2005 年 10 月）：从 Java 的角度介绍如何通过网络来发送对象并与 Ajax 进行交互。 “使用 Ajax 调用 SOAP Web 服务，第 1 部分: 构建 Web 服务客户机”（James Snell，developerWorks，2005 年 10 月）：这是一篇相当高级的文章，它介绍了将 Ajax 与现有的基于 SOAP 的 Web 服务相集成的有关内容。 World Wide Web Consortium 上的 DOM 主页：了解所有 DOM 相关技术的起点。 DOM Level 3 Core Specification：了解核心 Document Object Model 的定义，从可用类型和属性直到在各种语言中使用 DOM 的方法。 The ECMAScript language bindings for DOM：希望在代码中使用 DOM 的任何 JavaScript 程序员都应该阅读这个规范。 “Ajax: A New Approach to Web Applications”：阅读这篇首创 Ajax 这个术语的文章。这是所有 Ajax 开发人员的必读文章。 Head Rush Ajax （Brett McLaughlin，O'Reilly Media, Inc.）：学习这篇文章中的思想，并将其牢牢印入脑海：Head First 风格。 Java and XML, Second Edition （Brett McLaughlin, O'Reilly Media, Inc.）：查看本文作者对 XHTML 和 XML 转换的讨论。 JavaScript: The Definitive Guide （David Flanagan，O'Reilly Media, Inc.）：深入探讨了处理 JavaScript 和动态 Web 页面的大量指导原则。即将推出的版本添加了关于 Ajax 的两章。 Head First HTML with CSS & XHTML （Elizabeth 与 Eric Freeman，O'Reilly Media, Inc）：了解关于标准化 HTML 和 XHTML 的更多内容，学习如何对 HTML 应用 CSS。 “XML 新手入门” 页：若想学习 XML，却又不知从何开始，可以访问 XML 专区中以 XML 为中心的更新资源。 developerWorks 上的 Ajax 资源中心：这是有关 Ajax 的一站式中心，浏览这里的资源，立即用 Ajax 进行开发。 讨论 通过参与 developerWorks blogs 加入 developerWorks 社区。 关于作者 Brett McLaughlin 从 Logo 时代就开始使用计算机。（还记得那个小三角吗？）近年来，他已经成为 Java 和 XML 社区最著名的作者和程序员之一。他曾经在 Nextel Communications 实现过复杂的企业系统，在 Lutris Technologies 编写过应用服务器，最近，他在 O'Reilly Media, Inc. 继续撰写和编辑这方面的图书。Brett 即将出版的新书 Head Rush Ajax 为 Ajax 带来了获奖的革命性 Head First 方法。最近的著作 Java 1.5 Tiger: A Developer's Notebook 是关于 Java 技术最新版本的第一本书。经典的 Java and XML 依然是在 Java 语言中使用 XML 技术的权威著作。

來自 http://www.ibm.com/developerworks/cn/web/wa-ajaxintro11.html