HTML5: वेब वर्कर्स और AJAX

HTML5 तेजी से विकास के वातावरण में अंतर्निहित है। इसका महत्वपूर्ण लाभ वेब श्रमिकों के रूप में ऐसी तकनीक की उपस्थिति है, जो कुछ हद तक प्रदान करने की अनुमति देता है, यदि मल्टीथ्रेडिंग नहीं है, तो स्क्रिप्ट चलाने के दौरान इसकी समानता है।

प्रौद्योगिकी का सार सरल है - फ़ंक्शन जो AJAX के कामकाज को सुनिश्चित करते हैं, या बड़ी मात्रा में जानकारी को संसाधित करने वाले फ़ंक्शन, जो ऑपरेशन के दौरान एक पृष्ठ के निर्माण की गति को कम करते हैं, को अलग-अलग फ़ाइलों में स्थानांतरित किया जाता है। इस तरह की फाइलें जरूरत से ज्यादा हो सकती हैं। जब स्क्रिप्ट को ब्राउज़र साइड पर निष्पादित किया जाता है, तो एक विशेष वर्कर ऑब्जेक्ट बनाया जाता है, जो आवश्यक कार्यों को कॉल करने के लिए जिम्मेदार होता है। कई आधुनिक ब्राउज़र इस तकनीक का समर्थन करते हैं।

अब श्रमिकों का उपयोग कैसे करें।
ऑब्जेक्ट के लिए ब्राउज़र समर्थन की जाँच करें:

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

एक वस्तु बनाना बहुत सरल है:

 var worker = new Worker(    ); 

हमारे द्वारा बनाई गई वस्तु में निम्नलिखित विधियाँ हैं:

पोस्टमासेज (); // प्रमुख विधि जो डेटा विनिमय की शुरुआत करती है
onmessage (); // विधि निष्पादित जब एक प्रतिक्रिया प्राप्त कर्मचारी से प्राप्त की जाती है।
ओनर (); // विधि जब त्रुटियां होती हैं

अब हम कार्यकर्ता को खुद फाइल बनाते हैं और उसका नाम देते हैं। कार्यकर्ता। अंदर हम निम्नलिखित कोड डालते हैं:

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

हमारे पास एक ऑब्जेक्ट और एक फ़ाइल है, अब यह केवल इसे कॉल करने के लिए बनी हुई है, यह इस तरह से किया जाता है:

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

Ev वैरिएबल में डेटा प्रॉपर्टी में एक ऑब्जेक्ट होगा, जो कि हमारे फंक्शन 'स्ट्रिंग वर्ल्ड' के मामले में, जो हम फंक्शन पास करते हैं, वह होगा। आप जटिल वस्तुओं सहित कुछ भी स्थानांतरित कर सकते हैं। अब हम अपने कर्मचारी को हमारे पास कुछ लौटाएंगे। कर्मचारी कोड में ऐसा करने के लिए, निम्नलिखित पंक्ति को अंतिम पंक्ति में जोड़ें:

 postMessage(answ); 

और मुख्य स्क्रिप्ट में, हम एक ऐसी विधि को परिभाषित करते हैं जिसे एक कर्मचारी द्वारा संदेश आने पर बुलाया जाएगा:

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

युपीडी:
डीमार्क से जोड़ें:

मुझे यह भी जोड़ना होगा कि HTML5 आपको बाहरी फ़ाइल का उपयोग किए बिना एक वेब वर्कर बनाने की अनुमति देता है

blobBuilder'a:

 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 आयात () विधि (एक ही डोमेन में स्क्रिप्ट फ़ाइलों का उपयोग करने के लिए)
2.4 जावास्क्रिप्ट ऑब्जेक्ट जैसे ऑब्जेक्ट, एरे, डेट, मैथ, स्ट्रिंग
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 के आग्रहपूर्ण अनुरोध पर , मैं वेबकिट पर ब्राउज़रों में उनका वैकल्पिक काम कर रहा हूं

मुख्य फ़ाइल के लिए:

 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 में हम सिर्फ टेस्ट के लिए टेक्स्ट शेव करते हैं, मैंने "टेस्टिंग123" को देखा।

आप सभी को पढ़ने के लिए धन्यवाद।