jQuery ajax calling method

Question

I've wrote the following function so I don't need to rewrite ajax calls for every event I have.

function ajaxCall(){
        var params = new Array();

        for(var i = 0; i < arguments.length; i++ ){
            params[i] = arguments[i];
        }

        $.ajax({
            url: params[0],
            type: params[1],
            data: params[2],
            dataType : "json",
            beforeSend: function(x) {
                if(x && x.overrideMimeType){
                    x.overrideMimeType("application/json;charset=UTF-8");
                }
            }
        });
    }

Since ajax is asynchronous I cannot simply return the result from the ajaxCall function when call is successful. How can I create a success call back function? I've tried out this but it's probably wrong. Please help me on since I'm new to jquery & javascript.

ajaxCall("/getItemGroups", "POST" , data).success(function(){
            alert("success");
        });

use `success:callback` in ajax call and send a function as 4 argument when callin the ajacCall — bipen, May 08 '13 at 09:53
the ajax call returns a promise: http://api.jquery.com/deferred.promise/ — David Fregoli, May 08 '13 at 09:55

David Hedlund · Accepted Answer · 2013-05-08T09:57:06.890

There is nothing in your code that motivates grabbing the arguments collection manually. Use named parameters:

function ajaxCall(url, type, data, callback){
    $.ajax({
        url: url,
        type: type,
        data: data,
        dataType : "json",
        success: callback,
        beforeSend: function(x) {
            if(x && x.overrideMimeType){
                x.overrideMimeType("application/json;charset=UTF-8");
            }
        }
    });
}

Invoked like so:

ajaxCall("/getItemGroups", "POST", data, function() {
    alert('success');
});

I must say, though, that the resulting function adds very little to what $.ajax does manually. You may be more interested in looking at $.ajaxSetup to define a global beforeSend callback, for instance.

Anywhere in your code, call

$.ajaxSetup({
    dataType : "json",
    beforeSend: function(x) {
        if(x && x.overrideMimeType){
            x.overrideMimeType("application/json;charset=UTF-8");
        }
    }
});

Then your

ajaxCall('/getItemGroups', 'POST', data, function() { ... });

Would be identical to

$.post('/getItemGroups', data, function() { ... });

(There is of course a $.get equivalent)

Your answer is awesome! but one question though! say I have a place where I don't need any data to be passed. So how can when I write the function with 3 params, there will be an error! ho can I bypass this issue! — Imesh Chandrasiri, May 08 '13 at 10:12
@DimalChandrasiri: JavaScript isn't picky about parameters. You can name two parameters and still call the function passing four, and you'll be able to access the others from the `arguments` collection, or conversely, you can have the `ajaxCall` signature that I outline above, but call it passing only three parameters, and `callback` will be `undefined`, meaning you'll call `$.ajax` setting `success: undefined`, which is not a problem at all. — David Hedlund, May 08 '13 at 10:27

score 3 · Answer 2 · answered May 08 '13 at 09:56

The jQuery.ajax() function returns a Deferred object, which your ajaxCall function can return. Then you can use the Deferred object's .done() function to add a success callback function to it.

function ajaxCall() {
    ...

    return $.ajax({
        // options
    });
}

Then use it like so:

ajaxCall(arguments).done(function(data) {
    // your logic here
});

Darren · Answer 3 · 2013-05-08T09:56:35.970

Use the success option:

   $.ajax({
            url: params[0],
            type: params[1],
            data: params[2],
            dataType : "json",
            success: function(data) { alert(data); },
            beforeSend: function(x) {
                if(x && x.overrideMimeType){
                    x.overrideMimeType("application/json;charset=UTF-8");
                }
            }
        });

http://api.jquery.com/jQuery.ajax/

  function AJAXCall(successFunction) {
       $.ajax({
                url: params[0],
                type: params[1],
                data: params[2],
                dataType : "json",
                success: successFunction,
                beforeSend: function(x) {
                    if(x && x.overrideMimeType){
                        x.overrideMimeType("application/json;charset=UTF-8");
                    }
                }
            });
  }

I could simply do that if the success function doesn't change from call to call, but in my case, the success code changes with the call! — Imesh Chandrasiri, May 08 '13 at 09:51

score 0 · Answer 4 · answered May 08 '13 at 09:52

0

I use something like this:

AjaxGET = function (myUrl, myData) {
    var result = $.ajax({
        type: "GET",
        url: myUrl,
        data: myData,
        dataType: 'html',
        async: false,
        success: function (data) {
        }
    }) .responseText ;
return  result;
}

var myAjaxResponce = AjaxGet(myUrl, myData);

answered May 08 '13 at 09:52

andrew

2,058
2
25
33

@anoooooooooooooooop if you have a single call, its perfect. You need to check if your ajax call returns or not any kind of data. I used it after user interactoin with my page. Explain why its bad practice. – andrew May 08 '13 at 10:30
please refer this link http://stackoverflow.com/questions/3141396/ie7-hangs-when-using-to-much-ajax-calls-with-async-false – Anoop Joshi P May 08 '13 at 10:34
@anoooooooooooooooop i say it again, single call, not multiple calls. Call is made after user interction, NOT during page loading. – andrew May 08 '13 at 10:48

jQuery ajax calling method

4 Answers4