jQuery get() method - not sure what it does with parameters it receives in this example

Question

Hey all,

I read from the jQuery website, that get() loads data from the server using a HTTP GET request. But this explanation doesn't suffice, such as for the example I provide below:

Just to give some context for my question, when we assign the value of two parameters to a variable expoptions:

var expoptions = $.extend(defaults, options);

The defaults parameter is an object literal of default key/value pairs that are not defined in the options parameter:

$.fn.explorerGrid = function(options) {
var defaults = {
    order: 'make',
    page: 1,
    id: 0,
    per_page: 20,
    url: "/honda",
    additional: function(){return {ololo:'trololo'};},
};

The options parameter is an object literal of key/value pairs passed as a parameter when the explorerGrid() method is invoked:

Honda.prototype.explorer_create=function(){
var component = this;
this.opts_exp = {
    order: this.default_order_str,
    url: "/"+this.resource_url_str,
    additional: function(){return component.filter_func();}
};
jQuery(this.exp_id).explorerGrid(this.opts_exp); //exp_id is just a  div container that holds a table we intend to populate with data

We then iterate through our Honda object's object literals, assigning per_page (e.g. 20), order (e.g. 'make'), page (e.g. 1) of our expoptions object to some global variables:

return this.each(function() {
var expobj = $(this);
var params = {
    per_page: expoptions.per_page,
    order   : expoptions.order,
    page    : expoptions.page,
};

---- The part I don't understand ---- when we call the get() method, we pass in some arguments, one is expoptions.url (e.g. '/honda'), params (which holds an object literal of key/value pairs that specify how we want to populate the table and it also contains another object literal from an additional() method, which contains key/value pairs of filtered criteria, such as: 'Year: 2008', 'Make: Honda'), and then we call a function, which appears to be an anonymous function, passing in a parameter called data which I'm not sure where this is coming from because, like I said, this function appears not to be defined anywhere, and then it invokes the html() method on the expobj object, which is our object, such as Honda, and pulling in that data parameter.I'm not sure what the get() method is supposed to be doing with these three parameters: expoptions.url, params, function(data). If anyone knows what the get() method is doing with these parameters, I'd appreciate some explanation:

jQuery.get(expoptions.url,
params,
function(data)
{
    expobj.html(data);


    expobj.find("tr th.sortable").click(function(){
        if($(this).hasClass('sortedasc')){
            expoptions.order = "-" + $(this).attr('id');}

        if($(this).hasClass('sorteddesc')){
            expoptions.order = $(this).attr('id');}

        if(!$(this).hasClass('sorteddesc') && !$(this).hasClass('sortedasc')) {
            expoptions.order = $(this).attr('id');}
        expoptions.find_page_for_resource = 0;
        expobj.explorerGrid(expoptions);
    });

    expobj.find("#gridpage").change(function(){
        expoptions.page = 1;
        expoptions.per_page = $(this).val();
        expobj.explorerGrid(expoptions);
    });

);

Thanks for any response.

Answer 1

simply put, the third argument to .get, the anonymous function which begins with

function(data)
{
    expobj.html(data);

is called by the browser once the HTTP GET request finishes, and it's called with the response body, hence the data parameter.

the expoptions.url tells it where to GET the data from, while the second argument is used to build the "query string", the "?foo=bar&this=that".

Answer 2

The 3 params that .get() takes are used for 1. the url that you are getting. 2. the params that you want to send to the url. 3. the function you want to run when the page you are getting is finished loading

The function is passed 3 params, the resultant data of your call the text status of the call you made and the XMLHttpRequest request object e.g. function(data, textStatus, XMLHttpRequest);

The function you write needs to have data if you are retuning data with the url that you are calling with .get().