<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
#box{
width:1000px;
min-height:100px;
padding:20px;
border:1px solid #999;
}
</style>
</head>
<body>
<h1>ajax 处理复杂的响应结果</h1>
<button onclick="loadHtml()">加载</button>
<div id="box"></div>
<script>
function loadHtml(){
// ①实例化 XMLHttpRequest对象
if (window.XMLHttpRequest) {
//非IE IE7+
var xhr = new XMLHttpRequest();
} else {
//IE 6
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//② 给xhr 绑定事件， 检测请求的过程
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
//如果成功介绍到响应
if (xhr.status == 200 && xhr.readyState == 4) {
eval("var data = "+xhr.responseText);
//处理数据
makeHtml(data);
}
}
//③ 进行请求的初始化
xhr.open('get', '6.php', true);
//④ 正式发送请求
xhr.send();
}
//处理返回数据的函数
function makeHtml(data){
var table = document.createElement("table");
table.width = 800;
table.border =1;
table.cellSpacing =0;
table.cellPadding =5;
//添加表头
var tr = table.insertRow(0);
var th = document.createElement('th');
th.innerHTML = "id";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "name";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "sex";
tr.appendChild(th);
var th = document.createElement('th');
th.innerHTML = "grade";
tr.appendChild(th);
//添加数据
for (var i =0 ;i < data.length; i ++){
var tr = table.insertRow(i+1);
tr.insertCell(0).innerHTML = data[i].id;
tr.insertCell(1).innerHTML = data[i].name;
tr.insertCell(2).innerHTML = data[i].sex;
tr.insertCell(3).innerHTML = data[i].grade;
}
//追加 table 清空原先的
document.getElementById('box').innerHTML = "";
document.getElementById('box').appendChild(table);
}
</script>
</body>
</html>
