AJAX: Is this bad practice?

Question

I've been using Ajax for a little over a month, and I've been converting a lot of my documents to use JQuery/Ajax. I've found a lot of the code is redundant, so I've been copy/pasting from one doc to another. Tonight though, after copy/pasting some Ajax code, I forgot to change the url to the reflect the doc i pasted to. But when I ran it, the code worked, using the ajax's data to call the PHP from the other document. While this worked well and certainly cuts down on file size and a lot of copy/pasting, I need to know if this is bad practice?

For example, my working document is wsparticipation.php:

function loadgroups() {
    $.ajax({
        url: 'wsparticipation.php',
        type: 'POST',
        async: false,
        data: { 'setgroups': 1 },
        success: function(re) {
            $('#groupid').html(re);
        }
    });
}

And a function just below it, one I pasted from wsmonthlyreport.php, uses the url : wsmonthlyreport.php. And I didn't copy the getmonth or getyear "procedures" to wsparticipation.php, yet it works as if I did.

function loadmonthyear(){
    $.ajax({
        url: 'wsmonthlyreport.php',
        type: 'POST',
        async: false,
        data: { 'getmonth': 1 },
        success:function(re) {
            $('#showmonth').val(re);

            $.ajax({
                url: 'wsmonthlyreport.php',
                type: 'POST',
                async: false,
                data: { 'getyear': 1 },
                success: function(re){
                    $('#showyear').val(re);
                }
            });
        }
    });
}

So is this good or bad practice, calling procedures from another url instead of the current url?

@ArunPJohny - all i've seen show me to do it that way. Like I said, I'm new to JQuery/Ajax. Why is it bad? — fmc, Jan 30 '16 at 05:50
[Ajax: Why asynchronous is almost always better](http://javascript.about.com/od/ajax/a/ajaxasyn.htm) — paulsm4, Jan 30 '16 at 05:52
@paulsm4 - so i shld be setting `async : true,` ? Seems like every time I learn something, I learn it the wrong way =) — fmc, Jan 30 '16 at 05:53
The best way is to not use the "async" option at *all*, let things work asynchronously (by default), and use the success (and error) handlers like you're doing now. See also: [jQuery.ajax() method's async option deprecated, what now?](http://stackoverflow.com/questions/11448011/jquery-ajax-methods-async-option-deprecated-what-now). TO ANSWER YOUR ORIGINAL QUESTION: get Firefox/Firebug, or Chrome developer tools, and observe the requests your Javascript/Ajax code makes, and the HTTP responses returned. — paulsm4, Jan 30 '16 at 05:56

score 1 · Answer 1 · answered Jan 30 '16 at 08:43

@Landslyde, I just check your code and check all the comments. you are writing ajax in a good way. you can use error and before send blocks also if needed.

we should use async: false in some special case if required. Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.

As i can check in the called function loadmonthyear() there is no need to set asyc:false becuase this will call only after success of first request.

score 0 · Answer 2 · answered Jan 30 '16 at 08:32

I could not say that :

async : false

is bad convention for coding, if its really bad then why jquery develop that one. Use of async:false did not allow browser to run code before ajax completion which are written just below ajax code; browser halts the execution for the completion of ajax call which we call the synchronous call.

Suppose, we need initialize JQuery UI component and data must be loaded from ajax, UI component may be initialized with out data, to ensure such then async:false is only the way to guarantee, otherwise for the general use you should use async:true;

AJAX: Is this bad practice?

2 Answers2