使用ajax操作JavaScript对象的方法

2016-11-09 00:00:00临风 网页程序设计

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

  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) {

  });

  });

  });

 1/2    1 2 下一页 尾页

[网页程序设计]相关推荐

[网页程序设计]相关栏目推荐
查看更多
上一篇:TCP/IP传输层 下一篇:Ajax使用JSON数据格式案例分析