11.3.2　教程：load（）函数

在这个教程中，我们将使用jQuery，用一种更具响应性的方法来替代传统的单击并载入的访问HTML的方法（如图11-3上图所示），这种方法使用新的HTML直接替换当前页面上的内容（如图11-3下图所示）。

概览

要了解将在这个教程中做些什么，首先需要理解准备“Ajax化”的页面的HTML。看一下图11-4，页面上有链接的一个符号列表，每个链接都指向包含不同新闻标题的一个页面。＜ul＞标签用来创建ID为newslinks的列表。此外，在右边的边栏中还有一个空的＜div＞标签（在标题“News Headlines”的下方）。这个＜div＞拥有一个ID headlines，并且，此时是一个空的占位符。最后，只要你使用了jQuery的load（）函数，单击其中一个链接将在＜div＞中载入新闻报道。

现在，单击一个链接只是打开带有一系列新闻项目的一个Web页面。换句话说，这个页面就像常规的HTML一样工作，它拥有指向其他页面的链接。实际上，没有了我们打算添加的花哨的JavaScript，这个页面也完全能很好地工作，它将帮助任何访问者找到他们想要的新闻。这是件好事情，因为并不是每个人的浏览器都支持JavaScript。此外，如果只能够通过JavaScript的方式才能获取这些新闻项目，搜索引擎可能会忽略有价值的内容。

图　11-4　当使用JavaScript来给页面添加内容时，通常插入带有ID的一个空＜div＞。然后，可以在需要的时候选择该＜div＞并插入内容。例如，这个页面的右边栏上有一个空的＜div＞（＜div id="headlines"＞）。借助一点Ajax的功能，很容易就能使用页面中间列出的3个链接中的任何一个的内容来填充这个＜div＞

注意：可以从硬盘上直接使用load（）而不使用Web服务器，因此，对于下面的教程，我们不需要在计算机上安装一个服务器（参见11.2.2节中“快速熟悉：安装一个Web服务器”部分的介绍）。

这个教程提供了渐进增强（progressive enhancement）的一个例子，在没有JavaScript的时候，其功能也很好，但是，有了JavaScript，工作得会更好。换句话说，每个人都可以访问内容，没有谁会被遗漏。要实现渐进增强，我们将添加JavaScript来“劫持”常规的链接功能，然后，获取链接的URL，然后把链接下载到页面并将其内容放入空的＜div＞中。就是这么简单。

注意：参见1.3节中的“注意”部分以获取如何下载教程文件的信息。

编程

1.在文本编辑器中打开chapter11文件夹中的load.html文件。

首先，我们为页面主要部分的符号列表中的每个链接指定一个click事件函数。这个符号列表（＜ul＞标签）有一个ID为newslinks，因此，可以很容易地使用jQuery来选择这些链接中的每一个并给它们指定一个click（）函数。

2.单击$（document）.ready（）函数中的空行，并输入：

$（'#newslinks a'）.click（function（）{

}）；

$（'#newslinks a'）是用来选择这些链接中的每一个的jQuery方法，并且.click（）函数允许给click事件（如果需要回顾事件的知识，请参阅5.2节介绍）指定一个函数（一个事件处理程序）。

下一步是从每个链接中提取URL。

3.在click（）函数内（上面步骤2中的空行）输入var url=$（this）.attr（'href'）；，并且按下回车键创建一个空行。

这行代码创建了一个新的变量（url），并且将链接的href属性的值赋给它。回顾4.6.4节的介绍，当我们给一个jQuery选择（在这个例子中是$（'#links a'））附加一个函数（例如click（）函数）的时候，jQuery遍历选择中的每个元素（每个链接）并且把函数应用到每个链接。$（this）只是获取当前在操作的元素的一种方法。换句话说，$（this）将随着jQuery遍历元素的集合而引用一个不同的链接。attr（）函数（参见4.9节的介绍）可以为一个标签获取或设置特定的元素，在这个例子中，该函数提取href属性来获取链接所指向的页面的URL。在下一步中，该URL将和load（）函数一起使用来获取页面的内容并在该页面的一个＜div＞中显示。

