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

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

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .bg {

             background: yellowgreen;

         }

     </style>

 </head>

 <body>

 <table style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1

        id="tab">

     <thead>

     <tr>

         <td>姓名</td>

         <td>年龄</td>

         <td>性别</td>

     </tr>

     </thead>

     <tbody>

     </tbody>

 </table>

 <script type="text/javascript">

     var oTab = document.getElementById('tab');

     var tHead = oTab.tHead;

     var oThs = tHead.rows[0].cells;

     console.log(oThs);

     var tBody = oTab.tBodies[0];

     var oRows = tBody.rows;

     //将json字符串转为json对象

     function jsonParse(str) {

         return JSON in window ? JSON.parse(str) : eval('(' + str + ')');

     }

     //实现数据绑定

     function bind() {

         var frg = document.createDocumentFragment();

         for (var i = 0; i < data.length; i++) {

             var cur = data[i];

             var oTr = document.createElement('tr');

             for (var key in cur) {

                 var oTd = document.createElement('td');

                 if (key === 'sex') {

                     oTd.innerHTML = cur[key] === 0 ? '男' : '女';

                 } else {

                     oTd.innerHTML = cur[key];

                 }

                 oTr.appendChild(oTd);

             }

             frg.appendChild(oTr);

         }

         console.log(frg);

         tBody.appendChild(frg);

         frg = null;

     }

     //创建一个ajax对象

     var data = null;

     var xhr = new XMLHttpRequest;

     xhr.open('get', 'data.txt', true);

     xhr.send();

     xhr.onreadystatechange = function () {

         if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {

             var val = xhr.responseText;

             data = jsonParse(val);

             bind();

             changeBg();

 //            sort()

         }

     }

     //实现隔行变色

     function changeBg() {

         for (var i = 0; i < oRows.length; i++) {

             oRows[i].className = i % 2 === 1 ? 'bg' : null;

         }

     }

     //编写表格排序方法：实现按照年龄这一列进行排序

     function sort() {

         //把存储所有的行的类数组转换为数组

         console.log(oRows);

         var ary = listToArray(oRows);

         var _this = this;

         //给数组进行排序，按照每一行的第二列中的内容有小到大排序

         console.log(ary);

         _this.flag *= -1;

         ary.sort(function (a, b) {

             //this->window;

             return parseFloat(a.cells[1].innerHTML) - parseFloat(b.cells[1].innerHTML) * _this.flag;

         })

         console.log(ary);

         //按照ary中的最新顺序，把每一行重新的添加到tbody中

         var frg = document.createDocumentFragment();

         for (var i = 0; i < ary.length; i++) {

             frg.appendChild(ary[i]);

         }

         tBody.appendChild(frg);

         frg = null;

     }

     //当点击第二列，实现一次升序，再点击降序

     oThs[1].flag = -1;        //给当前这一列增加一个自定义属性flag

     oThs[1].onclick = function () {

     //    sort();

         sort.call(this);    //this->oThs[1]

     }

     //类数组转成数组

     function listToArray(likeAry) {

         var ary = [];

         try {

             ary = Array.prototype.slice.call(likeAry);

         } catch (e) {

             for (var i = 0; i < likeAry.length; i++) {

                 ary[ary.length] = likeAry[i];

             }

         }

         return ary;

     }

 </script>

 </body>

 </html>

data.txt:

 [

 {

 'name':'*莉',

 'age':24,

 'sex':1

 },{

 'name':'*建东',

 'age':25,

 'sex':0

 },{

 'name':'小莉',

 'age':17,

 'sex':1

 },{

 'name':'东子',

 'age':16,

 'sex':0

 }

 ]

效果图：

ajax数据读取和绑定的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  3. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

  4. 教你如何使用flask实现ajax数据入库

    摘要:在正式编写前需要了解一下如何在 python 函数中去判断,一个请求是 get 还是 post. 本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>, ...

  5. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  6. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  7. django建立管理系统之五----单页ajax数据交互

    ajax数据提交: 需求: 1. 点击ajax方式提交后数据提交到后台数据库,并且在前台实现数据更新 a.可以用刷新页面来实现数据页面的更新 对应的html,实现局部刷新(可以用刷新页面实现,例如 $ ...

  8. kkpager的改进,Ajax数据变化但是页码不变的有关问题

    kkpager的改进,Ajax数据变化但是页码不变的问题kkpager 是一个简单分页展示插件,需要依赖jquery.下载地址:http://www.oschina.net/action/projec ...

  9. ASP.NET中关于XML的AJAX的读取与删除

    一个XML文件,名称就暂定为GroupStudents.xml吧,内容如下: <?xml version="1.0" encoding="utf-8"?& ...

随机推荐

  1. 申请qq第三方登录 http://www.php20.com/forum.php?mod=viewthread&tid=29 (出处: 码农之家)

    百度  qq互联  进入网站 按图中的步骤申请第三方登录即可 先申请成为开发者 审核通过后再继续操作 提交 后列表中会出现提交的申请. 状态为审核中,审核通过会得到下图. 点查看 红线后面就是appi ...

  2. 将Komodo Edit打造成Python开发的IDE

    Komodo Edit 支持Python 界面清爽, 将Komodo Edit 设置成Python的IDE,具体操作方法如下: 先添加自定义命令. 再设置命令行参数 设置高级选项 设置快捷键 完成.

  3. 硬件中断--DEBUG系列

    问题描述: 在线调试时,全速运行,程序进入硬件中断,查看堆栈窗口,发现是从A函数进去的.但是A函数应该没有问题的: 再次重复,发现是从B函数进去的,但是B函数之前运行起来也没有问题的,而且没有传入参数 ...

  4. http与www服务精解

    TCP/IP 协议介绍 在介绍 HTTP 协议之前,先简单说一下TCP/IP协议的相关内容.TCP/IP协议是分层的,从底层至应用层分别为:物理层.链路层.网络层.传输层和应用层,如下图所示: 从应用 ...

  5. 笔记-scrapy-extentions

    笔记-scrapy-extentions 1.      extentions 1.1.    开始 The extensions framework provides a mechanism for ...

  6. <jsp:param>传参乱码问题

    在添加参数的界面添加<%request.setCharacterEncoding("UTF-8");%> 实例代码: login_confirm.jsp <%@ ...

  7. TouTiao开源项目 分析笔记12 从总体到局部 构建视频主页面

    1.构建视频主列表的整体碎片VideoTabLayout 1.1.首先创建一个VideoTabLayout package com.jasonjan.headnews.module.video; im ...

  8. 集合源码分析之 HashSet

    一 知识准备 HashSet 是Set接口的实现类,Set存在的最大意义区别于List就是,Set中存放的元素不能够重复,就是不能够有两个相同的元素存放在Set中,那么怎样的两个元素才算是相同的,这里 ...

  9. python语法root=Tkinter.Tk()

    1. Tkinter 是一个python模块,是一个调用Tcl/Tk的接口,它是一个跨平台的脚本图形界面接口.Tkinter不是唯一的python图形编程接口,但是是 其中比较流行的一个.最大的特点是 ...

  10. JavaSE总结--多线程

    进程: 进程之间内存隔离,内存不共享. 线程: 可以共享内存. 每个线程都是一个栈. 多线程的好处: 1)防止程序阻塞. wait与notify的区别: 针对等待队列而言. wait:进入等待队列.必 ...