您的位置：首页 > Web前端 > HTML

004_Ajax实现HTML局部更新

2017-09-23 17:27 141 查看

Ajax

2005 年 Jesse James Garrett 发表了一篇文章，标题为：“Ajax： A newApproach to Web
Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是 Asynchronous
JavaScript + 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航