方法一、不封装
window.onload = function(){
var btns = document.getElementsByTagName("button");
var tbls = document.getElementsByTagName("tbody");
//处理数据
function handlerData(data){
//反序列化 将字符串解析为对象
var stus = JSON.parse(data);
//遍历删除tbody中所有的子元素
Array.prototype.slice.call(tbls[0].children,0).forEach(
function(item){
tbls[0].removeChild(item);
});
//stus纯数组直接用forEach遍历出数组元素
stus.forEach(function(stu){
//每遍历出一个学生创建一个tr
//{ id,name,age,gender} 遍历出来的是一个学生对象
var newTr = document.createElement("tr");
//每个学生继续遍历其属性 因为每个学生当中的属性占一个td
for( var key in stu){
//每遍历一个属性创建一个td
var newTd = document.createElement("td");
//把属性的值(内容)拿出来放入td当中
newTd.innerHTML = stu[key]; //属性值 innerText
//把td追加到tr
newTr.appendChild(newTd);
}
tbls[0].appendChild(newTr);
});
}
//点击get请求按钮,像服务器发送请求
btns[0].onclick = function(){
//ajax
//1 实例化XMLHttpReuquest
var request = new XMLHttpRequest();
//2 指定请求
request.open("GET","data.json"); //后期-服务器技术-"getAllstudents.action?class =1"
//加斜杠为服务器的根目录 绝对路径
//3 设定请求头
request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
//4 发送请求头
request.send();
//处理响应
//绑定一个on事件 监听请求完成,然后处理数据
request.onreadystatechange = function(){
console.log(request.readyState); //2,3,4
if(request.readyState === 4 && request.status ===200){
//获取到响应的文本数据
var text = request.responseText; //获取到字符串类型的json 打印在控制台的字符串
console.log(text);
// 封装 (回调)
handlerData(text); //回调
//var stus = JSON.parse(text);
//反序列化 将字符串解析为对象
// var stus = JSON.stringify(text);
//console.log(stus);
}
};
};
};
方法二、封装ajax请求
window.onload = function(){
var btns = document.getElementsByTagName("button");
var tbody = document.getElementsByTagName("tbody")[0];
btns[0].onclick = function(){
//初始化表格
Array.prototype.slice.call(tbody.children,0).forEach(function(item){
item.parentNode.removeChild(item);
});
//加载数据
getXMLData("data/students.xml"
,function(data){
var stus = data.children[0].children;
stus = Array.prototype.slice.call(stus,0);
stus.forEach(function(stu){
var newTr = document.createElement("tr");
var id = stu.getAttribute("id");
var idTd = document.createElement("td");
idTd.textContent = id;
newTr.appendChild(idTd);
var attrs = stu.children;
for(var i=0;i<attrs.length;i++){
var newTd = document.createElement("td");
newTd.textContent = attrs[i].textContent;
newTr.appendChild(newTd);
}
tbody.appendChild(newTr);
});
});
/*
getTextData("data/students.json"
,function(data){
console.log(data); //Document
});
*/
};
};
//封装 get请求-XML
function getXMLData(url,callback){
//发送请求
var request =new XMLHttpRequest();
request.open("GET",url);
request.send();
//处理响应
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
//获取到响应的XML格式
var dom = request.responseXML;
callback(dom);
}
};
}
//封装 get请求
function getTextData(url,callback){
//发送请求
var request =new XMLHttpRequest();
request.open("GET",url);
request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
//json数据格式
//request.setRequestHeader("Content-Type","application/json");
request.send();
//处理响应
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
//获取到响应的文本数据
var text = request.responseText;
callback(text);
}
};
}