通过请求获取充分格式化的HTML虽然很方便,但这也意味着必须在传输文本内容的同时也 传输很多HTML标签。有时候,我们希望能够尽量少传输一些数据,然后马上处理这些数据。在 这种情况,我们希望取得能够通过JavaScript进行遍历的数据结构。
          使用jQueiy的选择符可以遍历和操作取得的HTML结构,但是还有一种JavaScript内置的数据 格式,既能减少数据传输量,也会减少编码量。

1.取得JSON

  前面我们曾经看到过,JavaScript对象是由一些“键-值”对组成的,而且还可以方便地使 用花括号({})来定义。另一方面,JavaScript的数组则可以使用方括号([])和隐式声明的 逐渐递增的键进行动态定义。将这两种语法组合起来,可以轻松地表达复杂而且庞大的数据 结构。
S是synchronous的首字母,即同步。
         作者这里的意思是,如果不是Ajax,而是SJAX,即不是异步加载,而是同步加载,那么就不会有那么大的影响了。
Douglas Crockford为这种简单的语法起了一个名字,叫做JSON (JavaScript Object Notation, JavaScript对象表示法)。通过这种表示法能够方便地取代数据量庞大的XML格式:

{

"key": "value",

"key 2":[

"array",

"of",

"items"

]

}

           在对象字面量和数组字面量的基础上,JSON格式的语法具有很强的表达能力,但对其中的 值也有一定的限制。例如,JSON规定所有对象键以及所有字符串值,都必须包含在双引号中。 而且,函数也不是有效的JSON值。由于存在这些限制,开发人员最好不手工编辑JSON,而应该 用服务器端语言来生成。

         要了解JSON的语法要求以及它有哪些优势,都有哪些语言支持这种数据格 式,请访问 http://json.org/。如果用这种格式对字典中的解释进行编码,那么可能会有很多种编码方式。这里,我们把一 些字典的词条放在一个名叫b.json的JSON文件中,这个文件开头部分的代码如下:

