jQuery

jQuery 知识量:7 - 32 - 105

6.1 不刷新页面加载数据><

.load()函数- 6.1.1 -

AJAX是当前非常流行的web开发技术,它的最大特点就是可以在不刷新整个页面的情况下与服务器进行交互并更新页面部分内容。jQuery对AJAX技术提供了很好的支持,消除了浏览器行为的不一致性,使得AJAX应用变得十分简单。

要在页面中加载一段内容可以使用.load()函数,只需要将要加载的文件引用作为参数传递给该函数即可。

主要的HTML代码如下:

<div>
    <h1>What is jQuery?</h1>
    <a href="#">explain</a>
</div>

待加载的内容代码(jQueryPart.html)如下:

<p>
    Query is a fast, small, and feature-rich JavaScript library. 
    It makes things like HTML document traversal and manipulation, 
    event handling, animation, and Ajax much simpler with an easy-to-use 
    API that works across a multitude of browsers.
</p>

对应的JavaScript代码如下:

$(document).ready(function () {
    $('a').click(function () {
        $('div').load('jQueryPart.html');
        return false;
    });
});

以上代码中,向链接a绑定了一个点击事件,当链接a被点击后,找到div元素,利用.load()函数,动态加载“jQueryPart.html”文件。这个动作不会刷新整个页面,只会用jQueryPart.html”包含的内容覆盖div中的全部内容,如下图所示:

加载前:

1.jpg

加载后:

2.jpg

数据格式的选择- 6.1.2 -

可以通过AJAX技术加载的文件类型除了HTML片段外,还有JSON文件、JavaScript文件和XML文件等。它们之间各有优劣,简单总结一下。

  • HTML片段是其中最简单的,它不需要jQuery进行额外的处理,直接引入即可,因此加载速度很快。但是必须事先组织好文件结构和内容,以和主文件完成匹配。也正因如此,HTML文件很难与其他系统共享数据,得到重用。

  • JSON文件(JavaScript Object Notation)实际上是以JavaScript的对象表示方式构建的,跟一般的JavaScript对象结构基本一样,它清晰易读,可以重用,加载速度也挺快,但是需要使用jQuery或JavaScript进行一定处理,主要是循环遍历其中的信息并打印出来。此外,构建JSON文件需要非常小心,不能出错。如果出错,页面不会给出任何提示,只是停止运行。当然,现在可以借助一些第三方软件进行文件的校验和构建,以减少可能发生的错误。

  • JavaScript文件就是普通的JavaScript代码,其中包含了数组以存储数据,相当于将主页面部分JavaScript代码移动到外部文件,在需要时再加载,以减少主页面大小和文件复杂度。这种方式与HTML片段类似,很难得到重用,构建也相对麻烦一些,很少用。

  • XML文件相对比较复杂,格式要求比较严格,解析速度最慢,但是可以被其他系统重用,特别是在外部系统未知的情况下,这是一种最通用和安全的文件格式。