👩‍🏫 👩🏼‍🎨 🕍 नई XMLHttpRequest2 सुविधाएँ 🌞 🏊 🚠

HTML5 ब्रह्माण्ड के अनिर्धारित नायकों में से एक XMLHttpRequest 2 है। कड़ाई से बोलने पर, XHR2 HTML5 का हिस्सा नहीं है और एक स्वतंत्र वस्तु नहीं है। XHR2 एक ही XMLHttpRequest है, लेकिन कुछ परिवर्तनों के साथ। XHR2 जटिल वेब अनुप्रयोगों का एक अभिन्न अंग है, इसलिए आपको इस पर अधिक ध्यान देना चाहिए।

हमारे पुराने मित्र XMLHttpRequest ने बहुत कुछ बदल दिया है, लेकिन बहुत से लोग इसके परिवर्तनों से अवगत नहीं हैं। XMLHttpRequest Level 2 में नई सुविधाएँ शामिल हैं जो XMLHttpRequest के आस-पास एक झंझरी के साथ हमारे पागल हैक और नृत्य को समाप्त कर देगी: क्रॉस-डोमेन अनुरोध, फ़ाइलों को डाउनलोड करने, डाउनलोड करने और बाइनरी डेटा भेजने की प्रक्रिया। ये विशेषताएं AJAX को नवीनतम एचटीएमएल 5 तकनीकों के साथ बिना किसी हैक के काम करने में सक्षम बनाती हैं: फाइल सिस्टम एपीआई , वेब ऑडियो एपीआई और वेबजीएल।

यह लेख XMLHttpRequest की नई विशेषताओं को कवर करेगा, विशेष रूप से उन जिन्हें आप फ़ाइलों के साथ काम करते समय उपयोग कर सकते हैं।

डेटा निष्कर्षण

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

इसलिए पहले चित्र की सामग्री प्राप्त करना संभव था:

var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); //   ,      xhr.overrideMimeType('text/plain; charset=x-user-defined'); xhr.onreadystatechange = function(e) { if (this.readyState == 4 && this.status == 200) { var binStr = this.responseText; for (var i = 0, len = binStr.length; i < len; ++i) { var c = binStr.charCodeAt(i); //String.fromCharCode(c & 0xff); var byte = c & 0xff; } } }; xhr.send();

हालांकि यह काम करता है, लेकिन आप responseText में एक बाइनरी बूँद नहीं मिलता है, लेकिन एक बाइनरी स्ट्रिंग जो एक बाइनरी पिक्चर फ़ाइल का प्रतिनिधित्व करता है। हम XMLHttpRequest को ट्रिक करते हैं और इसे डेटा कच्चा छोड़ देते हैं। हालांकि यह एक छोटी सी हैक है, लेकिन मैं इसे काला जादू कहना चाहता हूं।

प्रतिक्रिया स्वरूप का संकेत

पिछले उदाहरण में, हमने चित्र को "बाइनरी फ़ाइल" के रूप में अपलोड किया, सर्वर माइम प्रकार को फिर से लिखना और इसे बाइनरी स्ट्रिंग के रूप में संसाधित करना। इस जादू के बजाय, आइए नई XMLHttpRequest सुविधा - responseType और प्रतिक्रिया गुणों का लाभ उठाएं, जो ब्राउज़र को दिखाएगा कि हम किस प्रारूप में डेटा प्राप्त करना चाहते हैं।

xhr.responseType
अनुरोध भेजने से पहले, आप xhr.responseType संपत्ति को बदल सकते हैं और आउटपुट स्वरूप निर्दिष्ट कर सकते हैं: "पाठ", "सरणीबफ़र", "बूँद" या "दस्तावेज़" (डिफ़ॉल्ट "पाठ" है)।

xhr.response
एक सफल अनुरोध के बाद, प्रतिक्रिया संपत्ति में DOMTring, ArrayBuffer, Blob या डॉक्यूमेंट में मांगी गई डेटा के अनुसार प्रतिक्रिया टाइप होगी।

इस महान नई सुविधा के साथ, हम पिछले उदाहरण को फिर से कर सकते हैं। इस बार हम एक स्ट्रिंग के बजाय एक ArrayBuffer के रूप में एक तस्वीर का अनुरोध करते हैं। हम BlobBuilder API का उपयोग करके डाउनलोड की गई फ़ाइल को Blob फॉर्मेट में बदल देंगे:

 BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder; var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var bb = new BlobBuilder(); bb.append(this.response); // :  xhr.responseText var blob = bb.getBlob('image/png'); /*...*/ } }; xhr.send();

