jQuery提供的最简单的Ajax函数是load()。这个函数把一个HTML文件载入到页面上的一个特定元素中。例如,假设Web页面有一个区域用于新闻标题的一个简短列表。当页面载入的时候,显示5条最新的新闻主题。我们可能想要添加一些链接,让访问者选择在页面的这一区域中显示何种类型的新闻报道:例如,昨天的新闻、国内新闻、体育新闻等。我们可以通过链接到单独的Web页面来做到这点,而每个页面包含了相应的新闻项目,但是,那会迫使访问者移动到另外一个Web页面(这根本不是使用Ajax)。
另一种方法是直接把选择的新闻报道载入到页面中的新闻标题框中。换句话说,每次访问者单击一个不同的新闻类型,Web浏览器都从服务器请求一个新的HTML文件,然后把该HTML放置到标题框中,而不用离开当前的页面。
除非使用jQuery的基本load()函数来把服务器上的一个页面中的HTML插入到Web浏览器的页面中,否则我们将需要让服务器端程序使用Ajax。Ajax的主要特点在于允许JavaScript和服务器通信并从服务器获取信息。大多数时候,这意味着Web服务器上有另一个脚本运行着,完成了JavaScript所不能完成的任务,例如从服务器读取信息、发送E-mail或用户登录。
要使用load()函数,首先使用一个jQurey选择器来表示页面上请求的HTML应该放置到的元素,然后,调用load()函数并传递想要访问的页面的URL。例如,假设有一个ID为headlines的<div>标签,并且我们想要把文件todays_news.html中的HTML载入到该<div>中。可以像下面这样做:
$('#headlines').load('todays_news.html');
这行代码运行的时候,Web浏览器从Web服务器请求todays_news.html文件。当该文件下载后,浏览器使用新文件的内容来替换ID为headlines的<div>中当前的内容。这个HTML文件可能是一个完整的页面(包括<html>、<head>和<body>标签),或者只是一段HTML,例如,请求的文件可能只是一个单个的<h1>标签和一段文本。如果文件不是一个完整的Web页面,也没有问题,因为load()函数只是向当前(完整的)页面中插入HTML片段。
注意:我们只能从同一站点载入HTML文件。例如,不能从自己的站点使用load()函数把Google的主页载入到页面中的一个<div>里(可以使用一个iframe来显示来自另一个站点的页面)。
例如单击页面上的一个链接(左边)并且它载入一个全新的页面(右边)。然而,使用Ajax和jQuery的load()函数,我们可以访问同样的HTML而不必离开当前Web页面。单击一个链接会在<div>标签中载入HTML内容