[

{

"term": "BACCHUS",

"part": "n.",

"definition": "A convenient deity invented by the...",

"quote": [

"Is public worship, then, a sin,",

"That for devotions paid to Bacchus",

"The lictors dare to run us in,",

"And resolutely thump and whack us?"

],

"author": "Jorace"

},

{

"term": "BACKBITE",

"part": "v.t.",

"definition": "To speak of a man as you find him when..."

},

{

"term": "BEARD",

"part": "n.",

"definition": "The hair that is commonly cut off by..."

},

... file continues ...

           要取得这些数据,可以使用$.getJS0N()方法,这个方法会在取得相应文件后对文件进行处理。在数据从服务器返回后,它只是一个简单的JSON格式的文本字符串。$.getJSON()方法 会解析这个字符串,并将处理得到的JavaScript对象提供给调用代码。

2.使用全局jQuery函数

           到目前为止,我们使用的所荀Query方法都需要通过$()函数构建的一个jQuery对象进行调 用。通过选择符表达式,我们可以指定一组要操作的DOM节点,然后再用这些jQuery方法以某种 方式对它们进行操作。然而,$.getJS〇N()函数却不一样。从逻辑上说,没有该方法适用的DOM 元素;作为结果的对象只能提供给脚本,而不能插人到页面中。为此,getJS〇N()是作为全局 jQuery对象(由jQuery库定义的jQuery*$对象)的方法定义的,也就是说,它不是个别jQuery 对象实例(即通过$()函数创建的对象)的方法。

如果JavaScript中有类似其他面向对象语言中的类,那我们可以把$.getJS〇N()称为类方法。 为了便于理解,我们在这里称其为全局函数;实际上,为了不与其他函数名称发生冲突,这些全 局函数使用的是jQuery命名空间。

   在使用这个函数时,我们还需要像以前一样为它传递文件名,如代码清单6-3所示。
代码清单6-3

//未完成的代码

$(document).ready(function() {

$('#letter-b a').click(function(event) { event.preventDefault();

$.getJSON('b.json');

});

});

当单击按钮时,我们看不到以上代码的效果。因为虽然函数调用加载了文件,但是并没有告 诉JavaScript对返回的数据如何处理。为此,我们需要使用一个回调函数。
              $.getJSON()函数可以接受第2个参数,这个参数是当加载完成时调用的函数。如上所述, Ajax请求都是异步的,回调函数提供了一种等待数据返回的方式,而不是立即执行代码。回调函 数也需要一个参数,该参数中保存着返回的数据。因此,我们的代码要写成代码清单6-4这样。
代码清单6-4

//未完成的代码

$(document).ready(function() {

$('#letter-b a').click(function(event) { event.preventDefault();

$.getJSON('b.json', function(data) {

});

});

});

我们在此使用了匿名函数表达式作为回调函数,这在jQuery代码中很常见,主要是为了保持 代码简洁。当然,对函数声明的引用同样也可以作为回调函数。

这样,我们就可以在函数中通过data变量来遍历JSON数据结构了。具体来说,需要迭代顶 级数组,为每个项构建相应的HTML代码。虽然可以在这里使用标准的for循环,但我们要借此机会介绍jQuery的另一个实用全局函数$.each(),在第5章中,我们曾看到过它的对应方 法.each()。$.each()函数不操作jQuery对象,它以数组或对象作为第一个参数,以回调函数 作为第二个参数。此外,还需要将每次循环中数组或对象的当前索引和当前项作为回调函数的两 个参数,参见代码清单6-5。

代码清单6-5

$(document).ready(function() {

$('#letter-b a').click(function(event) { event.preventDefault();

$.getJSON('b.json', function(data) { var html ='';

$.each(data, function(entryIndex, entry) { html  = '
'; html = '

' entry.term '

'; html = '
' entry.part '
'; html = '
'; html = entry.definition; html = '
'; html = '
'; }); $('#dictionary').html(html); }); }); });

这里通过$.each()函数依次遍历每个项,并使用entry对象的内容构建起HTML代码结构。 构建好HTML之后,通过.html()把它插人到<div id="dictionary">*,替换其中原有的所 有内容。

安全的HTML

这种方法要求数据中包含可以直接用来构建HTML的安全内容,例如,数据 中不能包含任何<字符。

现在所剩的就是处理词条中的引用语了,这需要使用另一个$.each()循环,参见代码清 单 6-6。
          代码清单6-6

$(document).ready(function() {

$('#letter-b a').click(function(event) { event.preventDefault();

$.getJSON('b.json', function(data) { var html ='';

$.each(data, function(entryIndex, entry) { html  = '
'; html = '

' entry.term '

'; html = '
' entry.part '
'; html = '
'; html = entry.definition; if (entry.quote) { html = '
'; $.each(entry.quote, function(lineIndex, line) { html = '
' line '
'; }); if (entry.author) { html = '
' entry.author '
'; } html = '
'; } html = '
'; html = '
'; }); $('#dictionary').html(html); }); }); });

编写完这些代码后,就可以单击下一个B链接来验证我们的成果了,如图6-4所示,页面右侧 出现了相应的字典条目。

尽管JSON格式很简洁,但它却不容许任何错误。所有方括号、花括号、引号和逗号都必须 合理且正确地使用,否则文件不会加载。而且,在多数浏览器中,当文件加载失败时我们看不到 任何错误信息;脚本只是静默地彻底终止运转。

使用ajax操作JavaScript 对象详解的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  7. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  8. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  9. ios – 内存泄漏与UIWebView和Javascript

    清楚地包含一个Javascript文件到我的HTML是使UIWebView泄漏内存.当我重复使用相同的UIWebView对象时,或者每当我有内容实例化一个新的漏洞时,会出现泄漏的事实,导致我认为必须有一些JavaScript文件被loadHTMLString处理,导致泄漏.有人知道如何解决这个问题吗?

  10. iOS应用程序的UI自动化测试如何与乐器和Javascript

    从WWDC2010视频会议中了解iOS应用程序的自动化UI测试,但没有实践.从代码项目project,我们可以有一个例子.这个问题在这里听到有涉及这个的人.任何限制?解决方法我建议从AlexWollmer开始使用thisblogpost.他创建了一个非常有用的JavaScript库:tuneup_jswithtest()函数,它允许测试分离和有用的帮助者以及为自动化仪器编写测试的断言.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部