• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > 使用ajax操作JavaScript 对象详解

使用ajax操作JavaScript 对象详解

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了使用ajax操作JavaScript 对象详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

通过请求获取充分格式化的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"
]
}
</div>

           在对象字面量和数组字面量的基础上,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 ...
</div>

           要取得这些数据,可以使用$.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');
});
});
</div>

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

//未完成的代码
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) {
});
});
});
</div>

我们在此使用了匿名函数表达式作为回调函数,这在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 += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>';
html += '<div class="part">' + entry.part + '</div>';
html += '<div class="definition">';
html += entry.definition;
html += '</div>';
html += '</div>';
});
$('#dictionary').html(html);
});
});
});
</div>

这里通过$.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 += '&l

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11.NET2.0环境下的Ajax选型和应用(提供Demo源码下载)
  • 2017-05-11AJAX 请求区分 $_SERVER['HTTP_X_REQUESTED_WITH'] 小解
  • 2017-05-11浅谈Ajax技术实现页面无刷新
  • 2017-05-11Ajax上传实现根据服务器端返回数据进行js处理的方法
  • 2017-05-11Ajax简单的异步交互及Ajax原生编写
  • 2017-05-11浅谈Ajax和JavaScript的区别
  • 2017-05-11基于iframe实现ajax跨域请求 获取网页中ajax数据
  • 2017-05-11利用AJAX实现无刷新数据分页
  • 2017-05-11jQery ajax——load()方法示例介绍
  • 2017-05-11pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • ajax提交 session失效
    • 理解jquery ajax中的datatype属性选项值
    • 提交表单最简单的AJAX程序分享
    • Ajax实现城市二级联动(三)
    • pjblog发表评论用的ajaxJS.js
    • Ajax常见问题有哪些?
    • 一个有趣的Ajax Hack示范
    • 变量冲突处理
    • Ajax 高级功能之ajax向服务器发送数据
    • ajax readyState的五种状态详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有