Clement

如果丢掉盔甲,我依然是骄傲帅气的骑士。

  • 菜单
  • 标签
  • 友情链接
  • 关于我
  • 擅长前端各项技能,喜欢折腾新技术,对JavaScript/Html/CSS相关客户端、服务端(Java/Node.js)以及数据库(MYSQL/SQLServer)知识很感兴趣。

    Web异步交互技术之iframe

    客户端关键代码

    下面使用iframe模拟异步交互技术,使用轮询的方式,实现数字累加功能。
    客户端代码主要包含3个部分:定时向服务器端发送请求、接收服务器端返回的信息及展示服务器端返回的信息。

    客户端,首先创建index.html页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <iframe id="iframe" style="display: none;">
    </iframe>
    <div id="message" style="height: 400px;width: 100%;overflow: auto;border: 1px solid #c0c0c0;">
    </div>
    <label for="text">内容:</label><input type="text" id="text" value="测试!">
    <input type="button" id="sendContent" value="发送">
    <script type="text/javascript">
    //对服务器响应的数据进行简单加工处理。
    function addMessage(counts) {
    var messageElement = document.getElementById("message");
    messageElement.innerHTML += counts;
    }
    //每隔5秒就向服务器异步请求新数据
    function f() {
    if (true) {
    var iframeElement = document.getElementById("iframe");
    //iframeElement.src = 'response.html';
    iframeElement.src = iframeElement.src;//效果同上
    setTimeout(f, 5 * 1000);
    }
    }
    setTimeout(f, 5 * 1000);
    /*
    document.ready和onload的区别——JavaScript文档加载完成事件
    页面加载完成有两种事件:
    一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);
    二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
    以下是原生js dom.onload事件的用法
    */
    window.onload = function () {
    var sendContent = document.getElementById("sendContent");
    sendContent.onclick = function () {
    addMessage(document.getElementById("text").value+"<br>");
    }
    };
    </script>
    </body>
    </html>

    服务端关键代码

    为了模拟服务器响应客户端请求的处理,现在再新建一个response.html页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>response</title>
    </head>
    <body>
    <!--模拟服务器响应客户端的请求-->
    <script>parent.addMessage('Hello!<br>');</script>
    </body>
    </html>

    当时间到达5秒后,通过调函数f来更改iframe的src属性,重新向服务器发送请求,也就实现了轮询。

    ##工作原理
    在实现iframe模拟异步交互技术中,利用iframe内嵌网页的特性,实现网页间数据的“隐形传输”。通过对主页面中隐藏的iframe内嵌网页不断进行刷新,可以不断地向服务器端提交请求,服务器端通过相应Servlet的doPost/doGet方法处理并响应。客户端所获得的响应数据,通过JavaScript调用DOM模型,可以将其更新于主页中,而不需要刷新整个父窗口的内容,当前页面其他的数据状态得以保留,同时减少了数据的传输量。

    文章目录
    1. 1. 客户端关键代码
    2. 2. 服务端关键代码
  • 拉格朗日中值定理学习笔记
  • 罗尔定理学习笔记
  • 零点定理学习笔记
  • JavaScript创建对象之理解原型对象(笔记4)
  • JavaScript创建对象之理解原型对象(笔记3)
  • JavaScript创建对象之构造函数模式(笔记2)
  • JavaScript创建对象之工厂模式(笔记1)
  • ECMAScript属性类型
  • 各大互联网公司前端笔试面试题–JavaScript篇(持续更新)
  • Web异步交互技术之iframe
  • html页头设置不缓存
  • GitHub配置与使用总结(持续更新)
  • 七牛的qrsbox命令行工具使用 for osx
  • VirtualBox在OSX下无法识别U盘,提示Failed to create a proxy device for the USB device. (Error: VERR_PDM_NO_USB_PORTS).
  • sublime基本介绍和使用技巧(持续更新)
  • 第一次和大家见面
  • 数据迁移中,敬请期待!
  • css+div解决文字溢出控制显示字数
  • js的defer属性对dom加载的影响
  • Web前端开发学习教程