ajax数据读取和绑定

　　如何进行ajax数据读取和绑定呢？

  • 首先创建一个AJAX对象
  • 实现数据绑定
  • 实现隔行变色
  • 编写表格排序的方法（实现按照年龄这一列进行排序）
  • 通过文档碎片，把排序后的最新顺序，重新添加到tBody中（通过文档碎片，有效的避免了回流耗性能的问题，浏览器不用每当HTML结果发生改变，就重新对当前的页面进行渲染）

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         .bg {
  8             background: yellowgreen;
  9         }
 10     </style>
 11 </head>
 12 <body>
 13 <table style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1
 14        id="tab">
 15     <thead>
 16     <tr>
 17         <td>姓名</td>
 18         <td>年龄</td>
 19         <td>性别</td>
 20     </tr>
 21     </thead>
 22     <tbody>
 23 
 24     </tbody>
 25 </table>
 26 
 27 <script type="text/javascript">
 28     var oTab = document.getElementById('tab');
 29     var tHead = oTab.tHead;
 30     var oThs = tHead.rows[0].cells;
 31     console.log(oThs);
 32     var tBody = oTab.tBodies[0];
 33     var oRows = tBody.rows;
 34 
 35     //将json字符串转为json对象
 36     function jsonParse(str) {
 37         return JSON in window ? JSON.parse(str) : eval('(' + str + ')');
 38     }
 39     //实现数据绑定
 40     function bind() {
 41         var frg = document.createDocumentFragment();
 42         for (var i = 0; i < data.length; i++) {
 43             var cur = data[i];
 44             var oTr = document.createElement('tr');
 45             for (var key in cur) {
 46 
 47                 var oTd = document.createElement('td');
 48                 if (key === 'sex') {
 49                     oTd.innerHTML = cur[key] === 0 ? '男' : '女';
 50                 } else {
 51                     oTd.innerHTML = cur[key];
 52                 }
 53                 oTr.appendChild(oTd);
 54             }
 55             frg.appendChild(oTr);
 56         }
 57         console.log(frg);
 58         tBody.appendChild(frg);
 59         frg = null;
 60     }
 61     //创建一个ajax对象
 62     var data = null;
 63     var xhr = new XMLHttpRequest;
 64     xhr.open('get', 'data.txt', true);
 65     xhr.send();
 66     xhr.onreadystatechange = function () {
 67 
 68         if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
 69             var val = xhr.responseText;
 70             data = jsonParse(val);
 71             bind();
 72             changeBg();
 73 //            sort()
 74 
 75 
 76         }
 77     }
 78     //实现隔行变色
 79     function changeBg() {
 80         for (var i = 0; i < oRows.length; i++) {
 81             oRows[i].className = i % 2 === 1 ? 'bg' : null;
 82         }
 83     }
 84     //编写表格排序方法：实现按照年龄这一列进行排序
 85     function sort() {
 86         //把存储所有的行的类数组转换为数组
 87         console.log(oRows);
 88         var ary = listToArray(oRows);
 89         var _this = this;
 90 
 91         //给数组进行排序，按照每一行的第二列中的内容有小到大排序
 92         console.log(ary);
 93         _this.flag *= -1;
 94         ary.sort(function (a, b) {
 95             //this->window;
 96             return parseFloat(a.cells[1].innerHTML) - parseFloat(b.cells[1].innerHTML) * _this.flag;
 97         })
 98         console.log(ary);
 99 
100         //按照ary中的最新顺序，把每一行重新的添加到tbody中
101 
102         var frg = document.createDocumentFragment();
103         for (var i = 0; i < ary.length; i++) {
104             frg.appendChild(ary[i]);
105         }
106         tBody.appendChild(frg);
107         frg = null;
108     }
109     //当点击第二列，实现一次升序，再点击降序
110     oThs[1].flag = -1;        //给当前这一列增加一个自定义属性flag
111     oThs[1].onclick = function () {
112     //    sort();
113         sort.call(this);    //this->oThs[1]
114     }
115     //类数组转成数组
116     function listToArray(likeAry) {
117         var ary = [];
118         try {
119             ary = Array.prototype.slice.call(likeAry);
120         } catch (e) {
121             for (var i = 0; i < likeAry.length; i++) {
122                 ary[ary.length] = likeAry[i];
123             }
124         }
125         return ary;
126     }
127 
128 </script>
129 </body>
130 </html>

data.txt:

 1 [
 2 {
 3 'name':'*莉',
 4 'age':24,
 5 'sex':1
 6 },{
 7 'name':'*建东',
 8 'age':25,
 9 'sex':0  
10 },{
11 'name':'小莉',
12 'age':17,
13 'sex':1
14 },{
15 'name':'东子',
16 'age':16,
17 'sex':0
18 }
19 ]

 

 

效果图：

 

posted @ 2017-05-14 08:32  未知小未来  阅读(2124)  评论(0)  编辑  收藏  举报