使用jQuery的AJAX初学者指南

在本教程中，我们将介绍一些 jquery 的ajax 相关函数和方法。更具体地说，我们将仔细研究速记load方法和泛型ajax函数。

使用load方法

jQuery 的load方法是一个简单但功能强大的获取远程数据的方法。下面你可以看到它的语法：

$(selector).load(url[, data][, complete])

下表显示了其可能的参数：

下面是回调函数的参数：

下一个列表总结了textStatus参数的可能值：

  - success
  - notmodified
  - nocontent
  - error
  - timeout
  - abort
  - parsererror

为了更好地理解该load方法的工作原理，让我们重温上一个教程中讨论的示例。

再一次看一下这个简单的 html 结构：

      
    
        
     
        
    Learn more about Einstein

看起来是这样的：

请记住，我们希望在#bio单击按钮后立即使用响应数据更新元素的内容。

这是所需的 jQuery 代码：

      var $btn = $('#request');
      var $bio = $('#bio');

      $btn.on('click', function() {
      	$(this).hide();
      	$bio.load('Bio.txt', completeFunction);
      });
    
      function completeFunction(responseText, textStatus, request) {
      	$bio.css('border', '1px solid #e8e8e8');
      	if(textStatus == 'error') {
      		$bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
      	} 
      }

假设请求成功（即何时textStatus为success或notmodified），最终结果将如下所示：

此外，请考虑以下描述成功请求的可视化：

如果我们使用纯 javascript（参见上一教程）发出请求，此可视化的左侧部分显示了在浏览器控制台中打印的 XHR 对象。另一方面，如果我们使用该load方法，右侧部分会显示打印出来的相应 jqXHR 对象。

但是，如果请求不成功，则应显示相应的消息。为此，我们监视textStatus参数的值并显示错误消息：

注意：如果您从本地环境运行示例（并将Bio.txt文件存储在其中），错误消息可能会有所不同。例如，您可能会看到以下结果：

最后，值得一提的是，默认情况下，该load方法使用 HTTPGET方法，除非我们将数据作为对象发送到服务器。只有这样，该post方法才会被调用。

请参阅下面的相关 CodePen 演示：

现在，让我们修改我们从服务器请求的文件的格式。具体而言，对于本示例，所需数据包含在Bio.html文件中而不是Bio.txt文件中。另外值得注意的是：目标文件包含两个段落。

假设我们只想加载第一段，我们必须更新初始代码如下：

      $btn.on('click', function() {
          // this line only changes
          $bio.load('Bio.html p:first-child', completeFunction);
      });

看起来是这样的：

这是 CodePen 演示：

结论

在本教程中，我演示了如何将 AJAX 与 jQuery 结合使用。为了让事情更有趣，我们还使用了几个实际示例。在本系列的最后一篇教程中，我们将通过一个更复杂的示例来结束所有内容。