JSON

详谈基于JSON的高级AJAX开发技术(3)

字号+ 作者:H5之家 来源:H5之家 2015-10-31 12:27 我要评论( )

以下是引用片段: {"Car":{"color":"#333","Wheel":{"color":"#000"}}} 作为一个请求JSON文件的示例,当我们点击下列链接时将请求这个串行化的Auto对象: 以下是引用片段: <a href="javascript:AjaxUpdater.Update(’GET’, ’json/data.js’, displayR

以下是引用片段:
{"Car":{"color":"#333","Wheel":{"color":"#000"}}}

  作为一个请求JSON文件的示例,当我们点击下列链接时将请求这个串行化的Auto对象:

以下是引用片段:
<a href="javascript:AjaxUpdater.Update(’GET’, ’json/data.js’, displayResponse);">Get remote JSON</a>

  一旦接收到响应消息,我们的称为displayResponse回调方法就会被激活,然后,我们就能够反串行化并开始使用这些对象:

以下是引用片段:
<script type="text/javascript">
function displayResponse()
{
 if(Ajax.checkReadyState(’loading’) == "OK")
 {
  var Auto = Ajax.request.responseText.parseJSON();
  document.getElementById("body").innerHTML += "
<b>Remote JSON unserialized</b>";
  document.getElementById("body").innerHTML += "
Car color: "+Auto.Car.color;
  document.getElementById("body").innerHTML += "
Wheel color: "+Auto.Car.Wheel.color;
 }
}
</script>

  这是相当激动人心的一部分!一旦我们拥有了该responseText,我们就能够简单地使用JSON分析器中的parseJSON方法来从串行化的数据中重建我们的Auto对象。借助于这个新的Auto对象,我们就可以调用相应的子对象。这个特征允许我们在服务器和客户端来回发送对象—而不必进行大量的分析工作,然而在以前标准的XML响应情况下我们将却必须这样做。这样以来,我们就可以创建出能够基于AJAX技术来保留自身状态的客户端JavaScript对象

 

  本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。

  一、引言

  毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将详细讨论如何创建一组对象(在其它语言中经常被当作一个包),如何把这些对象串行化为JSON以发送到服务器端,以及如何把服务器端JSON反串行化为客户端JavaScript对象。

  提示:你可以在Douglas Crockford的网站上找到本文中使用的JSON分析器。

  在继续阅读前,本文假定你已经掌握了JavaScript技术并且了解如何创建一个基本的AJAX引擎,并经由AJAX技术向服务器端发出请求和从服务器端接收响应。为了更好地理解本文中示例,你需要下载本文相应的源码文件。

  二、开始

  为了进一步抽象我们的AJAX请求并有助于我们以后在不同的应用程序间共享AJAX引擎代码,本文使用了一个我自己创建的AJAX引擎。为了使用这个引擎,我们简单地导入三个JavaScript文件并且向一个名为AjaxUpdater的对象发出请求。然后,由该引擎来负责处理其它任务,包括把响应代理到在该请求中指定的回调方法中。下面的示例展示了我们如何使用这个引擎发出请求以及导入相关的文件:

以下是引用片段:
<script type="text/javascript"src="javascript/model/Ajax.js"></script>
<script type="text/javascript" src="javascript/model/HTTP.js"></script>
<script type="text/javascript" src="javascript/model/AjaxUpdater.js"></script>
<script type="text/javascript">
document.load = AjaxUpdater.Update(’GET’, URL, callback);
</script>

  首先,让我们来讨论JavaScript对象。

  三、JavaScript对象

  JavaScript以前经常被误解,似乎它主要用于实现客户浏览器端图形效果。其实,JavaScript是一种强有力的语言,特别当它与AJAX以及一个应用程序的服务器端相结合时;但是,即使在客户端,JavaScript也能够实现远比你预料得多的多的功能。面向对象的JavaScript就是一个示例,它能够使我们创建对象,扩展内在对象,甚至能够把我们的对象创建成包以达到更容易的管理之目的。

  在本文示例中,我们将创建三个对象:Auto,Car和Wheel。其中,每一个都是简单的对象;在此,我们仅使用它们来展示如何创建一个基本包。

  首先,Auto对象被声明为一个新的对象:

以下是引用片段:
  var Auto = new Object();

  注意,这个Auto对象将用作Car对象的父类。因此,Car对象将成为Auto对象的一个属性,只不过它被分离到另一个文件中以更易于管理(这个概念经常被用于其它面向对象的语言中,但是在JavaScript中却并不经常提起它)。下面是这个Car对象相应的代码:

以下是引用片段:
  Auto.Car = new Object();
  Auto.Car.color = "#fff";
  Auto.Car.setColor = function(_color)
  {
  Auto.Car.color = _color;
  }
  Auto.Car.setColor("#333");

  如你所见,该Car对象是Auto对象的一个子对象—这分明是一种类对象层次结构。这个对象有一个名为color的属性和一个用于设置它的方法。在此,我们把color属性设置为灰色以覆盖掉缺省的白色。当在后面我们串行化该对象时请牢记住这个事实。

  下一个对象,Wheel,是Car的一个子对象:

以下是引用片段:
Auto.Car.Wheel = new Object();
Auto.Car.Wheel.color = "#000";

  在此,Wheel是一个基本对象,但是它展示了对象层次中的又一个层。这个对象有一个称为color的缺省值为黑色(“#000”)的属性。

  下面,让我们来分析一下为什么这些对象如此重要以及我们是如何使用它们提供的简单的属性的。

  四、把JavaScript对象串行化为JSON

  借助于JSON分析器,我们可以很容易地把刚才创建的JavaScript对象串行化为JSON。首先,我们需要下载该分析器的一个副本,并且要把它添加到文档中。下面是我在本文示例中用于导入该脚本的相应的代码:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 基于JSON的高级Ajax开发技术详解

    基于JSON的高级Ajax开发技术详解

    2015-11-10 19:43

  • 详谈基于JSON的高级AJAX开发技术

    详谈基于JSON的高级AJAX开发技术

    2015-09-25 08:10

网友点评