Как правильно использовать обратные вызовы и объект XMLHTTPRequest для запроса базы данных, хранящейся на диске

Question

Прежде чем я начну свой вопрос, обратите внимание, что большая часть этого кода находится на ранних стадиях разработки. Таким образом, многие из присутствующих вещей предназначены только для обеспечения базовой функциональности в целях тестирования. Поэтому, пожалуйста, сосредоточьтесь только на данном вопросе.

В любом случае, у меня есть эта функция loginUser...

    function loginUser()
    {
      var numRowsReturned;
      var username = document.getElementById('login_username').value;
      var password = document.getElementById('login_password').value;
      var queryString = "SELECT COUNT(*) FROM User WHERE Username = '" + username + "' AND Password = '" + password + "'";

      try
      {
        var rtn = grabData(queryString);
      }
      catch(e){alert(e);}

      //setTimeout(function()
      //{
        numRowsReturned = rtn[0].values[0];
        console.log(numRowsReturned);
      //}, 4000);

      if(numRowsReturned != 1)
      {
        var errorMsg = 'Our records do not match what you have entered.  Please try again.';
        var err = document.createElement("div");
        err.setAttribute("class", "alert alert-danger fade in");
        err.innerHTML = '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Error!</strong> ' + errorMsg + '</a>';

        document.getElementById("main_content").insertBefore(err, document.getElementById("main_content").firstChild);
      }
      else
      {
        queryString = "SELECT * FROM User WHERE Username = '" + username + "' AND Password = '" + password + "';";

        try
        {
          var rtn = grabData(queryString);
        }
        catch(e){alert(e);}


      }
    }

из которых захватывает входные значения входа пользователя и использует их для запуска запроса, возвращающего количество учетных записей с этой информацией. Если возвращается счетчик 1, он вызовет функцию grabData, которая запрашивает в базе данных всю необходимую информацию для входа в систему для этой учетной записи и сохраняет ее в массиве HTML. Если что-либо, кроме 1, возвращается, оно выдает ошибку пользователю. Вот грабДата...

    function grabData(queryString)
    {
      var db, reader, xhr, holder;
      var xhr = new XMLHttpRequest();

      xhr.onload = function()
             {
              var uIntArray = new Uint8Array(this.response);
              db = new SQL.Database(uIntArray);

              holder = db.exec(queryString);
              console.log(holder);
             };

      xhr.onreadystatechange = function()
                   {
                       if(xhr.readyState == 4 && xhr.status == 200)
                      console.log('here!');
                   };

      xhr.open("GET", "http://192.168.1.11:8080/pages/finalProj.db", true);
      //xhr.setRequestHeader("Content-Type", "text/xml");
      xhr.responseType = "arraybuffer";

      xhr.send(null);

      return holder;
    }

С моим кодом я могу подключиться к базе данных и получить правильные данные. Однако, когда я пытаюсь использовать эти данные, из-за того, что этот раздел кода является асинхронным, чаще всего запрос еще не завершен или HTML-массив не заполнен. Таким образом, я получаю ошибку "не могу прочитать свойство неопределенного".

Таким образом, я просто задаюсь вопросом - как правильно использовать обратный вызов в этом коде, чтобы не выполнять какой-либо дополнительный код, пока запрос не будет завершен и массив не заполнится? Заранее спасибо.