Making sure an asyncronous GET/POST request has completed before continuing

Question

Hey guys ive been trying to solve this issue for the last few hours and decided id chuck it up here before i got to sleep, anyway the issue is that i need to make sure that the GET/POST request is 100% processed before continuing though the code, i hackly solved this with a timer from the firefox addon sdk but because this is java script it locks down the ui, so i have been searching for a solution and i stumbled across a potential solution by Felix Kling, "How do I return the response from an asynchronous call?". though i tried it with no success so i was wondering if someone can show me what ive done wrong or if i cant even use this solution for what i want done.

download_status(download_database());

function download_status(downloadStatus){
  if(downloadStatus==0){
    console.log(regexArray.length);
  }
  else{
    console.log("oh no");
  }
}

function download_database(){
  var downloadDone = 0;
  var requestDB = request.Request({
    url: "http://phyzical.pythonanywhere.com/download_db/",
    onComplete: function(response){
      console.log(response.statusText);
      if(response.json == null){
        console.log("cannot retreive json properly.")
      }
      else{
        var dbInfoLength = response.json.length;
        var idNumber = 0;
        for(var x=0;x<dbInfoLength;x++){ 
          try{
            var patt1=new RegExp(response.json[x].regex);
            idArray[idNumber] = response.json[x].id;
            regexArray[idNumber] = response.json[x].regex;
            incorrectMessageArray[idNumber] = response.json[x].incorrect_information;
            correctMessageArray[idNumber] = response.json[x].correct_information;
            idNumber++;           
          }
          catch(e){
            console.log("The annotation with the id: \""+ response.json[x].id+" " + e.message + "\" is wrong.");
          }
        }
        downloadDone = 0;
      }
    },
  }).get();
  return downloadDone;
}

sadly the regexArray.length logs "0" followed by the " OK" from the GET and then one of the catches fires so i know information is being stored into the arrays simply that the same issue i started with is still present.

any help would be appreciated.

Answer 1

I haven't implemented any of your logic, but I have rewritten your request code (since that's what you were having trouble with) to use jQuery's AJAX method instead of Firefox's request.

<h1>JSON Data Fetch Test</h1>
<div id="data"></div>

<script src="jquery-2.0.3.min.js"></script>
<script>
var dataBlock = document.getElementById("data");

function GetData()
{
    try
    {
        $.ajax({
            url: "http://phyzical.pythonanywhere.com/download_db/",
            crossDomain: true,
            dataType: 'text',
            context: document.body,
            error: reportError
        }).done(processResponse);
    }
    catch(e)
    {
        dataBlock.textContent = "Request Error: " + e.message;
    }
}

function reportError()
{
    dataBlock.textContent = "Some kind of problem...";
}

function processResponse(data) 
{
    dataBlock.textContent = data;
    var obj = JSON.parse(data);
    /*Do all the things you need to do with your data here.*/
}

dataBlock.textContent = "Fetching data...";
GetData();
</script>