Question

I have got below Jquery JSONP two calls, it is for crossdomain calls, now when page is loading it fires these two calls and the problem is now the calls are very fast and before the fast is completed and it fires the second call and this is giving parser error for second call (airxml: is not a function).

Now below code works fine if we have got async: false, in the call, but as per the crossdomain policy it does not support the synchronous calls.

var oXMLHTTP, i, length, oData, sValue, sDisplay, sName, sMatch, oRegExp;
     var qr = "&jsonpcall=true";
   if (!oDropdown)
        return;

    oXMLHTTP = this.createXMLHttpRequest();
    this.FilterUrl = sFilterUrl;
    if (sFilterUrl != previousFilterUrl)
    {

        var regUrl = sFilterUrl;               
        var regquest = $.ajax({
            url: regUrl+qr,  
            type: "GET",
            async: false,   
            cache: true,                            
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            jsonpCallback: "airport",                 
            success: function(data, textStatus, jqXHR) 
            {                
                if (data.result[0] != '')
                {
                        sFilterData = data.result[0];                   
                }          
            }
            }); 
        previousFilterUrl = sFilterUrl;
    }

    if(!fireRequestOnce ||(fireRequestOnce && retrievedData == null))
    {       
         var regUrl = sXML;  
         var airquest = $.ajax({
            url: regUrl+qr, 
            async: false,                 
            dataType: 'jsonp',
            jsonpCallback: 'airxml',            
            cache: true,
            success: function(data, textStatus, jqXHR) 
            {
                    var xmlDoc = $.parseXML(data.myresult);
                oData = xmlDoc.documentElement.childNodes;
            }
        });
    }

Please suggest what can be the best approach, I have tried putting variable after the success event fires and then was trying to call second call, but it didn’t worked.

Answer 1

When you need sequential AJAX call, try to avoid the async:false or jQuery.ajaxSetup({async:false}); What these option does is , it will lock the browser until the AJAX call completes. In this type of situation I prefer ajaxQueue plugin by gnarf.

What this plugin will do is, it will en-queue all incoming AJAX requests, and process one after another. It is pretty simple to use as shown here.