W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  border-bottom: 3px solid #cc9900;
  color: #996600;
  font-size: 30px;
}
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<h2>Customers</h2>
<div id="id01"></div>

xmlhttp.onreadystatechange=function() {
  if (this.readyState == 4 && this.status == 200) {
    myFunction(this.responseText);
  }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
  var arr = JSON.parse(response);
  var i;
  var out = "<table>";

for(i = 0; i < arr.length; i++) {
    out += "<tr><td>" + 
    arr[i].Name +
    "</td><td>" +
    arr[i].City +
    "</td><td>" +
    arr[i].Country +
    "</td></tr>";
  }
  out += "</table>";
  document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>h1 {  border-bottom: 3px solid #cc9900;  color: #996600;  font-size: 30px;}table, th , td  {  border: 1px solid grey;  border-collapse: collapse;  padding: 5px;}table tr:nth-child(odd) {  background-color: #f1f1f1;}table tr:nth-child(even) {  background-color: #ffffff;}</style></head><body>​<h2>Customers</h2><div id="id01"></div>​<script>var xmlhttp = new XMLHttpRequest();var url = "https://www.w3schools.com/js/Customers_MYSQL.php";​xmlhttp.onreadystatechange=function() {  if (this.readyState == 4 && this.status == 200) {    myFunction(this.responseText);  }}xmlhttp.open("GET", url, true);xmlhttp.send();​function myFunction(response) {  var arr = JSON.parse(response);  var i;  var out = "<table>";​  for(i = 0; i < arr.length; i++) {    out += "<tr><td>" +     arr[i].Name +