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

Question

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

Answer 1

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.

Answer 2

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);   } });