在“花式框”叠加按钮上单击时，Ajax无法按预期工作

Question

I have silly question regarding Ajax and fancy box.i'm new to Ajax. i'm using fancy box in one of my pages, as fancy box does on click of a button it pops up a form which has some input fields and button. On click of the button, tried to make an ajax call which needed to show an indicator until the call is complete.I made a synchronous call but the indicator did'nt show up, but the moment i made it an asynchronous call it displayed correctly. Can any one explain the reason

Update: Have a look at the below code....it works fine and displays the indicator until we get a response from server...But the function when called on click of a button on the fancy box overlay does'nt work with async false isAsync is False

function LoadCarrier(isAsync)
{
   try
  {
    SetCarrierLoadingIndicator("","Loading..");
    xmlHTTPObject1 = GetXMLHTTPObject();
    xmlHTTPObject1.onreadystatechange = OnPopulateCarrierComplete;
    var currentTime = new Date();
    var  parameters =   "";
    var pageNumber=document.getElementById(hdnCarrierCurrentPage).value;
    parameters += "CarrierPage";
    parameters += "^" + pageNumber;
    parameters += "~NetworkIds";
    parameters += "^" + GetAllSelectedNetworks();
    parameters += "~SelectedCarriers";
    parameters += "^" + GetAllSelectedCarriers();
    var parms = "?OPCode=LoadCarrier&Parms=" + parameters + "&RequestTime" + currentTime;
    var ajaxURL = ajaxCallHandlerUrl + parms;
    xmlHTTPObject1.open ("GET", ajaxURL, isAsync);
    xmlHTTPObject1.send(null);
}
catch(exception)
{
    alert(exception);
}
return false;

}

     function OnPopulateCarrierComplete()
    {
     if (xmlHTTPObject1.readyState == 4)
   {
   var result = xmlHTTPObject1.responseText;
   var contents = result.split("[6CE650P$0$NTS3E!]");

   if (contents[0] == "SUCCESS")
   {
        SetCarrierLoadingIndicator("none","");
        if(contents[1].length > 0)
        {
            var details=contents[1].split("[$sEpaRaToR$]");
            document.getElementById(lblCarrier).innerHTML=details[0];
            document.getElementById(lblCarrierPaging).innerHTML=details[1];
            document.getElementById(lblCarrierCount).innerHTML=details[2];
            var tmp=details[3].split(',');
            for(var i=0;i<tmp.length;i++)
            {   
                CarrierList.push(Number(tmp[i]));     
            }
        }
        else
        {
            document.getElementById(lblCarrier).innerHTML="";
            document.getElementById(lblCarrierPaging).innerHTML="";
            document.getElementById(lblCarrierCount).innerHTML="0";
        }
   }
   else
   {
       if(contents[1] == "Session Expired")
       {
            parent.document.location = "Default.aspx";
       }
       else
       {
            alert(contents[1]);
       }
   }
}

}

Answer 1

A synchronous call locks the browser from doing anything until the call is complete, whereas an asynchronous call allows other operations (such as indicator showing) to perform while it's waiting for the results to be returned form your server. So, when you make a synchronous call, the browser will not show your indicator, or do anything else, until it gets a response back from your server.

In short, you should rarely need to make synchronous calls to your server. The "A" in AJAX stands for "Asynchronous" for a reason :).