एचटीएमएल 5 - कोर

Cross-origin resource sharing (CORS) वेब ब्राउज़र में किसी अन्य डोमेन से प्रतिबंधित संसाधनों को अनुमति देने के लिए एक तंत्र है।

मान लीजिए, यदि आप HTML5 डेमो अनुभागों में HTML5- वीडियो प्लेयर पर क्लिक करते हैं। यह कैमरे की अनुमति मांगेगा। यदि उपयोगकर्ता अनुमति देता है तो केवल यह कैमरा खोलेगा या फिर यह वेब अनुप्रयोगों के लिए कैमरा नहीं खोलेगा।

एक CORS अनुरोध करना

यहां क्रोम, फ़ायरफ़ॉक्स, ओपेरा और सफारी सभी XMLHttprequest2 ऑब्जेक्ट का उपयोग करते हैं और इंटरनेट एक्सप्लोरर समान XDomainRequest ऑब्जेक्ट, ऑब्जेक्ट का उपयोग करता है।

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS not supported');
}

CORS में ईवेंट हैंडल

अनु क्रमांक।	इवेंट हैंडलर और विवरण
1	onloadstart अनुरोध शुरू करता है
2	onprogress डेटा लोड करता है और डेटा भेजता है
3	onabort अनुरोध को निरस्त करें
4	onerror अनुरोध विफल हो गया है
5	onload सफलतापूर्वक लोड करने का अनुरोध करें
6	ontimeout अनुरोध पूरा होने से पहले समय समाप्त हो गया है
7	onloadend जब अनुरोध पूर्ण या तो सफल या विफलता है

Onload या onerror घटना का उदाहरण

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

हैंडलर के साथ कोर का उदाहरण

नीचे दिए गए उदाहरण मेकसॉरसपेस्ट () और ऑनलोड हैंडलर का उदाहरण दिखाएंगे

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}

// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   
   var xhr = createCORSRequest('GET', url);
   
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}