👨‍⚖️ 👰 👨🏼 आपको XMLHttpRequest का उपयोग अतुल्यकालिक रूप से क्यों करना चाहिए 🕉️ 🚴🏾 🙏🏿

* प्रति ।: इस विषय का विचार तुच्छ है और सभी को पता होना चाहिए: अतुल्यकालिक अनुरोधों का उपयोग करें। लेकिन आँकड़े एक कठोर बात है, और, जाहिर है, हर कोई यह नहीं जानता है। और परिणाम, वास्तव में, सभी ब्राउज़रों में होते हैं। *

पिछले महीने की तुलना में IE9 में सभी पेज के 8.4% हैंगहैंसट्रैसपेस्टेस्ट ऑब्जेक्ट्स यूआई स्ट्रीम को सिंक्रोनस अनुरोध के साथ अवरुद्ध करने के कारण हैं। यह एक बड़ी संख्या है! कुछ उपलब्ध कोड परिवर्तनों के साथ, इन फ्रीज़ को आसानी से टाला जा सकता है - और डेवलपर्स अपने उपयोगकर्ताओं को अपनी साइटों के साथ काम करने का बेहतर अनुभव दे सकते हैं। जब आप फ्रीज़ करते हैं तो हम देखते हैं कि आप इसके बारे में क्या कर सकते हैं, और हम यह भी देखने के लिए थोड़ा डेमो करने की कोशिश करते हैं कि जब सिंक्रोनस अनुरोध ब्राउज़र को निलंबित करता है तो क्या होता है।

तुल्यकालिक XMLHttpRequest UI स्ट्रीम को ब्लॉक करता है

हम पहले से ही जानते हैं कि UI थ्रेड में ब्लॉकिंग ऑपरेशन शुरू करने से समस्याएं हो सकती हैं । हमने इस बारे में पहले ही लिखा था । यह स्पष्ट नहीं हो सकता है, लेकिन यह तब होता है जब XMLHttpRequest.send () विधि को सिंक्रोनाइज़ कहा जाता है (उदाहरण के लिए, ओपन () विधि को कॉल करने पर bAsync विशेषता के लिए गलत मान पास करके)। UI थ्रेड को तब तक इंतजार करना चाहिए जब तक कि यह सर्वर से प्रतिक्रिया प्राप्त नहीं करता है या जब तक अनुरोध के लिए कोई समय समाप्त नहीं होता है। प्रतीक्षा करते समय, संदेश पास नहीं होते हैं।

XMLHttpRequest को सिंक्रोनाइज़ क्यों करें?

डेवलपर्स अतुल्यकालिक अनुरोधों के बजाय समकालिक अनुरोधों का उपयोग करने का प्रयास करते हैं क्योंकि यह आसान है और कम जटिल कोड को जन्म दे सकता है। स्टैकऑवरफ्लो पर यह चर्चा कुछ अच्छे कारण प्रदान करती है कि आप एक के बजाय एक का उपयोग क्यों करना चाहते हैं, लेकिन जोखिम को उचित करने के लिए पर्याप्त पर्याप्त नहीं है।

कैसे ठीक करें ...

कम से कम दो तरीके हैं जिनसे आप फ्रीज़ से बचने के लिए अपना कोड ठीक कर सकते हैं। पहली विधि बेहतर है क्योंकि आप UI थ्रेड को ब्लॉक नहीं करेंगे। दूसरी विधि कम इष्टतम है, क्योंकि आप अभी भी ब्लॉक करेंगे, लेकिन कम समय के लिए सबसे अधिक संभावना है कि आप इसे अभी कर रहे हैं।

अपना कोड लिखें ताकि अनुरोध अतुल्यकालिक हों

आपको ओपन () विधि में bAsync पैरामीटर के लिए सही मान पास करने की आवश्यकता है, और आपको onreadystatechange घटना के लिए एक हैंडलर भी लिखना होगा। इंटरनेट पर कई उदाहरण हैं कि यह कैसे किया जा सकता है, उदाहरण के लिए, यह एक ।
टाइमआउट संपत्ति सेट करें।

चूंकि डेस्कटॉप विंडो मैनेजर एक जवाब के बिना 5 सेकंड के बाद एक हैंग का पता लगाता है, और IE में एक हैंग के बाद रिकवरी 8 के बाद काम करता है, मैं टाइमआउट प्रॉपर्टी को 5 सेकंड से ज्यादा सेट करने की सलाह देता हूं। आप ऑनटाइम इवेंट पर प्रतिक्रिया देने के लिए एक हैंडलर भी सेट कर सकते हैं।