4.输入$（'#headlines'）.load（url）；，以使得脚本如下所示：

$（'#newslinks a'）.click（function（）{

var url=$（this）.attr（'href'）；

$（'#headlines'）.load（url）；

}）；

还记得页面上的空的＜div＞标签吗？下载的HTML将放入其中，该标签有一个ID为headlines，因此$（'#headlines'）选择了这个＜div＞。然后，load（）函数下载前一行代码所获取的URL的HTML，然后把该HTML放入＜div＞标签中。是的，实际上幕后有很多其他的内容使得这一切得以实现，但是，有了jQuery，我们不必再操心这些。

这个页面还没有完成。如果保存该文件并在Web浏览器中预览，那就去试一下吧，你将会注意到，单击一个链接并没有在页面上载入新的内容，它实际上离开了当前页面并载入了链接的页面。Ajax发生了什么情况呢？它实际上仍然存在，只不过Web浏览器遵从在单击链接的时候载入一个新的Web页面的常规行为。要防止这种情况，必须阻止浏览器打开链接。

5.在上一步中输入的代码的后面添加一个新的空行，并且输入return false；，使得脚本如下所示：

$（'#newslinks a'）.click（function（）{

var url=$（this）.attr（'href'）；

$（'#headlines'）.load（url）；

return false；

}）；

这个简单的步骤告诉We b浏览器：“嗨，We b浏览器，不要打开那个链接。”这是阻止浏览器按照其常规行为来响应事件的一种方式。我们也可以使用5.4.4节介绍的jQuery的preventDefault（）函数来实现同样的效果。

6.保存该文件并在Web浏览器中预览。单击其中的一个链接。

现在，还有另外一个问题，我们可以从图11-5中看到。load（）函数能够工作，只不过下载文件拥有很多我们不想要的HTML，尤其是banner“JavaScript＆jQuery”出现了两次。我们真正想要的只是该Web页面的一部分，即包含了新闻项目的区域。幸运的是，load（）函数在这里能够帮上忙。

图　11-5　jQuery的load（）函数将为一个特定的文件下载所有的HTML并且将其放置到当前页面上的一个元素中。如果下载的文件包含了不需要的HTML，例如，重复的banner和页脚，结果看上去好像一个页面在另一个页面之中

7.找到带有load（）函数的一行并在url的后面添加+’#newsItems'。完成后的代码如下所示：

$（'#newslinks a'）.click（function（）{

var url=$（this）.attr（'href'）；

$（'#headlines'）.load（url+’.newsItem'）；

return false；

}）；

正如11.3.2节所介绍，我们可以指定让load（）函数把一个下载后的文件的哪一部分添加到页面。要做到这一点，可以在URL的后面添加一个空格，跟着是一个选择器，表示想要显示下载的页面的哪一部分。

这里来对代码进行仔细分析：首先，每个链接页面上有一个ID为newsItems的＜div＞标签。这个div包含了我们想要的HTML，即新闻项目。因此，可以通过在URL的后面添加一个空格，后面跟着#newsItems，一起传递给load（）函数，从而告诉load（）函数只是插入下载的HTML的一部分。例如，如果想要载入页面today.html并且只将newsItems div中的HTML放入到headlines div中，可以使用如下代码：

$（'#headlines'）.load（'today.html#newsItem'）；

在这个例子中，需要组合两个字符串：url变量的内容和’#newsItems'，来得到正确的代码，因此，我们使用了JavaScript的字符串连接操作符（+符号）：load（url+’#newsItems'）（如果需要回顾组合两个字符串的知识，参阅2.5.3节）。

8.保存该文件并且在Web浏览器中预览。单击链接进行测试。

现在，来自每个链接页面的新闻项目并且只有新闻项目出现在页面中间的框中。Ajax只在数行代码之中。（可以在chapter11文件夹下的complete_load.html中看到本教程的一个完整版本。）