|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
因为二次编译器太复杂,那么建议只是在安装程序的时候编译一次,而不类似java那样运行就编译。并且我觉得,一次痛苦,总比多次低效率要舒服多了。ajax|js|初级 本文将注释怎样利用AJAX和JSON剖析器在客户端和服务器之间创立庞大的JSON数据传输层。
1、弁言
毫无疑问,AJAX已成为现今Web开辟中一种强无力的用户交互手艺,可是它的很多大概性使用仍旧不为人知。在本文中,我们未来配合切磋怎样利用JavaScript工具标记(JSON)和JSON剖析器在服务器和客户端AJAX引擎之间创立庞大而强无力的JSON数据传输层。我们将具体会商怎样创立一组工具(在别的言语中常常被看成一个包),怎样把这些工具串行化为JSON以发送到服务器端,和怎样把服务器端JSON反串行化为客户端JavaScript工具。
提醒:你能够在DouglasCrockford的网站上找到本文中利用的JSON剖析器。
在持续浏览前,本文假定你已把握了JavaScript手艺而且懂得怎样创立一个基础的AJAX引擎,并经过AJAX手艺向服务器端收回哀求和从服务器端吸收呼应。为了更好地舆解本文中示例,你必要下载本文响应的源码文件。
2、入手下手
为了进一步笼统我们的AJAX哀求并有助于我们今后在分歧的使用程序间共享AJAX引擎代码,本文利用了一个我本人创立的AJAX引擎。为了利用这个引擎,我们复杂地导进三个JavaScript文件而且向一个名为AjaxUpdater的工具收回哀求。然后,由该引擎来卖力处置别的义务,包含把呼应代办署理到在该哀求中指定的回调办法中。上面的示例展现了我们怎样利用这个引擎收回哀求和导进相干的文件:
<P><scripttype="text/javascript"src="javascript/model/Ajax.js"></script>
<scripttype="text/javascript"src="javascript/model/HTTP.js"></script>
<scripttype="text/javascript"src="javascript/model/AjaxUpdater.js"></script>
<scripttype="text/javascript">
document.load=AjaxUpdater.Update(’GET’,URL,callback);
</script>
起首,让我们来会商JavaScript工具。
3、JavaScript工具
JavaScript之前常常被曲解,仿佛它次要用于完成客户扫瞄器端图形效果。实在,JavaScript是一种强无力的言语,出格当它与AJAX和一个使用程序的服务器端相分离时;可是,即便在客户端,JavaScript也可以完成远比你意料很多的多的功效。面向工具的JavaScript就是一个示例,它可以使我们创立工具,扩大内涵工具,乃至可以把我们的工具创立成包以到达更简单的办理之目标。
在本文示例中,我们将创立三个工具:Auto,Car和Wheel。个中,每个都是复杂的工具;在此,我们仅利用它们来展现怎样创立一个基础包。
起首,Auto工具被声明为一个新的工具:
<P> varAuto=newObject();
注重,这个Auto工具将用作Car工具的父类。因而,Car工具将成为Auto工具的一个属性,只不外它被分别到另外一个文件中以更容易于办理(这个观点常常被用于别的面向工具的言语中,可是在JavaScript中却其实不常常提起它)。上面是这个Car工具响应的代码:
<P> Auto.Car=newObject();
Auto.Car.color="#fff";
Auto.Car.setColor=function(_color)
{
Auto.Car.color=_color;
}
Auto.Car.setColor("#333");
如你所见,该Car工具是Auto工具的一个子工具―这明白是一品种工具条理布局。这个工具有一个名为color的属性和一个用于设置它的办法。在此,我们把color属性设置为灰色以掩盖失落缺省的红色。当在前面我们串行化该工具时请切记住这个现实。
下一个工具,Wheel,是Car的一个子工具:
<P>Auto.Car.Wheel=newObject();
Auto.Car.Wheel.color="#000";
在此,Wheel是一个基础工具,可是它展现了工具条理中的又一个层。这个工具有一个称为color的缺省值为玄色(“#000”)的属性。
上面,让我们来剖析一下为何这些工具云云主要和我们是怎样利用它们供应的复杂的属性的。
4、把JavaScript工具串行化为JSON
借助于JSON剖析器,我们能够很简单地把方才创立的JavaScript工具串行化为JSON。起首,我们必要下载该剖析器的一个正本,而且要把它增加到文档中。上面是我在本文示例顶用于导进该剧本的响应的代码:
<P><scripttype="text/javascript"src="javascript/utils/jsonparser.js"></script>
我已把该剖析器增加到我的javascript目次,即一个称为utils的子目次下。
上面是终极的包含到个中用于导进得当的JavaScript文件的代码片段:
<P><scripttype="text/javascript"src="javascript/Auto.js"></script>
<scripttype="text/javascript"src="javascript/Car.js"></script>
<scripttype="text/javascript"src="javascript/Wheel.js"></script>
<scripttype="text/javascript"src="javascript/utils/jsonparser.js"></script>
<scripttype="text/javascript"src="javascript/model/Ajax.js"></script>
<scripttype="text/javascript"src="javascript/model/HTTP.js"></script>
<scripttype="text/javascript"src="javascript/model/AjaxUpdater.js"></script>
在导进得当的文件后,我们能够经由过程把两个div元素和一个onload事务复杂地增加到HTML文档中入手下手串行化。这两个div元素将分离具有ID:body和loading。个中,这个loading标签将由AJAX引擎利用来唆使进度情形,而body标签将用于显现动静。
<P><divid="loading"></div>
<divid="body"></div>
onload事务响应于body元素而且设置它的innerHTML属性为JavaScript工具(作为一个串行化的JSON字符串)。为了完成这一目标,我在Auto工具上利用了jsonparser.js文件内的toJSONString办法:
<P><body>
这段代码利用了Auto工具及其一切的子工具,而且利用JSON剖析器的toJSONString办法把它们串行化为一个JSON字符串。然后,该数据能够被用作服务器真个一种数据互换格局。
你大概还记得,在后面我们曾挪用了一个称为setColor的办法来改动Car工具的色彩。事先,我利用它是由于我想向你展现串行化可以在运转时候的任何点上完成,并且还为了反应出工具中最新的数据。
假如你细心剖析一下onload事务,你会注重到,Car和Wheel工具都包装在方括号内,这些方括号代表了父工具(即Auto)。这意味着,该串行化的JavaScript工具可以在运转时候被发送到服务器端以存储最新的数据,而且也能够在使用程序启动时从服务器端举行吸收以便从数据库中检索多半确当前数据。最出色的部分在于,为了创立一种“无缝”的历程,一切与服务器之间完成的数据互换都可使用JSON手艺来完成。
上面,让我们来看一下不异的数据是怎样从服务器端吸收的,和它们是怎样被利用最新的数据(典范地,来历于一个数据库)串行化为客户端JavaScript工具的。
5、把JSON反串行化为客户端JavaScript工具
在本文中,我复杂地把一个静态文件创立为JSON呼应,可是在实践开辟中,你能够把这些数据存储在一个数据库中而且利用一种服务器端言语前往它。基于这一才能,我们就能够轻松地创立一种强无力的数据互换历程!在后面,我们已剖析了这一串行化历程。凭基础的AJAX体验,你应当可以了解数据是怎样被寄送到服务器真个。如今,让我们动手会商反串行化的成绩。起首来看一个针对本文示例供应的静态JSON文件。这个文件实际上是我们在上一节中串行化的数据:
<P>{"Car":{"color":"#333","Wheel":{"color":"#000"}}}
作为一个哀求JSON文件的示例,当我们点击以下链接时将哀求这个串行化的Auto工具:
<P><ahref="http://www.alixixi.com/program/a/javascript:AjaxUpdater.Update(’GET’,’json/data.js’,displayResponse);">GetremoteJSON</a>
一旦吸收到呼应动静,我们的称为displayResponse回调办法就会被激活,然后,我们就可以够反串行化并入手下手利用这些工具:
<P><scripttype="text/javascript">
functiondisplayResponse()
{
if(Ajax.checkReadyState(’loading’)=="OK")
{
varAuto=Ajax.request.responseText.parseJSON();
document.getElementById("body").innerHTML+="
<b>RemoteJSONunserialized</b>";
document.getElementById("body").innerHTML+="
Carcolor:"+Auto.Car.color;
document.getElementById("body").innerHTML+="
Wheelcolor:"+Auto.Car.Wheel.color;
}
}
</script>< 这是相称冲动民气的一部分!一旦我们具有了该responseText,我们就可以够复杂地利用JSON剖析器中的parseJSON办法来从串行化的数据中重修我们的Auto工具。借助于这个新的Auto工具,我们就能够挪用响应的子工具。这个特性同意我们在服务器和客户端往返发送工具―而不用举行大批的剖析事情,但是在之前尺度的XML呼应情形下我们将却必需如许做。如许以来,我们就能够创立出可以基于AJAX手艺来保存本身形态的客户端JavaScript工具
据说很厉害,甚至可以把C#也干掉^_^,不过也很复杂,本来C++已经够复杂的。有人甚至还提出把这个东东引进标准,我觉得基本上不可能的。 |
|