(मैं इन नंबरों को कैसे जानता हूं? यहां और यहां पढ़ें)

एक उदाहरण के बारे में क्या?

आइए देखें कि यह सब कैसे और अधिक विस्तार से, एक सरल परिदृश्य में काम करता है:

हम एक कोड लिखेंगे जो एक तुल्यकालिक अनुरोध भेजता है और इस तरह ब्राउज़र को निलंबित करता है, और फिर
कोड को एसिंक्रोनस के साथ बदलें और ब्राउज़र के व्यवहार में परिवर्तन देखें।

इस परिदृश्य का लक्ष्य यह दिखाना है कि कैसे एक अतुल्यकालिक अनुरोध के लिए एक तुल्यकालिक अनुरोध से संक्रमण आपके आवेदन के साथ उपयोगकर्ता के अनुभव को बेहतर बनाता है।

चेतावनी: यह उदाहरण आपके ब्राउज़र को लटका देता है और क्लाइंट साइड और सर्वर साइड दोनों पर अप्रत्याशित और यहां तक कि अवांछनीय परिणाम पैदा कर सकता है। दूसरे शब्दों में, इसे किसी प्रोडक्शन सर्वर या किसी अन्य मशीन पर न चलाएं जो अस्थिर और संभावित रूप से गलत कोड को सही ढंग से काम नहीं कर सकती हैं।

स्थापना

यदि आप नीचे दिए गए उदाहरण को सीधे दोहराना चाहते हैं तो आपको ASP.NET पेज चलाने में सक्षम सर्वर की आवश्यकता होगी। मैं समझता हूं कि शायद सभी पाठक ASP.NET का उपयोग नहीं करते हैं, लेकिन कोड पर्याप्त पारदर्शी होना चाहिए ताकि आप इसे आसानी से एक अलग वातावरण में पुन: पेश कर सकें।

मैं यह भी मानता हूं कि आप वेब सर्वर के संचालन से परिचित हैं और सर्वर लॉजिक वाले पेज चलाना जानते हैं।

इस कोड को अपने पसंदीदा टेक्स्ट एडिटर में कॉपी करें और इसे अपने सर्वर पर कहीं भी hangme.aspx के रूप में सेव करें।

