Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 547
Erx_VB.NExT.Coder Avatar asked Jan 16 '10 08:01

Erx_VB.NExT.Coder


People also ask

What are $( and $(( )) in bash?

$(...) is an expression that starts a new subshell, whose expansion is the standard output produced by the commands it runs. This is similar to another command/expression pair in bash : ((...)) is an arithmetic statement, while $((...)) is an arithmetic expression. Follow this answer to receive notifications.

What does ${} mean in bash?

${} Parameter Substitution/Expansion A parameter, in Bash, is an entity that is used to store values. A parameter can be referenced by a number, a name, or by a special symbol.

What is differnce between $this and this in JavaScript?

this - is a DOM element you assigned the event handler to. $(this) - is a jQuery object created from that element. $this - typically, a variable holding the result of $(this)

What is $() in jQuery?

$() = window. jQuery() $()/jQuery() is a selector function that selects DOM elements. Most of the time you will need to start with $() function. It is advisable to use jQuery after DOM is loaded fully.


2 Answers

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.

like image 162
Tarik Avatar answered Sep 25 '22 15:09

Tarik


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);   } }); 
like image 35
cletus Avatar answered Sep 25 '22 15:09

cletus