Tutorial HTML5 - CORS (Bahasa Indonesia)

Digital Candil Kuya - Hallo Sobat Candil kembali lagi di artikel kali ini saya akan bagikan sebuah tutorial pemrogramman dasar dari Tutorial HTML5 - CORS (Bahasa Indonesia) yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog Candil Kuya, Silahkan d simak dan di perhatikan baik-baik.

Cross-origin resource sharing (CORS) adalah mekanisme untuk mengizinkan sumber daya yang dibatasi dari domain lain di browser web.

Misalnya, jika Anda mengklik pemutar video HTML5 HTML5 di bagian demo html5. itu akan meminta izin kamera. jika pengguna mengizinkan izin maka hanya itu yang akan membuka kamera atau tidak membuka kamera untuk aplikasi web.

Membuat permintaan CORS

Di sini Chrome, Firefox, Opera, dan Safari semuanya menggunakan objek XMLHttprequest2 dan Internet Explorer menggunakan objek XDomainRequest yang serupa, objek.

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');
}

Menangani acara di CORS

Table title

No.	Penangan & Deskripsi Acara
1	onloadstart Memulai permintaan
2	onprogress Memuat data dan mengirim data
3	onabort Batalkan permintaan
4	onerror permintaan gagal
5	onload permintaan memuat berhasil
6	ontimeout waktu habis telah terjadi sebelum permintaan dapat diselesaikan
7	onloadend Ketika permintaan selesai baik berhasil atau gagal

Contoh acara onload atau onerror

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

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

Contoh CORS dengan handler

Contoh di bawah ini akan menunjukkan contoh makeCorsRequest() dan onload handler

// 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('')[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();
}

Saya membagikan tulisan hanya untuk tujuan pengujian dan pendidikan. Jika Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan email kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.
Semoga Artikel Tutorial HTML5 - CORS (Bahasa Indonesia) bisa dijadikan refferensi pembelajaran untuk anda yang masih awam terjun ke dalam dunia web programming, Semoga Bermanfaat and Happy Ngoding