使用ajax操作 JavaScript 对象

2019-09-14 07:07:11丽君

},
... 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代码中很常见,主要是为了保持 代码简洁。当然,对函数声明的引用同样也可以作为回调函数。