<!DOCTYPE html><html><head><meta charset="utf-8"/><style type="text/css">#p1{
background-color:lightblue;
text-align:center;
font-size:50px;}#table1{
width:80%;
margin:auto;}</style></head><body><p id="p1">ajax</p><button id="button1" onclick="myFunction()">读取数据</button><table id="table1" border="1"><tr><th>a</th><th>b</th><th>c</th></tr></table></body><script type="text/javascript">
let http="";
let text;
function drawtable(list){for(var a of list){
http+="<tr>"+"<td>"+a.first+"</td>"+"<td>"+a.second+"</td>"+"<td>"+a.third+"</td>"+"</tr>"}
let table = document.getElementById("table1");
let temp = table.innerHTML;
table.innerHTML = temp+http;}
function loadjson(file,cfun){
text=new XMLHttpRequest();
text.onreadystatechange = cfun;
text.open("Get",file,true);
text.send();}
function myFunction(){loadjson("ajax_learn_info.json",function(){if(text.readyState==4&&text.status==200){
let list=JSON.parse(text.responseText);drawtable(list);}})}</script></html>