004_Ajax实现HTML局部更新

来源：互联网发布：查看windows序列号编辑：程序博客网时间：2024/06/16 03:07

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