इतना बेहतर!

ArrayBuffer प्रारूप में उत्तर

ArrayBuffer द्विआधारी डेटा के लिए एक सामान्य निश्चित लंबाई वाला कंटेनर है। यदि आपको एक सामान्य कच्चे बाइनरी डेटा बफर की आवश्यकता है, तो यह बहुत सुविधाजनक है, लेकिन ArrayBuffer की असली ताकत यह है कि आप इससे टाइप किए गए जावास्क्रिप्ट सरणी बना सकते हैं। वास्तव में, आप एक ArrayBuffer का उपयोग करके विभिन्न लंबाई के सरणियों का निर्माण कर सकते हैं। उदाहरण के लिए, आप एक 8-बिट पूर्णांक सरणी बना सकते हैं जो एक ही डेटा से प्राप्त 32-बिट सरणी के रूप में एक ही ArrayBuffer का उपयोग करता है।

उदाहरण के रूप में, आइए एक कोड लिखें जो हमारी तस्वीर को ArrayBuffer के रूप में प्राप्त करता है और इसके डेटा से 8-बिट पूर्णांक सरणी बनाता है:

 var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { var uInt8Array = new Uint8Array(this.response); // this.response == uInt8Array.buffer // var byte3 = uInt8Array[4]; // 4-  /*...*/ }; xhr.send();

बूँद जवाब

यदि आप सीधे Blob के साथ काम करना चाहते हैं और / या आपको फ़ाइल के बाइट में हेरफेर करने की आवश्यकता नहीं है, तो xhr.responseType='blob' उपयोग करें (अब केवल Chrome crbug.com/52486 में ):

 window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; var img = document.createElement('img'); img.onload = function(e) { window.URL.revokeObjectURL(img.src); // Clean up after yourself. }; img.src = window.URL.createObjectURL(blob); document.body.appendChild(img); /*...*/ } }; xhr.send();

Blob को कई स्थानों पर उपयोग किया जा सकता है: indexedDB में डेटा की बचत, HTML5 फाइल सिस्टम को लिखना, ऊपर दिए गए उदाहरण के रूप में Blob URL ( MDC ) बनाना।

डेटा भेज रहा है

विभिन्न स्वरूपों में डेटा प्राप्त करने की क्षमता बहुत अच्छी है, लेकिन यह हमें सूट नहीं करता है यदि हम इस डेटा को वापस (सर्वर पर) नहीं भेज सकते हैं। XMLHttpRequest ने हमें DOMString या दस्तावेज़ (XML) भेजने के लिए प्रतिबंधित किया है। अब यह अतीत में है। अद्यतन भेजा गया () विधि आपको निम्न प्रकार के डेटा भेजने की अनुमति देता है: DOMString, दस्तावेज़, फ़ॉर्मडाटा, बूँद, फ़ाइल, ArrayBuffer। लेख के इस भाग में हम इन स्वरूपों में डेटा भेजने का तरीका देखेंगे।

स्ट्रिंग डेटा भेजना: xhr.send (DOMString)

XMLHttpRequest 2 से पहले:

 function sendText(txt) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.onload = function(e) { if (this.status == 200) { console.log(this.responseText); } }; xhr.send(txt); } sendText('test string');

XMLHttpRequest 2 के बाद:

 function sendTextNew(txt) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.responseType = 'text'; // <<< xhr.onload = function(e) { if (this.status == 200) { console.log(this.response); // <<< } }; xhr.send(txt); } sendText2('test string');

कोई नई बात नहीं। उदाहरण के बाद थोड़ा अलग है। यह स्पष्ट रूप से responseType को परिभाषित करता है, लेकिन आप responseType को छोड़ सकते हैं और एक समान परिणाम प्राप्त कर सकते हैं (हमेशा डिफ़ॉल्ट रूप से पाठ)।

फॉर्म डेटा जमा करना: xhr.send (फॉर्मडेटा)

मुझे लगता है कि आप में से कई ने AJAX के माध्यम से फॉर्म डेटा जमा करने के लिए jQuery या अन्य पुस्तकालयों का उपयोग किया है। इसके बजाय, हम प्रपत्र डेटा का उपयोग कर सकते हैं , एक और डेटा प्रकार जिसे एक्सएचआर 2 समझता है। FormData जावास्क्रिप्ट में मक्खी पर HTML फॉर्म बनाने के लिए उपयोगी है। AJAX का उपयोग करके ये फॉर्म जमा किए जा सकते हैं:

 function sendForm() { var formData = new FormData(); formData.append('username', 'johndoe'); // <<< formData.append('id', 123456); // <<< var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.onload = function(e) { /*...*/ }; xhr.send(formData); // <<<

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

 <form id="myform" name="myform" action="/server"> <input type="text" name="username" value="johndoe"> <input type="number" name="id" value="123456"> <input type="submit" onclick="return sendForm(this.form);"> </form>

 function sendForm(form) { var formData = new FormData(form); //  FormData  HTMLFormElement formData.append('secret_token', '1234567890'); //      var xhr = new XMLHttpRequest(); xhr.open('POST', form.action, true); xhr.onload = function(e) { /*...*/ }; xhr.send(formData); return false; //   }

HTML फ़ॉर्म में फ़ाइलें हो सकती हैं ( <input type="file"> ) - फ़ॉर्मडेट उनके साथ काम कर सकता है। बस फ़ाइल (ओं) को जोड़ें और जब ब्राउज़र send() विधि कहा जाता है तो ब्राउज़र एक multipart/form-data अनुरोध निष्पादित करेगा। यह बहुत सुविधाजनक है!

 function uploadFiles(url, files) { var formData = new FormData(); for (var i = 0, file; file = files[i]; ++i) { formData.append(file.name, file); } var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function(e) { /*...*/ }; xhr.send(formData); // multipart/form-data } document.querySelector('input[type="file"]').addEventListener('change', function(e) { uploadFiles('/server', this.files); }, false);

फ़ाइल भेजना या ब्लॉब करना: xhr.send (Blob)

XHR2 का उपयोग करके हम फाइल या ब्लॉब भी भेज सकते हैं। ध्यान रखें कि फ़ाइलें ब्लॉब हैं।
इस उदाहरण में, हम BlobBuilder API का उपयोग करके स्क्रैच से एक नया टेक्स्ट फ़ील्ड बनाएंगे और इस Blob को सर्वर पर अपलोड करेंगे। यह कोड एक हैंडलर भी बनाता है जो हमें फ़ाइल अपलोड प्रक्रिया दिखाता है (अविश्वसनीय रूप से उपयोगी HTML5 सुविधा):

 <progress min="0" max="100" value="0">0% complete</progress>

 function upload(blobOrFile) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.onload = function(e) { /*...*/ }; //     var progressBar = document.querySelector('progress'); xhr.upload.onprogress = function(e) { // <<< if (e.lengthComputable) { progressBar.value = (e.loaded / e.total) * 100; progressBar.textContent = progressBar.value; //      progress } }; xhr.send(blobOrFile); // <<< } var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder; var bb = new BlobBuilder(); bb.append('hello world'); // <<< upload(bb.getBlob('text/plain')); // <<<

बाइट्स का एक यादृच्छिक सेट भेजें: xhr.send (ArrayBuffer)

हम ArrayBuffers भेज सकते हैं

 function sendArrayBuffer() { var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.onload = function(e) { /*...*/ }; var uInt8Array = new Uint8Array([1, 2, 3]); // <<< xhr.send(uInt8Array.buffer); // <<<< }

क्रॉस ओरिजिनल रिसोर्स शेयरिंग (कोर)

CORS एक डोमेन पर अनुप्रयोगों को दूसरे डोमेन के लिए AJAX अनुरोधों को पार करने की अनुमति देता है। हमें क्लाइंट पर कुछ भी बदलने की आवश्यकता नहीं है - सब कुछ बेहद सरल है! ब्राउज़र स्वयं हमारे लिए आवश्यक हेडर भेजेगा।

कोर अनुरोधों को सक्षम करना

मान लीजिए कि हमारा आवेदन example.com पर है और हमें डेटा प्राप्त करने की आवश्यकता है www.example2.com www.example2.com आमतौर पर, यदि आप इस तरह के AJAX अनुरोध करने की कोशिश करते हैं, तो अनुरोध निष्पादित नहीं किया जाएगा और ब्राउज़र "मूल बेमेल" अपवाद को फेंक देगा। कोर के साथ www.example2.com www.example2.com केवल एक शीर्ष लेख जोड़कर अनुरोध पूरा करने या न करने के लिए example.com साथ हमारे आवेदन की अनुमति देने का निर्णय ले सकता है:

 Access-Control-Allow-Origin: http://example.com

Access-Control-Allow-Origin हेडर एक साइट या किसी भी डोमेन से किसी भी साइट पर जारी किया जा सकता है:

 Access-Control-Allow-Origin: *

Html5rocks.com पर किसी भी पेज पर CORS सक्षम है। यदि आप डिबगर को सक्षम करते हैं, तो आप इस शीर्षलेख Access-Control-Allow-Origin को देख सकते हैं:

क्रॉस-डोमेन क्वेरी को सक्षम करना बहुत सरल है। यदि आपका विवरण सार्वजनिक रूप से उपलब्ध है, तो कृपया CORS सक्षम करें !

क्रॉस-डोमेन अनुरोध बनाना

यदि सर्वर संसाधन CORS की अनुमति देता है, तो क्रॉस-डोमेन अनुरोध बनाना नियमित XMLHttpRequest से अलग नहीं है। उदाहरण के लिए, यह है कि हम सर्वर example.com पर सर्वर से एप्लिकेशन के अनुरोध को कैसे निष्पादित कर सकते हैं www.example2.com www.example2.com :

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.example2.com/hello.json'); xhr.onload = function(e) { var data = JSON.parse(this.response); /*...*/ } xhr.send();

सब कुछ बेहद पारदर्शी है और पोस्टमैसेज, विंडो.नाम, डॉक्यूमेंट.डोमेन, सर्वर प्रॉक्सिस और तरीकों के अन्य ~~विकृतियों के~~ चारों ओर एक नृत्य के साथ कोई नृत्य नहीं है।

उदाहरण

HTML5 फ़ाइल सिस्टम में फ़ाइल अपलोड करें और सहेजें

मान लीजिए कि हमारे पास चित्रों की एक गैलरी है और हम एचटीएमएल 5 फाइल सिस्टम का उपयोग करके अपने आप को कई चित्रों को सहेजना चाहते हैं।

 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; function onError(e) { console.log('Error', e); } var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'arraybuffer'; // <<< //     xhr.onload = function(e) { // <<< //        window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) { // <<< //   -   fs.root.getFile('image.png', {create: true}, function(fileEntry) { //   fileEntry.createWriter(function(writer) { writer.onwrite = function(e) { /*...*/ }; writer.onerror = function(e) { /*...*/ }; //  Blob    var bb = new BlobBuilder(); // <<< bb.append(this.response); // <<< //    writer.write(bb.getBlob('image/png')); // <<< }, onError); }, onError); }, onError); }; xhr.send();

चेतावनी: देखें कि कौन से ब्राउज़र फ़ाइलसिस्टम एपीआई का समर्थन करते हैं

भागों में फ़ाइल भेजना

फाइल एपीआई का उपयोग करके हम एक बड़ी फाइल भेजने की प्रक्रिया को सरल बना सकते हैं। हम एक बड़ी फाइल को कई छोटी फाइलों में विभाजित करते हैं, फिर हर एक को एक्सएचआर का उपयोग करके भेजा जाता है। सर्वर पर हम फ़ाइल को एक बड़े में जमा करते हैं। यह इसी तरह है कि कैसे GMail बड़े अटैचमेंट भेजता है। इस तकनीक का उपयोग Google एप्लिकेशन इंजन की सीमाओं को दरकिनार करने के लिए किया जा सकता है - 32MB प्रति http अनुरोध।

 window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder; function upload(blobOrFile) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/server', true); xhr.onload = function(e) { /*...*/ }; xhr.send(blobOrFile); } document.querySelector('input[type="file"]').addEventListener('change', function(e) { var blob = this.files[0]; const BYTES_PER_CHUNK = 1024 * 1024; //    1MB const SIZE = blob.size; var start = 0; var end = BYTES_PER_CHUNK; while(start < SIZE) { // : blob.slice  .  http://goo.gl/U9mE5 if ('mozSlice' in blob) { var chunk = blob.mozSlice(start, end); } else { var chunk = blob.webkitSlice(start, end); } upload(chunk); start = end; end = start + BYTES_PER_CHUNK; } }, false); })();

मैं सर्वर पर फ़ाइल असेंबली स्क्रिप्ट संलग्न नहीं करता - वहाँ सब कुछ स्पष्ट है।

संदर्भ

1. XMLHttpRequest स्तर 2 विशिष्टता
2. क्रॉस ओरिजिनल रिसोर्स शेयरिंग (कोर) विशिष्टता
3. फ़ाइल एपीआई विनिर्देश
4. फाइलसिस्टम एपीआई विनिर्देश

नई XMLHttpRequest2 सुविधाएँ