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模型，可以将其更新于主页中，而不需要刷新整个父窗口的内容，当前页面其他的数据状态得以保留，同时减少了数据的传输量。

赏

本文标题:Web异步交互技术之iframe

文章作者:zhoujianwen

发布时间:2016-09-06, 13:11:00

最后更新:2016-09-28, 14:07:36

原始链接:http://www.zhoujianwen.cn/2016/09/06/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 客户端关键代码
  2. 2. 服务端关键代码