html file
<body>
<div id="d1"></div>
<button onclick = "getlist () "> a list of users </ button>
<table id="content" border="1px">
<thead>
<td>uid</td>
<td>uname</td>
<td>upwd</td>
<td>email</td>
<td>phone</td>
<td>avatar</td>
<td>user_name</td>
<td>gender</td>
</thead>
</table>
<script>
function getlist(){
// create an asynchronous objects
var xhr=new XMLHttpRequest();
// listeners get a response
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
// get response data using dom the results into div
var arr=JSON.parse(result);
console.log(arr);
for(var i=0;i<arr.length;i++){
content.innerHTML+=`
<tr>
<td>${arr[i].uid}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].upwd}</td>
<td>${arr[i].email}</td>
<td>${arr[i].phone}</td>
<td>${arr[i].avatar}</td>
<td>${arr[i].user_name}</td>
<td>${arr[i].gender}</td>
</tr>
`;};
};
};
// open connection creation request
xhr.open("get","http://127.0.0.1:8080/ajax/userlist",true);
// send request
xhr.send();
};
</script>