<!-- code starts after this line --> <%@ Page Language="C#" %> <html> <head> <title>XmlHttpRequest open hang test</title> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if(Request.QueryString["hang"] == "1") { int seconds = 0; Int32.TryParse(Request.QueryString["seconds"], out seconds); System.Threading.Thread.Sleep(seconds * 1000); } } </script> <script type="text/javascript"> function call_hangme() { var oReq; if (window.XMLHttpRequest) { oReq = new XMLHttpRequest(); } if (oReq != null) { var sUrl = "http://localhost/hangme.aspx?hang=1&seconds=360"; // change localhost to your server name if applicable document.getElementById("txt1").innerHTML = "Request Sent..."; // pass false for the bAsync parameter for a synchronous request oReq.open("GET", sUrl, false); oReq.send(); document.getElementById("txt1").innerHTML = "Response Received!"; } else { window.alert("Error creating XmlHttpRequest object."); } } </script> </head> <body> <p>Click this button to hang the browser</p> <form name="form1" action="" method="get"> <input type="button" name="btn1" value="hang me" onClick="call_hangme()"> </form> <p id="txt1"/> </body> </html> <!-- code ends on the line before this one -->

चलो इसे लटकाओ!

अब,

Internet Explorer खोलें और hangme.aspx पृष्ठ पर जाएं।
"मुझे लटकाओ" बटन पर क्लिक करें।

उह ओह! हम फंस गए हैं! चूंकि हमने स्ट्रीम को 6 मिनट के लिए सोने के लिए कहा था, इसलिए हमें यहां थोड़ा सा घुरना होगा। यदि आप IE9 का उपयोग कर रहे हैं, तो आप संभवतः "पुनर्स्थापना पृष्ठ" का सुझाव देते हुए नीचे एक सुनहरा पासा देखेंगे। यदि आप एक अलग ब्राउज़र का उपयोग करते हैं, तो सबसे अधिक संभावना है कि आपको एक जमी हुई खिड़की मिलेगी।

हम अतुल्यकालिक अनुरोध खोलने का उपयोग करते हैं

इस कोड को एक नई फ़ाइल में कॉपी करें और इसे wont_hangme.aspx के रूप में सहेजें ।

 <!-- code starts after this line --> <%@ Page Language="C#" %> <html> <head> <title>XmlHttpRequest open hang test</title> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if(Request.QueryString["hang"] == "1") { int seconds = 0; Int32.TryParse(Request.QueryString["seconds"], out seconds); System.Threading.Thread.Sleep(seconds * 1000); } } </script> <script type="text/javascript"> function call_hangme() { var oReq; if (window.XMLHttpRequest) { oReq = new XMLHttpRequest(); } if (oReq != null) { var sUrl = "http://localhost/wont_hangme.aspx?hang=1&seconds=360"; // change localhost to your server name if applicable document.getElementById("txt1").innerHTML = "Request Sent..."; // pass true for the bAsync parameter /* ===> */ oReq.open("GET", sUrl, true); /* Here we define an anonymous function for the onreadystatechange event. We check if we received all the data, and the request was successful before changing the text */ /* ===> */ oReq.onreadystatechange = function() { if (oReq.readyState == 4 && oReq.status == 200) { document.getElementById("txt1").innerHTML = "Response Received!"; } } oReq.send(); } else { window.alert("Error creating XmlHttpRequest object."); } } </script> </head> <body> <p>Click this button to hang the browser</p> <form name="form1" action="" method="get"> <input type="button" name="btn1" value="hang me" onClick="call_hangme()"> </form> <p id="txt1"/> </body> </html> <!-- code ends on the line before this one -->

नया कोड हाइलाइट किया गया है ( Per।: दुर्भाग्य से, हब पर कोड हाइलाइट नहीं किया गया था, लेकिन हम टिप्पणी के बाद लाइन के बारे में बात कर रहे हैं "// bAsync पैरामीटर के लिए सच है" और फिर onreadystatechange के लिए हैंडलर सेट करें )। अब हम ओपन () विधि को bAsync = true कहते हैं, जिसका अर्थ है कि हम एक एसिंक्रोनस कॉल कर रहे हैं। यह प्रतिक्रिया या टाइमआउट की प्रतीक्षा करने के बजाय अन्य कार्यों के लिए UI थ्रेड को मुक्त करेगा। यदि हम अवरुद्ध नहीं हैं, तो हम संदेश द्वारा अग्रेषित कर सकते हैं, और यदि ऐसा है, तो हम अटक नहीं रहे हैं!

अब, जब सर्वर से प्रतिक्रिया जल्द या बाद में हमारे पास आती है, तो हमें इसे संसाधित करने के लिए एक फ़ंक्शन की आवश्यकता होती है। जो हाइलाइटेड कोड करता है। यह onreadystatechange घटना के लिए हमारा हैंडलर है। जैसा कि आप देख सकते हैं, मैं केवल जाँच कर रहा हूँ कि अनुरोध सफलतापूर्वक ( स्थिति == 200) पास हो गया है और यह कि सभी डेटा प्राप्त हो गया है (तैयार == 4)।

क्या हम इसे फिर से लटका सकते हैं?

फिर

इंटरनेट एक्सप्लोरर खोलें और wont_hangme.aspx पर जाएं।
"मुझे लटकाओ" बटन दबाएं।

देखा! जैसा कि आप देख सकते हैं, अनुरोध भेजा गया था, लेकिन ब्राउज़र फ्रीज नहीं हुआ। जब जवाब फिर भी हमारे पास आता है, तो पाठ को बदलना होगा; लेकिन यह हो सकता है कि आप अभी भी पृष्ठ के साथ बातचीत कर सकते हैं।

निष्कर्ष में

जैसा कि बहुत शुरुआत में कहा गया है, आपको अपने XMLHttpRequest अनुरोधों को अतुल्यकालिक बनाना चाहिए। यह उदाहरण स्पष्ट रूप से दिखाता है कि क्यों। आप अपने पृष्ठों की जवाबदेही में वृद्धि करेंगे, आप फ्रीज़ से बच सकते हैं, और, सबसे महत्वपूर्ण बात, अपने उपयोगकर्ताओं को अपने अनुप्रयोगों के साथ अधिक सुखद सहभागिता प्रदान करें।

आपको XMLHttpRequest का उपयोग अतुल्यकालिक रूप से क्यों करना चाहिए