采取JSON加速AJAX(By Sean Kelly)

By admin in 天文学 on 2018年10月24日

当微软以IE中上加了用来实施JavaScript的ActiveX
XMLHTTP对象后,仿佛播下了AJAX这同Web应用开发的革命之火种。如今,Firefox,
Safari, Opera,
以及任何的浏览器还提供了XMLHttpRequest,使得他们可以看colr.org,
backpackit.com,
maps.google.com.这些网站的表征就是它们的应用程序表现和感到和其他桌面应用程序一样,尽管她们运行于浏览器中。

每当AJAX里边,当用户查看和和页面交互的时,页面的JavaScript代码向web服务器请求数据(AJAX里之“异步”)。这些请求是HTTP请求,就比如一个浏览器在率先只地方获得页面,其中好包随机图片,样式表等等。同样的,XMLHttpRequest对象呢堪用来获取各种数据,不只是XML。例如,JavaScript可以动用XMLHttpRequest从web服务器取得一个惯常文书文件,并在一个表单中亮其情。

XMLHttpRequest对象通过搜寻在数据前端的Content-type
header来分析从web服务器返回的数量的MIME类型。例如,如果类型是text/plain,你可以透过检查XMLHttpRequest对象的responseText属性来访问该公文。但是,如果类型是text/xml,XMLHttpRequest对象来一个奇之步调:它对回的文档运行一个XML解析,并以内存中起一个文档对象模型(DOM)树来讲述文档,使得文档在responseXML属性中可用。然后,你不怕足以采用JavaScript的专业DOM方法来决定这目标树并访问每个元素,属性与树里的任何文件。

XML是换成数据的正统措施,但普通不是极度好之方。尽管XML可以吧多少增长结构及处女数据,但迅即真的是一个比麻烦的计。XML还产生一定复杂的语法,需要一个分析器类解析其。在JavaScript中,XML必须给解析为DOM树才堪以。并且,一旦构建了DOM树,你还只能通过建立相应的JavaScript对象或其它方式才会以客户端应用程序中使XML数据。

碰巧的是,还有复好的法门。

使用JSON
JSON也尽管是JavaScript Object
Notation,是一个叙数据的轻量级语法。JSON的雅致是因它们是JavaScript语言的一个子集。接下来你以张她干吗这样重大。首先,来比一下JSON和XML语法。

JSON和XML都使用结构化方法描述数据。例如一个地址簿应用程序可以供用来发XML格式的地址卡的web服务:
<?xml version=’1.0′ encoding=’UTF-8′?>
<card>
   <fullname>Sean Kelly</fullname>
   <org>SK Consulting</org>
   <emailaddrs>
      <address type=’work’>kelly@seankelly.biz</address>
      <address type=’home’
pref=’1′>kelly@seankelly.tv</address>
   </emailaddrs>
   <telephones>
      <tel type=’work’ pref=’1′>+1 214 555 1212</tel>
      <tel type=’fax’>+1 214 555 1213</tel>
      <tel type=’mobile’>+1 214 555 1214</tel>
   </telephones>
   <addresses>
      <address type=’work’ format=’us’>1234 Main St
         Springfield, TX 78080-1216</address>
      <address type=’home’ format=’us’>5678 Main St
         Springfield, TX 78080-1316</address>
   </addresses>
   <urls>
      <address type=’work’>http://seankelly.biz/&lt;/address&gt;
      <address type=’home’>http://seankelly.tv/&lt;/address&gt;
   </urls>
</card>

行使JSON, 形式如下:

{
   “fullname”: “Sean Kelly”,
   “org”: “SK Consulting”,
   “emailaddrs”: [
      {“type”: “work”, “value”: “kelly@seankelly.biz“},
      {“type”: “home”, “pref”: 1, “value”: “kelly@seankelly.tv“}
   ],
    “telephones”: [
      {“type”: “work”, “pref”: 1, “value”: “+1 214 555 1212”},
      {“type”: “fax”, “value”: “+1 214 555 1213”},
      {“type”: “mobile”, “value”: “+1 214 555 1214”}
   ],
   “addresses”: [
      {“type”: “work”, “format”: “us”,
       “value”: “1234 Main StnSpringfield, TX 78080-1216”},
      {“type”: “home”, “format”: “us”,
       “value”: “5678 Main StnSpringfield, TX 78080-1316”}
   ],
    “urls”: [
      {“type”: “work”, “value”: “http://seankelly.biz/”},
      {“type”: “home”, “value”: “http://seankelly.tv/”}
   ]
}

假使您所观看底,JSON有结构化的嵌套数据元素,这一点以及XML相似。JSON也是依据文本的,XML也是这样。两者都应用Unicode。JSON和XML都生爱看。主观上,JSON更鲜明,冗余更少。JSON
WEB站点严格地讲述了JSON语法,目前即是这么的。它确实是一个概括的微语言!
XML确实可标记文档,但是JSON是数交互的地道格式。每个JSON文档描述了一个这样一个目标,该对象涵盖有:嵌套对象、数组、字符串、数字、布尔值或空值。

于这些地址卡例子代码中,JSON版本是重新轻量级的,只占了682字节的半空中,而XML版本用744字节空中。尽管当时不是一个莫大之节。而实在的利益虽来自解析过程。

XML对比JSON:地位丧失
经过下XMLHttpRequest对象,可以从您的基于AJAX的应用程序取得XML和JSON文件。典型的,交互代码如下:

var req = new XMLHttpRequest();
req.open(“GET”, “http://localhost/addr?cardID=32”, /*async*/true);
req.onreadystatechange = myHandler;
req.send(/*no params*/null);
作WEB服务器响应,你提供的微处理器函数(myHandler函数)被一再调用,为而提供提前终止事务,更新快长达等会。通常的,只有以web请求完成后才从作用:那时,你就是可应用返回的多少了。

为处理XML版本的地址卡数据,myHandler的代码如下:

function myHandler() {
   if (req.readyState == 4 /*complete*/) {
       // Update address field in a form with first street address
       var addrField   = document.getElementById(‘addr’);
       var root        = req.responseXML;
       var addrsElem   = root.getElementsByTagName(‘addresses’)[0];
       var firstAddr   =
addrsElem.getElementsByTagName(‘address’)[0];
       var addrText    = fistAddr.firstChild;
       var addrValue   = addrText.nodeValue;
       addrField.value = addrValue;
   }
}
值得注意的是您不用解析XML文档:XMLHttpRequest对象活动地剖析了,并使responseXML中的DOM树可用。通过应用responseXML属性,可以调用getElementsByTagName方法寻找文档的地方有,你还好采用第一个去找到其。然后,可以另行调整用getElementsByTagName在地方有查找第一独地点元素。这就是取了文档的第一单DOM子节点,就是一个文件节点,并获取节点的价,这便是公想只要之大街地址。最后,可以在说明单域中显结果。

的确不是一个简易的办事,现在,使用JSON再试一下:
function myHandler() {
   if (req.readyState == 4 /*complete*/) {
       var addrField = document.getElementById(‘addr’);
       var card = eval(‘(‘ + req.responseText + ‘)’);
       addrField.value = card.addresses[0].value;
   }
}
若所做的率先码事情虽是解析JSON响应。但是,因为JSON是JavaScript的一个子集,你可以下JavaScript自己的编译器来分析其,通过调用eval函数。解析JSON仅需要一行!此外,操纵JSON中的目标就如操纵其他JavaScript对象同。这分明要较通过DOM树来操纵简单,例如:
card.addresses[0].value 是率先单街道地址, “1234 Main Stb &”
card.addresses[0].type 是地点类型, “work”
card.addresses[1] 是家园地址对象
card.fullname 是card的名称, “Sean Kelly”
要更仔细考察,你或许会见发觉XML格式中文档至少有一个同元素,card。这在JSON里是未设有的,为什么?
大概就是是,如果你正开JavaScript来聘Web服务,你曾经了解您想如果取得的。然而,你得当JSON中如此使用:
{“card”: {“fullname”: …}}
采取这技术,你的JSON文件连续坐一个含单一命名属性的目标开始,该属性标识了靶的类型。

JSON是全速可靠的也?
JSON提供轻量的略微文档,并且JSON在JavaScript更易使。XMLHttpRequest自动为您分析了XML文档,而若还要手工解析JSON文件,但是解析JSON比解析XML更慢么?作者通过几千蹩脚的累测试,使用XMLHttpRequest解析XML和解析JSON,结果是解析JSON比XML要赶早10加倍!当把AJAX当作桌面应用对时,速度是最最重大的元素,很明确,JSON更精彩。

当然,你免克连控制服务器端来吧AJAX程序来多少。你还得下第三正值服务器代替服务器提供XML格式的出口。并且,如果服务器恰好提供JSON,你可规定你确实想行使它们吧?

代码中值得留意的是,你将响应文件直接传入到eval中。如果您决定正在服务器,就可这么做。如果无是,一个恶意服务器可以使您的浏览器执行危险操作。在这么的景况下,你顶好利用写以JavaScript中的代码来解析JSON。幸运地,这已经发生了。

说到剖析,Python爱好者可能注意到JSON不就是JavaScript的子集,它还是Python的一个子集。你可以于Python中直接执行JSON,或者应用安全JSON解析代替。JSON.org网站列举了无数常用JSON解析器。

劳动器端的JSON
顶现在为止,你可能将刀口注意在运作在客户浏览器被的冲AJAX的web应用程序使用JSON。自然地,首先,JSON格式的数额必须以劳务器端产生。幸运地是,创建JSON或用另外是的数据易成JSON是相当简单的。一些WEB应用程序框架,例如TurboGears,自动包对JSON输出的支持。

另外商业WEB服务提供商也只顾到了JSON。Yahoo最近创办了众因JSON的web服务。Yahoo的有余物色服务,履行计划天文学,del.icio.us,还有高速公路交通服务为都支持JSON输出。毫无疑问,其他重要WEB服务提供商也拿投入到对JSON的支撑着。

总结 JSON的明白在它是JavaScript和Python的子集,使得其更易用,为AJAX提供高效的数目交互。它解析更快,比XML更易于用。JSON正成为现在“Web
2.0”的太强音。每个开发者,无论是专业桌面应用程序或Web应用程序,越来越专注到了它们的简单和便民。我梦想你能体味至于buzzword-compliant,
Web-2.0-based, AJAX-enabled, 敏捷开发被动用及JSON的趣。

关于作者
Sean Kelly
是一个希腊神话和喜剧爱好者,注意到了AJAX和JSON的机密作用。他的AJAX团队Argonauts打算解决在web应用开发,python,AJAX,java,web服务和令人生厌的XML中的各种题材。他于医,天文学与数字媒体工业等方面还发生研究,还坚称每天还举行瑜伽。他及他妻子Mary以及女儿Ariana居住在一个无呢人知的地方。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2018 亚洲必赢手机官网 版权所有