AJAX is returning readystate=1

Question

I am using Flask with Python. From the Flask method I am trying to return HTML table rows in an AJAX call.

The HTML page has:

<div>
<table id="tableQuestions">

</table>

//AJAX Requests to get
function loadQuestions() {

  var xmlHttp = new XMLHttpRequest();

   xmlHttp.onreadystatechange = function() {
   alert(xmlHttp.readyState + " " + xmlHttp.status);
   if (xmlHttp.readyState==4 && xmlHttp.status == 200) {
       var response = xmlHttp.responseText;
       console.log(response);
       document.querySelector("#tableQuestions").innerHTML=response;
   }
   xmlHttp.open("GET", '/gS', true);
   xmlHttp.send(null);
  }
}

The Flask route has:

#test.mix() returns html table rows

@gbp.route('/gS')
def gS():
    test=mn()
    response = make_response(test.mix(quesCount=4),200)
    response.mimetype="text/html"

In the Safari debugger I can see that the responseText has the table data from the server, but readystate remains 1 and status = 0.

Could you please suggest how I can overcome this issue?

Answer 1

You have

xmlHttp.open("GET", '/gS', true);
xmlHttp.send(null);

inside your xmlHttp.onreadystatechange callback function, which leads to strange effects.

The following code (untested) should behave better:

//AJAX Requests to get
function loadQuestions() {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET", '/gS', true);

  xmlHttp.onreadystatechange = function() {
    alert(xmlHttp.readyState + " " + xmlHttp.status);
    if (xmlHttp.readyState==4 && xmlHttp.status == 200) {
      var response = xmlHttp.responseText;
      console.log(response);
      document.querySelector("#tableQuestions").innerHTML=response;
    }
  }

  xmlHttp.send(null);
}