利用web workers在后台线程中实现对数据库的增删改查操作,并在后台线程中生成页面上某个列表的完整的HTML代码,然后再前台脚本中直接将这段HTML代码输出到页面上!

利用web workers可以实现无刷新的更新界面,而且还可以多线程处理其它功能,不必等到后台服务器代码执行完后才能在页面上执行下一步操作。有人会问AJAX也可以实现无刷新更新页面,但是如果在后台服务器端执行代码耗时较长,页面就会停止在不能操作的状态,如果拖过页面,可能会造成页面假死的状态。

利用web workers API创建后台线程:

1.将后台执行的脚本文件的URL地址作为worker的参数,在后台线程中不能访问页面或窗口对象。如果在后台程序中包含window或是document对象,就会引发错误。

var worker=new worker("worker.js");

2.在后台线程中接收消息,利用worker对象的onmessage事件句柄获取消息;

 worker.onmessage=function(event)
{ //处理收到的消息 }

3.利用worker对象的postmessage方法想后台线程发送消息;发送消息是文本数据,也可以是任何的JavaScript对象(需要通过JSON对象的stringify方法将其转换成文本数据)

worker.postMessage(message);

下面讲述一个实例,更好的阐述web workers的实现过程:

1.前端页面上的JavaScript脚本

function windowOnLoad()
{
var worker=new worker("bgwork.js");//其中bgwork.js为后台线程运行的脚本文件
worker.postMessage("load");//post为发送消息的文本数据 或是 data=new object(); worker.postMessage(JSON.stringify(data));//post为发送消息的文本数据
worker.onmessage=function(event)
{
if(event.data=="数据库连接发生错误!"||event.data=="读取数据失败!")
{
alert(event.data);
}
else
{
//处理返回回来的数据
}
}
}

2.在后台线程中运行的JavaScript脚本

 onmessage=function(event){

        if(event.data=="load")

         { 

             var xhr=new XMLHtttpRequest();

             xhr.open("post","ceshi.aspx?type=load");//ceshi.aspx该页面为新建页面,专门处理前端数据传过来后向数据库的增删改查功能;

            xhr.onreadystatechange=

           function(){

               var result=xhr.responseText;

               if(xhr.readyState==4)

              {

                      if(result=="数据库连接发生错误!"||event.data=="读取数据失败!")

                             postMessage(result);

                     else

                       {

                         string str="";//处理经过服务端处理过的数据,然后返回前端

                          postMessage(str);

                        }

               }

          }

            xhr.send(null);

         }

    }

3.在ceshi.aspx页面处理数据

protected void Page_Load(object sender,EventArgs)
{
string type=Request.QueryString["type"].ToString();
if(type.Equals("load"))
{ string result="";
using(MemoryStream stream=new MemoryStream())
{
//处理数据
ArrayList dataArray=new ArrayList=new ArrayList();
SerializeArray.WriteObject(stream,dataArray);
result=Encoding.UTF8.GetString(stream.ToArray());
this.WirteReturnStr(result);
} }
}
 

利用web workers实现多线程处理的更多相关文章

  1. JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景

    摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

  2. WijmoJS 使用Web Workers技术,让前端 PDF 导出效率更高效

    概述 Web Workers是一种Web标准技术,允许在后台线程中执行脚本处理. WijmoJS 的2018v3版本引入了Web Workers技术,以便在生成PDF时提高应用程序的运行速度. 一般来 ...

  3. [翻译]Review——How JavaScript works:The building blocks of Web Workers

    原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...

  4. (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event

    浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核            Trident内核,也是俗称的IE内核Chrome 浏览器内核            统称为 Chromium 内核或 ...

  5. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  6. [书籍翻译] 《JavaScript并发编程》第五章 使用Web Workers

    本文是我翻译<JavaScript Concurrency>书籍的第五章 使用Web Workers,该书主要以Promises.Generator.Web workers等技术来讲解Ja ...

  7. JavaScript 工作原理之七-Web Workers 分类及 5 个使用场景

    Web Workers 分类及 5 个使用场景 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理的第七章. 本系列 ...

  8. Web Workers

    在 Web Workers 中使用 postMessage 和 onmessage 首先,需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程 ...

  9. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

随机推荐

  1. [转帖收集] Java注解

    1.Annotation 它的作用是修饰编程元素.什么是编程元素呢?例如:包.类.构造方法.方法.成员变量等.Annotation(注解)就是Java提供了一种元程序中的元素关联任何信息和任何元数据( ...

  2. 组合使用QT的资源管理高级功能简化开发过程

    使用 QT 进行团队开发的时候,常常碰到一个问题,就是如何共同管理资源?甚至一个人进行开发的时候如何简化资源的维护,避免无谓的消耗? 如果可以做到在开发的时候,大家把美工做的图片(往往是程序员先自己随 ...

  3. linux 环境 tomcat 莫名奇妙挂掉

    ::-exec-] org.apache.coyote.http11.Http11Processor.service Error processing request java.lang.NullPo ...

  4. pycharm 相关设置问题

    pycharm设置自动换行 file→settings→Editor→General→勾选 Use soft wraps in eitor → ok

  5. 【BZOJ3144】[Hnoi2013]切糕 最小割

    [BZOJ3144][Hnoi2013]切糕 Description Input 第一行是三个正整数P,Q,R,表示切糕的长P. 宽Q.高R.第二行有一个非负整数D,表示光滑性要求.接下来是R个P行Q ...

  6. Spring Cloud Feign组件

    采用Spring Cloud微服务框架后,经常会涉及到服务间调用,服务间调用采用了Feign组件. 由于之前有使用dubbo经验.dubbo的负载均衡策略(轮训.最小连接数.随机轮训.加权轮训),du ...

  7. 活动窗口(Active),焦点窗口(Focus)和前景窗口(Foreground)之间的关系

    活动窗口(Active),焦点窗口(Focus)和前景窗口(Foreground)之间的关系 任何一个时候,我们的Windows桌面上总有一个最前台的窗口,其实说简单的,就是标题栏变成深蓝色的那个窗口 ...

  8. java根据方法名动态调用invoke方法!

    public class Activity { public void deal(String name, long id) { System.out.println(name + id + &quo ...

  9. 【Python之路】第二十二篇--Django【基础篇】

    1 Django流程介绍 MTV模式       著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业 ...

  10. 看用Tornado如何自定义实现表单验证

    我们知道,平时在登陆某个网站或软件时,网站对于你输入的内容是有要求的,并且会对你输入的错误内容有提示,对于Django这种大而全的web框架,是提供了form表单验证功能,但是对于Tornado而言, ...