$("#id").load和$.ajax的区别是什么？

Question

有人知道$("#id").load和$.ajax之间的区别吗？

- Erx_VB.NExT.Coder

---

有关更多信息：https://dev59.com/2G865IYBdhLWcg3wU8-I - cregox

Answer 1

让我稍微为您澄清一下：

$.ajax() 是 jQuery 提供的基本和低级别的 AJAX 函数，这意味着您可以像使用 XmlHttpRequest 对象一样自由操作。但有一天 jQuery 开发人员想到，除了 $.ajax()，他们还可以为开发人员提供更具体的方法，这样他们就不需要传递更多参数来使 $.ajax() 方法按照他们的意愿工作。例如，他们说，不必将 json 作为参数传递给 $.ajax() 来指示返回数据类型，他们提供了 $.getJSON()，这样我们就知道我们期望的返回类型是 json，而不是指定发送方法为 post 或 get，您可以分别使用 $.post() 或 $.get()。

所以说，load() 的作用与此类似，它可以帮助您将 HTML 数据注入到您的 HTML 中。通过使用 load() 方法，您就知道预期的是 HTML 片段。

很酷，不是吗？

我想我已经深深爱上了它。

欲了解更多信息，您可以访问 jquery.com，他们甚至提供了新的库和 API 教程页面。

编辑：

 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 }); 

与下面的代码相同:

$.post("some.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

现在你可以看到这是$.ajax()的简化版本，要进行post调用，你需要传递一些发送方法类型的信息，例如第一个示例中的post，但是你也可以使用$.post()，因为你知道自己在做什么（即post请求），所以这个版本更加简化和易于操作。

但是不要忘记一些事情。除了load()方法之外，所有其他的ajax方法都返回XHR（XmlHttpRequest实例），因此你可以把它们当作在使用XmlHttpRequest处理。实际上，你就是在使用它，而load()返回jQuery对象，这意味着：

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

在上面的示例中，您可以轻松地将返回的html注入到#objectID元素中。很酷吧？如果没有返回jQuery，您就应该使用回调函数进行操作，在其中可能会从data对象中获取结果并手动将其注入到您想要的html元素中。因此，这将是一种麻烦的方式，但是使用$.load()方法，它在jQuery中得到了简化。

$("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 }); 

您甚至可以发布参数，因此根据这些参数，您可以在服务器端执行一些操作并将html部分发送回客户端，然后您的可爱的jQuery代码会将其注入到上面示例中的#feeds html元素中。

- Tarik

---

谢谢伙计，那是一个完美的描述。所以，.getJSON、.post和.get也都是AJAX调用，是吗？太棒了！ - Erx_VB.NExT.Coder

很好的简明解释，SO需要更多这样的内容。 - Damien Wilson

getJSON不会在其请求中添加content-type。 - Chris S

其实是的，但默认值是“application/x-www-form-urlencoded”，对于大多数情况来说这是可以接受的。所以通常人们不会再定义它了。但这也取决于解决方案 :) 谢谢你提醒我们。 - Tarik

@damiien：我同意你的观点，Aaron，你应该维护一个博客 :) - Erx_VB.NExT.Coder

Answer 2

load() 发起一个Ajax请求来检索HTML内容，当返回时，设置给指定的选择器。

所有jQuery Ajax函数只是 $.ajax() 的封装, 因此：

$("#id").load(...);

可能等价于：

$.ajax({
  url: "...",
  dataType: "html",
  success: function(data) {
    $("#id").html(data);
  }
});

- cletus

---

这段代码的作用是什么？$("#id").html(data)？ 它会用"data"覆盖.innerHtml吗？ - Erx_VB.NExT.Coder

所以至少使用.load你不需要提供成功/失败的方法...我是对的吗？ - Erx_VB.NExT.Coder

是的。html() 相当于 element.innerHTML = "..."。load() 提供了一个成功回调选项（参见上面链接的页面），但没有失败的钩子。 - cletus

Answer 3

更简明的总结和最重要的区别是，$.ajax 允许您设置 content-type 和 datatype 。这两个对于发出 JSON 请求或 XML 请求非常重要。当缺少 content-type 字段时（至少在使用 [WebMethod] 时），ASP.NET 更加挑剔，并且会返回页面的 HTML 而不是 JSON。 $.load() 的目的是仅返回纯 HTML。 $.ajax 还提供以下功能：

• 缓存
• 错误处理
• 数据过滤
• 密码

以及其他功能。

- Chris S

Answer 4

从文档中可以了解到...

$(selector).load(..)

从远程文件加载 HTML 并将其注入到 DOM 中。

$.ajax(...)

使用 HTTP 请求加载远程页面。这是 jQuery 的底层 AJAX 实现。

load 是专门用于获取（通过 GET，除非提供参数，否则使用 POST）HTML 页面并直接将其插入到选定的节点（由 $(selector) 部分选择的节点）中的方法。

$.ajax(...) 是一种更通用的方法，允许您进行 GET 和 POST 请求，并且不对响应执行任何特定操作。

我鼓励您阅读文档。

- Justin Johnson

---

如果.load是异步的，那么它是否也使用了XMLHttpRequest对象？ - Erx_VB.NExT.Coder

哪个是最好的文档呢？是 jQuery 的官网吗？ - Erx_VB.NExT.Coder

所有jQuery中的远程请求都使用HttpXmlRequest或Active X控件，具体取决于环境。是的，jQuery文档是最好的文档。 - Justin Johnson

Answer 5

这是 load 函数的源代码：http://github.com/jquery/jquery/blob/master/src/ajax.js#L15

正如您所看到的，它是一个带有一些选项处理的 $ajax。换句话说，这是一个方便的方法。

- August Lilleaas

Answer 6

基于deferred和promise对象的使用,上述答案可能已经过时了。据我了解，你可以在.ajax中使用.when但不能在.load中使用。简而言之，.ajax比.load更强大。例如：

      some_promise = $.ajax({....});
      .when(some_promise).done(function(){.... });

您可以更精细地控制HTML加载。还有.fail和.always用于失败和“无论如何”的情况。在load中，您无法获得这些功能。希望我说得对。

- Sunny