waiting for an ajax reply

I have a javascript function called GetRequest() that calls the server with $.ajax() and re开发者_开发知识库ceives a json string:

function GetRequest(ThePage) {

RequestedPage = parseInt(ThePageNumber,10);

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "../Pages/MyPage.aspx/GetPage",
    data: "{'ThePage':'" + ThePageNumber + "'}",
    dataType: "json",
    success: function (msg) {
        var data = msg.hasOwnProperty("d") ? msg.d : msg;
        OnSucessCallBack(data);
    },
    error: function (xhr, status, error) {
        alert(xhr.statusText);
    }
});

};

I have a function called ShowData() that calls GetRequest() and must wait until GetRequest receives its data before continuing.

function ShowData() {

//some code that determines the page number

GetRequest(ThePageNumber);

//wait until the data is in

};

I use GetRequest in several places so I can't use its success function in the context of ShowData.

How do I make my function ShowData pause its execution until GetRequest is finished? I thought of changing the OnSuccessCallBack function and determine which function initially called GetRequest() but I'm not sure on how to best do this.

Thanks for your suggestions.

add a function pass-in to GetRequest like so:

function GetRequest(pageNumber, successCallback){

  //I admit this isn't "elegant" but it's most assuredly readable
  var callback;
  if (successCallback == null) {
    callback = //default callback definition here
  } else {
    callback = successCallback;
  }

  //do everything else the same here 
  //except use the callback defined above
}

This gives you the flexibility to add in a separate callback handler for the onsuccess

Alternately, do the same as above, but use the "onComplete" handler unless you need the data specifically on the return (it doesn't appear as tho you do).

I'm going to strenuously suggest that you do use callbacks for asynchronous code instead of trying to shoehorn in sync requests. It's much better to just adopt a coding style that revolves around async requests when working in javascript, especially where you're already doing AJAX (which is by definition intended to be async).

Pass async:false along with the ajax options..

$.ajax({
    type: "POST",
    async:false,
    .
    .
    .
 });

You can make your call only synchronous by using ajax prefilters:

function ShowData() {
    //some code that determines the page number
    $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
        options.async = false;
    });

    GetRequest(ThePageNumber);
    //wait until the data is in
};