004_Ajax实现HTML局部更新
来源:互联网 发布:查看windows序列号 编辑:程序博客网 时间:2024/06/16 04:40
Ajax
2005 年 Jesse James Garrett 发表了一篇文章,标题为:“Ajax: A newApproach to WebApplications”。他在这篇文章里介绍了一种技术,用他的话说,就叫:Ajax,是 AsynchronousJavaScript + XML 的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新) ,会带来更好的用户体验。一时间,席卷全球。
步骤
1.搭建HTML骨架
2.书写js骨架
3.书写Ajax代码、对异步请求到的数据进行处理
详解
1.搭建HTML骨架
<body> <!-- 就一个按钮 --> <div id="button"> </div></body>
2.书写js骨架
/* 2.1.书写JS骨架,为后面插入的表格数据进行样式渲染 *///控制各行变色的变量var oddEven = 0;//动态的插入数据项的函数function insertInfor() { var tabId = document.getElementById("tabId"); var index = 0; //插入HTML代码 var htmlStr = "<tr>" + "<td>" + arguments[index++] + "</td>" + "<td>" + "<details>" + "<summary>" + "</summary>" + arguments[index++] + "</details>" + "</td>" + "<td>" + arguments[index++] + "</td>" + "</tr> "; tabId.innerHTML += htmlStr; //最后一个tr是新插进去的,为它设置自己的样式 var trTab = tabId.getElementsByTagName("tr"); trTab = trTab[trTab.length - 1]; if( oddEven / 2 == 0 ) { oddEven++; //通过修改class的形式新增样式(直接更新,css里的样式不会应用到它的身上) trTab.className = "evenTr"; } else { oddEven = 0; trTab.className = "oddTr"; }}
3.书写Ajax代码
3.1.创建XMLHttpRequest对象
3.2.调用open(请求方式,请求页面,请求方式[true表示异步请求])
3.3.发送请求,调用send(请求参数)
3.4.等待状态事件被触发
3.5.
readyState == 4:已经接受到全部响应数据,而且可以使用
status == 200:服务器成功返回了页面
3.6.获取异步数据并进行处理
window.onload = function() {/* * 表格标题 */document.getElementById("button").onclick = function() { document.body.innerHTML += " <table align=\"center\" "+ "border=\"0\" cellspacing=\"1px\" id=\"tabId\">"+"<tr>"+"<th>序号</th>"+"<th>内容</th>"+"<th>讲解人</th>"+"</tr>"+"</table>"; /* * 3.1.创建XMLHttpRequest对象 */ var xhr = new XMLHttpRequest(); /* * 3.2.调用open(请求方式,请求页面,请求方式[true表示异步请求]) */ xhr.open("GET","table.json",true); /* * 3.3.发送请求,调用send(请求参数) */ xhr.send(null); /* * 3.4.等待状态事件被触发 */ xhr.onreadystatechange = function() { /* * 3.5. * readyState == 4:已经接受到全部响应数据,而且可以使用 * status == 200:服务器成功返回了页面 */ if( xhr.readyState == 4 && xhr.status == 200 ) { /* * 4.1.获取异步数据并进行处理 */ var jObj = JSON.parse(xhr.responseText); for (var i = 0; i < jObj.length; i++) { insertInfor(jObj[i].num,jObj[i].desc,jObj[i].name); } } } }
效果:
完整源码下载:
https://mp.weixin.qq.com/s/9nQr0SaC9npbUCVieLny7g
阅读全文
0 0
- 004_Ajax实现HTML局部更新
- html通过js调用php实现局部更新
- 【笔记】利用ajax返回Html代替iframe,实现局部更新
- ListView实现局部更新
- 静态页面html局部更新数据(ssl局部更新)
- Ajax实现页面局部更新
- 导航栏 $_ajax异步局部刷新加载内容
- ajax实现无刷新树_ajax教程
- ListView中 局部刷新Item 实现下载进度条局部更新
- 实现Web页面局部动态更新
- __doPostBack实现updatepanel的局部更新
- jquery使用ajax实现页面局部更新
- 用XMLHttpRequest对象实现局部更新
- 使用SurfaceView实现图片的局部更新
- ListView实现局部更新的方法
- react native 实现ListView的局部更新
- HTML CSS + DIV实现局部布局
- HTML CSS + DIV实现局部布局
- 图片即时优化的三种简单解决方案
- Git 上传和下传
- 回溯算法的基本要点
- 欢迎使用CSDN-markdown编辑器
- 前端页面中嵌入ckeditor
- 004_Ajax实现HTML局部更新
- 第一个函数SystemInit()里面有些啥,时钟设置及简介
- maven eclipse搭建web项目并发布到tomcat
- 动态网页
- 模拟退火算法
- 扩展ASCII码字符对应UNICODE编码
- POI报表入门
- POJ 1182 食物链 带权并查集
- 图片转化为base64及上传