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

Does any开发者_StackOverflow中文版one know what is the difference between $("#id").load and $.ajax?

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 XmlHttpRequest object. 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 json as 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 post or get, you could use $.post() or $.get() respectively.

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.

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.

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 post as shown at the first example but instead of doing this you can use $.post() because you know what you are doing is post so this version is more simplified and easy to work on.

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 :

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

in the example above, you can easly inject the return html into #objectID element. 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 data object 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.

$("#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 #feeds html element in the example right above.

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

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

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

is probably equivalent to:

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

A more concise summary and the most important difference is that $.ajax allows you to set content-type and 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.

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

• caching
• error handling
• filtering of data
• password

plus others.

From the documentation ...

$(selector).load(..)

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

$.ajax(...)

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

load is 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(...).

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

I encourage you to read the documentation.

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

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

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:

      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.