博文
Ajax异步获取Json格式数据渲染Table控件
|||
在前面的博文中，已经提及到Ajax中的相关属性和方法以及Json格式的数据文件，本文将尝试以AppServ为应用服务器，通过Ajax异步请求（GET和POST）的方式获取服务器端JSON格式的数据，然后利用Json数据创建Table。此例简单，编写此文的目的一方面可以学习和巩固JavaScript等相关知识，另一方面，还可以为我们对控件的开发提供一种良好的思路。
1. 编写简单的Json格式的数据文件，内容如下：
{
tableHeader: ['序号', 'ID', '时间', '金额']
}
tableHeader: ['序号', 'ID', '时间', '金额']
}
2. 编写HTML页面，核心内容如下：
<body>
<!-- 用于生成表格的DIV -->
<div id="tableHTML" style="font-family: Consolas;"></div>
<!-- 用于分页显示 -->
<div id="divPage"></div>
</body>
<!-- 用于生成表格的DIV -->
<div id="tableHTML" style="font-family: Consolas;"></div>
<!-- 用于分页显示 -->
<div id="divPage"></div>
</body>
这里需要引入JavaScript的基础类库——prototype.js，prototype.js是对JavaScript的扩展，能够很好的支持Ajax与服务器端的通信，是一种具有很大实用价值的JavaScript类库。
3. 编写creatXHR函数，返回Ajax XHR（XMLHttpRequest）对象，核心内容如下：
function createXHR(){
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "String") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i , len;
for (var i = 0, len = versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (error) {
alert("sorry, something is error!");
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (typeof arguments.callee.activeXString != "String") {
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i , len;
for (var i = 0, len = versions.length; i < len; i++){
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (error) {
alert("sorry, something is error!");
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
} else {
throw new Error("No XHR object available.");
}
}
4. 创建XHR对象并向服务器端发送请求，响应成功后返回JSON格式的数据，核心内容如下：
function startRequest(){
try{
req.onreadystatechange = handleStateChange;
req.open("GET", "table.json", true);
//接收请求主体发送给服务器的参数,不发送需要将其置为null.
req.send(null);
}catch(exception){
alert("发送请求错误！");
}
}
function handleStateChange(){
//检测请求/响应过程的当前活动阶段
if(req.readyState == 4){
if ((req.status >= 200 && req.status < 300) || req.status == 304){
// 取得返回字符串
var resp = req.responseText;
// 构造返回JSON对象的方法
var func = new Function("return " + resp);
// 得到JSON对象
var json = func();
// 显示返回结果
tableHeader = json.tableHeader;
} else {
alert("Request was unsuccessfull: " + req.status);
}
}
}
try{
req.onreadystatechange = handleStateChange;
req.open("GET", "table.json", true);
//接收请求主体发送给服务器的参数,不发送需要将其置为null.
req.send(null);
}catch(exception){
alert("发送请求错误！");
}
}
function handleStateChange(){
//检测请求/响应过程的当前活动阶段
if(req.readyState == 4){
if ((req.status >= 200 && req.status < 300) || req.status == 304){
// 取得返回字符串
var resp = req.responseText;
// 构造返回JSON对象的方法
var func = new Function("return " + resp);
// 得到JSON对象
var json = func();
// 显示返回结果
tableHeader = json.tableHeader;
} else {
alert("Request was unsuccessfull: " + req.status);
}
}
}
5. 生成Table，内容如下：
//生成表格
createTable: function(tableHeader, tableData){
if (tableHeader == null) {
return "";
}
var tableHTML = '<table class="tbData">';
tableHTML += '<tr>';
for(var i=0; i<tableHeader.length; i++) {
tableHTML += '<th>' + tableHeader[i] + '</th>';
}
tableHTML += '</tr>';
if(tableData != null){
for(var i=0; i<tableData.length; i++) {
tableHTML += '<tr>';
for(var j=0; j<tableData[i].length; j++) {
tableHTML += '<td>' + tableData[i][j] + '</td>';
}
tableHTML += '</tr>';
}
}
tableHTML += '</table>';
return tableHTML;
}
createTable: function(tableHeader, tableData){
if (tableHeader == null) {
return "";
}
var tableHTML = '<table class="tbData">';
tableHTML += '<tr>';
for(var i=0; i<tableHeader.length; i++) {
tableHTML += '<th>' + tableHeader[i] + '</th>';
}
tableHTML += '</tr>';
if(tableData != null){
for(var i=0; i<tableData.length; i++) {
tableHTML += '<tr>';
for(var j=0; j<tableData[i].length; j++) {
tableHTML += '<td>' + tableData[i][j] + '</td>';
}
tableHTML += '</tr>';
}
}
tableHTML += '</table>';
return tableHTML;
}
6. 启动服务，在地址栏输入：http://localhost:8888/4/1/，查看效果（如下图所示）。
https://blog.sciencenet.cn/blog-448935-604227.html
上一篇：利用JS生成分页式table
下一篇：关于prototype的一个Demo
