Asynchronously loading Panels using JQuery in ASP.NET

I have a page in ASP.NET that has different panels. I want to load those panels asynchronously and/or开发者_开发百科 synchronously

For e.g: When the page loads I have following DIVs(sections) in the page:

<div id=panel1> contents for panel1 </div>
<div id=panel2> contents for panel2 </div>
<div id=panel3> contents for panel3 </div>
<div id=panel4> contents for panel4 </div>

I'd like to load panel 1 and Panel 2 synchronously so panel 3/4 will wait until panel 2 is finished. Once panel 2 is done, panel 3/4 will load asynchronously.

There are probably many ways to do this with or without jQuery, but it would be nice to have a simple call structure. Perhaps something like:

LoadPanel(1,false)
LoadPanel(2,false)
LoadPanel(3,true)
LoadPanel(4,true)

First parameter is Panel ID, and Second is to specify Sync/Asyn call.

Any suggestion how I can do this? would it be easier to use JQuery Queue plugin?

Thanks in advance.

Yes, you could do it the following way

function LoadPanel(panelNumber, async){
   ...
   $.ajax({
      ...
      async: async //This does the trick
   })
}

And that's it! The async parameter in $.ajax does exactly that, tell if the request has to be asynchronous or not.

Hope this helps. Cheers