HTML5：Web WorkersとAJAX

HTML5は開発環境にますます組み込まれています。 その重要な利点は、ウェブワーカーなどのテクノロジーの存在です。これにより、マルチスレッドではないにしても、スクリプト実行時の類似性をある程度提供できます。



このテクノロジーの本質はシンプルです。AJAXの機能を保証する機能、または操作中にページの構築速度を低下させる大量の情報を処理する機能は、個別のファイルに転送されます。 このようなファイルは必要な数だけ作成できます。 ブラウザ側でスクリプトが実行されると、特別なWorkerオブジェクトが作成され、必要な関数を呼び出す責任があります。 最新のブラウザの多くはこの技術をサポートしています。



次に、ワーカーの使用方法について説明します。

オブジェクトのブラウザーサポートを確認します。

if (!!window.Worker) { //  }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトの作成は非常に簡単です。

 var worker = new Worker(    );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

作成したオブジェクトには次のメソッドがあります。



postMessage（）; //データ交換を開始するキーメソッド

onmessage（）; //呼び出された従業員から応答を受け取ったときに実行されるメソッド。

onerror（）; //エラーが発生したときに呼び出されるメソッド



それでは、ワーカーファイル自体を作成し、worker.jsという名前を付けましょう。 内部に次のコードを配置します。

 onmessage = function(ev) { var answ = ev.data; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトとファイルがありますが、今ではそれを呼び出すだけで、次のようになります：

 var worker = new Worker('worker.js'); worker.postMessage('Hello World');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ev変数には、dataプロパティにオブジェクトが含まれます。これは関数に渡すもので、この場合は文字列「Hello World」です。 複雑なオブジェクトを含め、何でも転送できます。 次に、従業員に何かを返してもらいます。 これを行うには、従業員コードで、次の行を最後の行に追加します。

 postMessage(answ);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メインスクリプトでは、従業員からメッセージが来たときに呼び出されるメソッドを定義します。

 worker.onmessage = function (event) { alert(event.data); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UPD：

demarkからのアドオン ：



また、HTML5を使用して、外部ファイルを使用せずにWeb Workerを作成できることも追加する必要があります。



blobbuilder：

 var worker = new Worker( window.URL.createObjectURL( new BlobBuilder().append( "onmessage = function(e) { postMessage('hello habrahabr'); }" ).getBlob() ) ); worker.postMessage();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです！ すべての従業員は、従業員を当社に戻すこともできます。 次のようないくつかの重要な点を覚えておく価値があります。

1.従業員はDOMにアクセスできません。 その状態に関するデータを受信したり、変更したりするDOMを操作する機能は、従業員内ではアクセスできません。 アラートを含む（）。

2.従業員は以下にアクセスできます。

2.1ナビゲーター

2.2ロケーションオブジェクト（読み取り専用）

2.3 importScripts（）メソッド（同じドメイン内のスクリプトファイルにアクセスするため）

2.4オブジェクト、配列、日付、数学、文字列などのJavaScriptオブジェクト

2.5 XMLHttpRequest

2.6 setTimeout（）およびsetInterval（）メソッド



それでは、マルチスレッドとは正確には何ですか？ そして、ワーカーのオブジェクトはいくつでもあり、すべて同時に機能することができますが、何らかの機能が機能するのを待っている間、ページの形成は停止されません。



そして今、従業員に関する記事にはない重要なことについて：AJAXテクノロジーを使用するときに適切な答えを得るには、POSTメソッドを使用してSYNCHRONOUSリクエストを送信する必要があります 。 その理由は簡単です。非同期リクエストでは、サーバーが応答するのを待たずにワーカーが終了します。 GETメソッドによって送信されない理由の論理的な説明は見つかりませんでした。 ワーカーは別のスレッドで実行されるため、メインスクリプトは停止することなく動作し続けるため、すべてが上昇することを心配する必要はありません。



労働者のテクノロジーを使用して単純なアクションを実行する場合、速度の向上は最小限になります。 ただし、複雑な計算では、システムを大幅に高速化できます。



このアプローチの実装を示します。

1。

サーバーとの通信を担当するオブジェクト：

 function AJAXprov() { var xmlhttp; var answServ; this.provXmlHttp = function() { var xmlhttp; try { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } // -   false/true (/), // -   (POST/GET) // -    (,     , // -  ,    POST  this.sendAnsServ = function (modeWork, typeSend, adr, param, id, cb) { if(typeSend == 'G') { adr = adr + '?' + param; //alert(adr); httpP.open('GET', adr, modeWork); httpP.setRequestHeader('Cache-Control', 'no-cache, must-revalidate'); httpP.onreadystatechange = function() { if (httpP.readyState == 4) { if(httpP.status == 200) { if(cb) { return httpP.responseText; } } } } httpP.send(null); } if(typeSend == 'P') { httpP.open('POST', adr, modeWork); httpP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); httpP.setRequestHeader('Cache-Control', 'post-check=0,pre-check=0, false'); httpP.setRequestHeader('Cache-Control', 'max-age=0, false'); httpP.setRequestHeader('Pragma', 'no-cache'); httpP.setRequestHeader('Cache-Control', 'no-cache, must-revalidate'); httpP.send(param); if(httpP.status == 200) { if(cb) { return httpP.responseText; } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2。

労働者

 onmessage = function (obj) { importScripts("/JS/classes/AjaxClass.js "); var ajObj = new AJAXprov(); httpP = ajObj.provXmlHttp(); obj = obj.data; answ = ajObj.sendAnsServ(objEx.mode, objEx.type, objEx.adress, objEx.parametrs, objEx.ID); postMessage(answ); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

呼び出し：

 function crWorkerAjax(param, id, cb) { var workerAjax = new Worker("/JS/workers/ajaxWorker.js"); var objEx = { mode:false, type:'P', adress:'/router.php', parametrs:param, ID:id, }; workerAjax.onmessage = function (obj) { var res = eval(obj['data']); cb.call(this, res, id); } workerAjax.onerror = function(err) { alert(err.message); } workerAjax.postMessage(objEx); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

UPD2：

yui_room9のしつこいリクエストで、 webkitの ブラウザーで動作する彼の代替をもたらします



メインファイルの場合：

 if (!!window.Worker){ var worker = new Worker('worker.js'); worker.postMessage('Hellow World'); worker.onmessage = function (e){ alert(e.data); }; }  worker: onmessage = function(e){ transport = new XMLHttpRequest(); transport.open('GET', 'data.txt', true); transport.onreadystatechange = function(){ if(transport.readyState == 4){ postMessage(transport.response); } }; transport.send(); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、data.txtでは、テスト用のテキストを押し込んだだけで、「testing123」と押し込みました。



読んでくれてありがとう。