利用iframe与Response.Flush实现进度展示效果

开发中经常碰到要处理很多数据的情况，然后希望在客户端展示当前的处理进度。之前有碰到客户端界面展示一个类似excel的报表，然后用户插入一批数据，然后点击保存后将所有数据一条条插入到数据库同时展示当前数据的处理结果。为了简便下面的代码已简单为主。

方式1:就是获取一条数据，然后发一个Ajax请求，等返回结果然后继续处理下一条，再发一个Ajax请求，循环往复，但是这样就需要多少的请求啊……

方式2：利用Response.Flush方法，第一次将全部的数据post到服务器，然后每次处理一条，利用Flush功能输出结果到客户端，这样就相当其实只有一个请求，然后浏览器一个接收数据，直到所有处理完成Response.Close下返回一个200的状态码

返现结果并不是我想象的那样，console.log只会在全部处理完毕以后再输出，奇怪了，firebug展示的响应结果是一直在不停向客户端输出的呀，好吧第一反应是jquery的success只会在返回200状态码后才会回调的，那Flush反悔的是什么状态码呢?好吧，哥不要你了，我用原生的ajax总行了吧，怎么说记得有一个onreadystatechage的方法，然后还有一个叫readyState的东东表示当前的状态，

//0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
    // 1 (初始化) 对象已建立，尚未调用send方法
    // 2 (发送数据) send方法已调用，但是当前的状态及http头未知
    // 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
    // 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

确实有一个3表示数据传送中，表示接收部分数据，可是又郁闷了，此时因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，得！看来不能用ajax了。好吧用iframe吧，直接写代码了

主页面Default.aspx提交

<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="myproject1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<headrunat="server"><title>无标题页</title><styletype="text/css">#process{width:200px;height:20px;border:1px solid #ddd;position:relative;margin-bottom:5px;}#cur_process{width:0px;height:20px;background:green;}#cur_process_num{position:absolute;left:0px;top:0px;}#postiframe{display:none;}#button1{background:#ddd;border:1px solid #aaa;}</style>
</head>
<body><formid="form1"runat="server"><div><divid="process"><divid="cur_process"></div><divid="cur_process_num"></div></div><iframeid="postiframe"name="postiframe"src="WebForm1.aspx" ></iframe><inputtype="button"id="button1"value="提交"onclick="submitit();" /></div></form><scriptsrc="jquery-1.4.2.min.js"type="text/javascript"></script><scripttype="text/javascript">varcur, cur_num;//后台回调方法functioncallBack(num) {(cur||(cur=$('#cur_process'))).width(num* 2 + 'px');(cur_num||(cur_num=$('#cur_process_num'))).html(num+ '%');}//开始提交functionsubmitit() {varconW=document.getElementById('postiframe').contentWindow;conW.document.forms['postform'].submit();}</script>
</body>
</html>

处理页面WebForm1.aspx前台，注意将其form的target指向父页面default.aspx的iframe

<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="myproject1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<headrunat="server"><title>无标题页</title>
</head>
<body><formrunat="server"id="postform"name="postform"target="postiframe"><div><inputtype="hidden"name="cur_method"value="add"id="cur_method"/></div></form>
</body>
</html>

处理页面WebForm1.aspx.cs后台

  public partial classWebForm1 : System.Web.UI.Page{protected void Page_Load(objectsender, EventArgs e){string m = Request.Form["cur_method"];if (!string.IsNullOrEmpty(m) && m == "add"){StringBuilder strBuilder= newStringBuilder();for (var j = 0; j <=24; j++){strBuilder.Append("          ");//因为IE浏览器下flush必须达到256字节才能生效，所以无奈加上这个
}string str =strBuilder.ToString();for (int i = 1; i <= 100; i = i + 1){Response.Clear();Response.Write("<script type=\"text/javascript\">parent.callBack('" + i + "');" + str + "</script>");//输出当前处理进度回调父页面的jsResponse.Flush();//输出到浏览器端Thread.Sleep(100);//模拟处理中
}Response.Close();}          }}

转载于:https://www.cnblogs.com/fuyun2000/archive/2013/04/12/3016366.html

利用iframe与Response.Flush实现进度展示效果相关推荐

html天气插件iframe,HTML_利用iframe在网页中显示天气附效果截图，css：复制代码代码如下: *{margi - phpStudy...
利用iframe在网页中显示天气附效果截图 css: 复制代码代码如下: *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} bo ...
利用iframe实现ajax 跨域通信的解决方案
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...
Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度
====================================================== 注:本文源代码点此下载 ================================= ...
Python：利用python编程实现三维图像绘制展示(六面体旋转、三维球柱状体、下雪场景等)
Python:利用python编程实现三维图像绘制展示(六面体旋转.三维球柱状体.下雪场景等) 目录利用python编程实现三维图像绘制展示(六面体旋转.三维球柱状体.下雪场景等) 1.实现六面体旋 ...
利用iframe无刷新上传文件的坑
利用iframe无刷新上传文件的坑原文:利用iframe无刷新上传文件的坑页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用for ...
我想做一个课程表系统利用PHP+MYSQL+HTML实现课表的展示，但是不知道如何实现
我想做一个课程表系统利用PHP+MYSQL+HTML实现课表的展示,但是不知道如何实现 1.课表不是唯一一个课表. 2.通过录入的课表信息展示在HTML表格想实现的效果如图: 收藏 (1) 分享举 ...
流程展示 php,js实现动态的流程进度展示条
这次给大家带来js实现动态的流程进度展示条,js实现动态流程进度展示条的注意事项有哪些,下面就是实战案例,一起来看一下. 一.设计思路分为以下几步(仅供参考) [竖线线] 这个采用ul的list标签 ...
利用微信公众号实现商品的展示和支付（2）
在前面随笔<利用微信公众号实现商品的展示和支付(1)>介绍了商品的列表和明细信息的处理,本篇随笔接着上一篇,继续介绍关于商品的微信支付和购物车处理方面,其中微信支付里面,也涉及到了获取微信 ...
利用iframe实现局部打印(区域打印)
利用iframe实现局部打印(区域打印) <template><div id="test-page"><div ...

利用iframe与Response.Flush实现进度展示效果

利用iframe与Response.Flush实现进度展示效果相关推荐

最新文章

热门文章