利用web workers实现多线程处理

 利用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);
      }
      
    }
  }

 

转载于:https://www.cnblogs.com/xiaolifeidao/p/3706673.html