从服务器获得响应后，不会附加JSON

Question

I'm trying to get an array of json from my web-service page which works fine alone. My problem is after I make the ajax request, the json data is not appended.

this is the web-service.php page

    $query = "SELECT * FROM courses ;";
    $result = mysqli_query($db, $query);
    $q = "SELECT COUNT(*) FROM courses";
    $num_of_rows = mysqli_query($db, $q);
    $number = mysqli_fetch_array($num_of_rows);

    $counter = 0;
    print('{"lenght":"');
    print $number['COUNT(*)'];
    print('",');
    print('"data":[');
    while ($row = @mysqli_fetch_array($result)) {
      echo json_encode($row);
      if ($counter === ($number['COUNT(*)'] - 1)) { } else {
        print(",");
      }
      $counter++;
    }
    print("]}");

this is the ajax request in home.js

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
     if (this.readyState == 4 && this.status == 200) {
       var json = JSON.parse(this.responseText);
       $("#courses").append(json);        
     } else {
       console.log("readyState "+this.readyState);
       console.log("status "+this.status);
     }
    };
    xhttp.open("GET", "./web-service.php", true);
    xhttp.send();

the console shows this

    readyState 1         home.js:35:9
    status 0             home.js:36:9
    readyState 2         home.js:35:9
    status 200           home.js:36:9
    readyState 3         home.js:35:9
    status 200           home.js:36:9