实时抓取网页数据(js+wcf实现进度条实时监测数据加载量的方法(组图))

　　实时抓取网页数据(js+wcf实现进度条实时监测数据加载量的方法(组图))

　　本文以js+wcf如何实现进度条实时监控数据加载为例。分享给大家，供大家参考，如下：

　　背景

　　因为项目需要导入很多数据到memcache

　　您需要使用wcf 检索110,000 条数据。因为那里多级联检查排序，比较慢（1分钟左右）

　　同时这里需要对数据进行处理，合并成20000条数据，然后存储，需要一定的时间（也是1分钟左右）

　　总之，完成数据导入大约需要1分30秒

　　这时候就需要一个进度条来实时监控完成的数据量

　　（之前用动态图，无法知道程序当前的完成量，或者就算卡住了，也只能等）

　　功能

　　1.开启线程加载数据和处理数据

　　2.前台实时读取后台数据并显示

　　代码

　　视图-html

　　

@* 数据准备进度条 *@

数据准备

完成量3%

<p>数据准备完成！

</p>

　　视图-js

　　

$(function () {

$('#initialization').click(function () {

$.messager.confirm('提示', '是否要进行数据初始化？', function (r) {

if (!r) {

return;

}

else {

$('#container').show();

var t1 = window.setinterval(process_bar, 1500);

}

});

});

});

function process_bar() {

$.ajax({

type: "post",

async: true,

url: "/paper/loaddata",

success: function (result) {

$('#progress_bar .ui-progress').animateprogress(result);

if (result =="100") {

$('#main_content').slidedown();

$('#fork_me').fadein();

settimeout(function () { $('#container').hide();; }, 1500);

window.clearinterval(t1);

}

}

})

}

　　控制器

　　

static bool flag = true;

public int loaddata()

{

int result = ipaperbll.loaddataamount();

if (flag)

{

thread thread = new thread(new threadstart(threadloaddata));

thread.start();

flag = false;

}

return result;

}

private void threadloaddata()

{

ipaperbll.initializedata();

}

　　后台

　　

static int load_data_amount;//当前数据准备量

public bool initializedata()

{

bool flag = false; //定义返回值

//获得数据

//code....code ....code....

load_data_amount = 5;//完成工作量

int page = 0;

int amount = 50000;//一次获取数据量不能超过10万

while (page * amount == list.count)

{

//code....code ....code....

load_data_amount = load_data_amount + 5;

}

load_data_amount = 50;//读取数据默认的工作量

double totalamount = list.count();

foreach (var item in list)

{

//code....code ....code....

load_data_amount = convert.toint32((1 - (totalamount--) / double.parse(list.count().tostring())) * 50) + 50;//根据数据改变的完成工作量

}

load_data_amount = 100;//完成工作量

flag = true;

return flag;

}

//返回当前准备数据量

public int loaddataamount() {

return load_data_amount;

}

　　问题解决了

　　1.进度条生成

　　解决方法：使用在线demo，css+js可以动态生成，只需改变数据

　　2.线程问题

　　解决方法：开始监控线程的使用，后来改用线程进行数据处理

　　3.问题实时监控

　　解决方法：使用线程自动运行数据处理，前台使用ajax在后台不断查询一个变量load_data_amount

　　4.ajax 错误报告

　　注意返回值的类型，无论是result还是result.d，在不同的情况下是不同的

　　5.数据类型问题

　　解：读取数据的百分比是用完成量/全部量得到的。这里的数字总是不正确的，因为int类型经不起110,000及后续小数的运算。可以使用 double 和 float。

　　概括

　　本来想开个线程，加个变量，返回前台，加个进度条，读取变量就ok了。

　　但是中间的mvc，这个spring，这个接口，之前的方法都不好用，下面的计算，ajax……一一解决，终于解决了。

　　分而治之，一一解决，测试即可

　　另外，框架和合作带来便利的同时，中间的限制和bug也会降低你的效率。

　　对javascript相关内容感兴趣的读者可以查看本站专题：《JavaScript时间日期操作技巧总结》、《JavaScript搜索算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧》《总结》《JavaScript遍历算法与技巧总结》《JavaScript数学运算使用总结》

　　我希望这篇文章能帮助你进行 JavaScript 编程。