Javascript $("#id").load 和 $.ajax 的区别？

Difference between $("#id").load and $.ajax?

提问by Erx_VB.NExT.Coder

Does anyone know what is the difference between $("#id").loadand $.ajax?

有谁知道之间有什么区别$("#id").load和$.ajax？

回答by Tarik

Let me clarify things for you a little bit :

让我为你澄清一下：

$.ajax()is the basic and low-level ajax function jQuery provides which means you can do what ever you want to like you can work with XmlHttpRequestobject. But once upon a time jQuery Developers thought that actually besides $.ajax(), they could provide more specific methods to developers so they wouldn't need to pass more parameters to make $.ajax()method work the way they want. For example they said instead of passing jsonas a parameter to $.ajax()to indicate return data type, they provided $.getJSON()so we would all know that the return type we expected was json, or instead of indicating send method as postor get, you could use $.post()or $.get()respectively.

$.ajax()是 jQuery 提供的基本和低级 ajax 函数，这意味着你可以做任何你想做的事情，你可以使用XmlHttpRequest对象。但曾几何时，jQuery 开发人员认为，实际上除此之外$.ajax()，他们可以为开发人员提供更具体的方法，这样他们就不需要传递更多参数来使$.ajax()方法按他们想要的方式工作。例如，他们说不是json作为参数传递to$.ajax()来指示返回数据类型，$.getJSON()而是提供这样我们都知道我们期望的返回类型是json，或者代替将发送方法指示为postor get，您可以分别使用$.post()or $.get()。

So load()is the same thing, it can help you inject html data into your html. with load()method you know that an html portion is being expected.

所以load()是一样的东西，它可以帮助你将 html 数据注入到你的 html 中。使用load()方法，您知道需要 html 部分。

Isn't that cool ?

这不是很酷吗？

I think I've been fallen in love.

我想我已经坠入爱河了。

For more information, you can visit jquery.com, they are even providing their new library and api tutorial page.

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

Edit :

编辑 ：

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

is the same as below :

与下面相同：

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

Now as you can see it is the simplified version of $.ajax(), to make post call, you need to pass some information of send method type which is postas shown at the first example but instead of doing this you can use $.post()because you know what you are doing is postso this version is more simplified and easy to work on.

现在，您可以看到它是 的简化版本$.ajax()，要进行后期调用，您需要传递一些发送方法类型的信息，post如第一个示例所示，但您可以使用它而不是这样做，$.post()因为您知道自己在做什么为post使该版本更简单，更容易去努力。

But don't forget something. Except for load(), all other ajax methods return XHR (XmlHttpRequest instance) so you can treat them as if you were working with XmlHttpRequest, actually you are working with it tho :) and but load()returns jQuery which means :

但不要忘记一些事情。除了load()，所有其他 ajax 方法都返回 XHR（XmlHttpRequest 实例），因此您可以将它们视为您正在使用 XmlHttpRequest，实际上您正在使用它 tho :) 并且load()返回 jQuery，这意味着：

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

in the example above, you can easly inject the return html into #objectIDelement. Isn't it cool ? If it wasn't returning jQuery, you should have been working with callback function where you probably get the result out of like dataobject and inject it manually into the html element you want. So it would be hassle but with $.load()method, it is really simplified in jQuery.

在上面的示例中，您可以轻松地将返回的 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");
 }); 

You can even post parameters, so according to those parameters you can do some work at server-side and send html portion back to the client and your cute jQuery code takes it and inject it into #feedshtml element in the example right above.

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

回答by cletus

load()initiates an Ajax request to retrieve HTML that, when returned, is set to the given selector.

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

All the jQuery Ajax functionsare simply wrappers for $.ajax()so:

所有jQuery Ajax 函数都只是简单的包装器$.ajax()：

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

is probably equivalent to:

大概相当于：

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

回答by Chris S

A more concise summary and the most important difference is that $.ajaxallows you to set content-typeand datatype.

更简洁的总结和最重要的区别是$.ajax允许您设置content-type和datatype。

These two are important for making JSON requests, or XML requests. ASP.NET is more fussy with a missing content-type field (atleast when you use [WebMethod]) and will simply return the HTML of the page instead of JSON.

这两个对于发出 JSON 请求或 XML 请求很重要。ASP.NET 对缺少内容类型字段（至少在您使用 时[WebMethod]）更加挑剔，并且只会返回页面的 HTML 而不是 JSON。

$.load()is intended to simply return straight HTML. $.ajaxalso gives you

$.load()旨在简单地返回直接的 HTML。$.ajax还给你

• caching
• error handling
• filtering of data
• password

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

plus others.

加上其他人。

回答by Justin Johnson

From the documentation ...

从文档...

$(selector).load(..)

$(selector).load(..)

Load HTML from a remote file and inject it into the DOM.

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

$.ajax(...)

$.ajax(...)

Load a remote page using an HTTP request. This is jQuery's low-level AJAX implementation.

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

loadis specifically for fetching (via GET unless parameters are provided, then POST is used) an HTML page and directly inserting it into the selected nodes (those selected by the $(selector)portion of $(selector).load(...).

load特别是用于获取（除非提供参数通过GET，POST然后使用）的HTML页，并直接将其插入到选择的节点（那些由所选择$(selector)的部分$(selector).load(...)。

$.ajax(...)is a more general method that allows you to make GET and POST requests, and does nothing specific with the response.

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

I encourage you to read the documentation.

我鼓励您阅读文档。

回答by August Lilleaas

Here's the source code for the loadfunction: http://github.com/jquery/jquery/blob/master/src/ajax.js#L15

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

As you can see, it's a $ajaxwith some options handling. In other words, a convenience method.

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

回答by Sunny

The above answer may not be valid anymore in light of the use of deferred and promise objects. I believe that with .ajax you can use .when but you cannot do so with .load. In short, I believe that .ajax is more powerful than .load. For example:

鉴于使用 deferred 和 promise 对象，上述答案可能不再有效。我相信使用 .ajax 你可以使用 .when 但你不能使用 .load 这样做。总之，我相信 .ajax 比 .load 更强大。例如：

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

You get more granular control over the html loading. There is also .fail and .always for failure and "no matter what" cases. You don't get this in load. Hope I am correct on this.

您可以更精细地控制 html 加载。还有 .fail 和 .always 用于失败和“无论如何”的情况。你没有得到这个负载。希望我对此是正确的。