我的书签
添加书签
移除书签11.3 Ajax的jQuery方式
浏览器之间有很多的不同，以致我们必须为Ajax程序编写额外的代码，以使其工作于Internet Explorer、Firefox、Safari和Opera中。尽管基本的XMLHttpRequest过程并不是很复杂，由于每次我们必须采取很多步骤来发送一个XHR请求，如果采用一个JavaScript库的话，Ajax编程会进行得更快。
jQuery库提供了几个函数来很好地简化整个过程。毕竟，如果看一下Ajax请求的5个步骤（参见11.2.2节），将会看到有趣的内容，实际对服务器的响应做一些事情的程序都仅仅在一个步骤中发生（步骤3）。jQurey简化了所有这些步骤，以便我们可以把精力集中在真正有趣的编程上。
11.3.1 使用load（）函数
jQuery提供的最简单的Ajax函数是load（）。这个函数把一个HTML文件载入到页面上的一个特定元素中。例如，假设Web页面有一个区域用于新闻标题的一个简短列表。当页面载入的时候，显示5条最新的新闻主题。我们可能想要添加一些链接，让访问者选择在页面的这一区域中显示何种类型的新闻报道：例如，昨天的新闻、国内新闻、体育新闻等。我们可以通过链接到单独的Web页面来做到这点，而每个页面包含了相应的新闻项目，但是，那会迫使访问者移动到另外一个Web页面（这根本不是使用Ajax）。
另一种方法是直接把选择的新闻报道载入到页面中的新闻标题框中。换句话说，每次访问者单击一个不同的新闻类型，Web浏览器都从服务器请求一个新的HTML文件，然后把该HTML放置到标题框中，而不用离开当前的页面（如图11-3所示）。
快速熟悉了解服务器端的方式
除非使用jQuery的基本load（）函数（参见11.3.1节）来把服务器上的一个页面中的HTML插入到Web浏览器的页面中，否则我们将需要让服务器端程序使用Ajax。Ajax的主要特点在于允许JavaScript和服务器通信并从服务器获取信息。大多数时候，这意味着Web服务器上有另一个脚本运行着，完成了JavaScript所不能完成的任务，例如从服务器读取信息、发送E-mail或用户登录。
本书并不介绍服务器端编程，因此我们不需要学习如何使用PHP、.NET、JSP、ASP或Cold Fusion（或者你需要能够进行服务器端编程的某个人来替你考虑这些事）这样的一种服务器端技术来编程。如果还没有选择一种服务器端语言，PHP是一个很好的起点，它是最流行的Web服务器编程语言之一，它是免费的，
而且几乎每个Web托管公司都在自己的服务器上提供PHP。它是功能强大的Web构建语言，并且相对容易学习。如果你想要通过PHP开始学习服务器端编程，可以阅读《Learning PHP, MySQL, and JavaScript》（O'Reilly）、《Head First PHP, MySQL》（O'Reilly）或《PHP Solutions：Dynamic Web Design Made Easy》（Friends of Ed）等书。这些图书中的任何一本都是很好的初级读物。
还有很多学习PHP的免费网上资源。来自Zend（支持PHP开发的主要公司中的一家）的PHP入门（http：//devzone.zend.com/6/phP-101-php-for-the-absolute-beginner/）拥有很多基本的（和高级的）信息。W3Schools Web站点（网址为www.w3schools.com/PHP）也有很多面向PHP初级程序员的信息。
要使用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来显示来自另一个站点的页面，8.4节介绍的FancyBox插件使用了这一技术）。
图 11-3 上图表示访问附加的HTML链接的常规方法。单击页面上的一个链接（左边）并且它载入一个全新的页面（右边）。然而，使用Ajax和jQuery的load（）函数，我们可以访问同样的HTML而不必离开当前Web页面（如下图所示）。单击一个链接会在＜div＞标签（如圆圈所示）中载入HTML内容
在使用load（）函数的时候，我们必须对文件路径非常小心。首先，传递给load（）函数的URL和当前页面有关系。换句话说，我们使用和从当前页面链接到想要载入的HTML文件相同的路径。此外，当HTML载入到文档中的时候，HTML中的任何文件路径不会重写，因此，如果我们在载入的HTML文件中有一个链接或包含图像，这些URL需要和使用load（）的页面相关才能起作用。换句话说，如果使用了文档相对路径（参见1.2.2节中的“快速熟悉：URL类型”部分）并且载入的HTML文件位于Web站点的另一个目录下，当HTML载入到当前页面的时候，图像和链接可能无法工作。有一个简单的解决方法：只是用根相对目录的链接，或者确保载入的文件和使用load（）函数的页面位于同一目录下。
load（）函数甚至允许我们指定想要把下载HTML文件的哪一部分添加到页面中。例如，假设请求的页面是站点的一个常规Web页面；它包含了所有常规的Web页面元素，例如banner、导航栏和页脚。我们可能只是对于页面的一个单个区域中的内容感兴趣，例如，只是一个特定的＜div＞及其内容。要指定想要载入页面的哪一部分，可以在URL的后面插入一个空格，跟着是一个jQuery选择器。例如，假设在上面的例子中，我们只是想要把ID为news的一个＜div＞中的内容插入到todays_news.html文件中。可以通过如下代码做到这点：
$（'#headlines'）.load（'todays_news.html#news'）；
在这个例子中，Web浏览器下载页面todays_news.html，但是，它只是提取了ID为news的＜div＞标签（及其中的所有内容），而不是把文件的整个内容都插入到标题＜div＞中。我们将在后面的教程中看到这一技术。
