Skill Level
Intermediate
Categories
Web Development
Reading Time
20 minutes, 57 seconds
Technology
JavaScript
Framework
No framework
Library
No library
Mempelajari XMLHttpRequest (XHR) Pada JavaScript Dengan ES6 Syntax

JavaScript merupakan bahasa yang paling banyak digunakan selama 6 tahun berturut-turut hingga 2018 menurut StackOverflow Development Survey.

Hypertext Transfer Protocol (HTTP) adalah protokol yang di gunakan World Wide Web (WWW) untuk mengirim data antar 2 sistem, yang selanjutnya disebut Client & Server, HTTP Client itu bentuknya beragam, bisa Browser, Headless Browser, cURL dan lainya, untuk HTTP Server juga beragam, dan ditulis di berbagai bahasa pemrograman atau web server, misalnya PHP, GoLang, NGINX, APACHE, NodeJS HTTP Server, dan banyak lagi.

XHR atau XMLHttpRequest merupakan browser built-in XMLHttpRequest object, salah satu object yang terdapat pada JavaScript untuk melakukan permintaan data dari klien ke server. Bila merujuk ke HTTP maka XHR memiliki posisi sebagai client. Seluruh browser modern telah mendukung object JavaScript ini. Cara menggunakan object ini sangat mudah, contoh penggunaannya seperti berikut,

var http = new XMLHttpRequest();
http.addEventListener("load", () => {
  console.log(http.responseText);
});
http.open("GET", "https://reqres.in/api/users");
http.send();

Maka kode di atas akan menghasilkan output berikut,

{"page":1,"per_page":3,"total":12,"total_pages":4,"data":[{"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},{"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},{"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}]}

Untuk melihat rincian seputar request yang dibuat kita dapat melihatnya melalui Developer Tools (F12) > Network.

Kenapa bisa menghasilkan output seperti di atas? Karena, kode XHR yang kita tulis di atas melakukan permintaan ke server reqres.in, lebih tepatnya ke endpoint /api/usersdan di dalam endpoint tersebut sudah diatur untuk memberikan response di atas dengan format JSON.

Pada XHR, response akan diterima sampai server yang dimaksud telah memberikan response. Seperti yang kita dapat lihat pada kode XHR di atas, kode console.log(http.responseText);akan dieksekusi ketika server yang maksud telah memberikan response. Entah itu response berhasil atau galat. Dalam kata lain, cara kerja XHR adalah asynchronous yang berarti kode setelah XHR akan langsung dieksekusi tanpa perlu menunggu proses permintaan data yang dilakukan XHR selesai atau hingga server memberikan response.

Kira-kira dapat digambarkan seperti berikut untuk cara berkomunikasi XHR JavaScript dengan HTTP Server.

Ilustrasi komunikasi XHR JavaScript dengan HTTP Server

Response yang diberikan oleh server dapat berformat webpage HTML, XML, JSON atau jenis dokumen lainnya bergantung pada pembuat HTTP Server tersebut.

Apa manfaat XHR?

Berdasarkan segala sesuatu yang telah saya jelaskan sebelumnya, dengan XHR kita dapat melakukan transaksi data antara client dan server dibelakang layar, melakukan perpindahan webpage tanpa harus me-reload seluruh isi webpage dan yang lainnya.

Lebih dalam dengan XHR

Untuk memulai menggunakan XHR dalam melakukan permintaan data, dapat dimulai dengan menginisialisasi class XHR tersebut.

var http = new XMLHttpRequest();

Return dari class tersebut adalah sebuah object yang terdiri dari property dan method dengan fungsinya masing-masing.

XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}

Namun, bila kamu menggunakan browser lawas seperti IE 5 dan IE 6 maka kamu harus melakukan cara yang berbeda untuk menginisialisasi XHR.

var http = new ActiveXObject("Microsoft.XMLHTTP");

Untuk mengatasi hal ini, kamu bisa melakukan pengecekan apakah browser mendukung XHR atau tidak dengan cara seperti berikut,

var http;
if (window.XMLHttpRequest) {
    // code for modern browsers
    http = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    http = new ActiveXObject("Microsoft.XMLHTTP");
}

Dari kode di atas kita dapat lihat bahwa jika browser mendukung XHR maka akan menggunakan class XMLHttpRequest()dan bila menggunakan browser lawas maka akan menggunakan class ActiveXObject()untuk menginisialisasinya.

Setelah itu, untuk memulai melakukan request, kamu harus menentukan dahulu endpoint dan method yang akan digunakan untuk melakukan request. Kedua hal tersebut bergantung pada HTTP Server yang kamu gunakan. Dalam kasus ini kita akan menggunakan Reqres.in sebagai HTTP Server kita untuk meng-handle request dan memberikan response. Gunakan method .open(method, url, async, user, password).

Secara default, method .open()pada XHR memerlukan 5 parameter yang perlu diisi, namun yang dibutuhkan hanya 2 parameter saja, yaitu URL dan method. Parameter URL diisi dengan nilai URL endpoint server. Sedangkan mehtod diisi dengan jenis method HTTP yang akan digunakan, method ini bergantung pada URL endpoint, seperti “GET”, “POST”, “DELETE” atau yang lainnya.

Sebagai contoh, kita akan mengambil data users dari endpoint /api/usersdi server Reqres.inEndpoint tersebut dapat diakses dengan method GET. Maka kita hanya perlu menambahkan URL dan method tadi ke dalam method .open()XHR.

xhr.open("GET", "https://reqres.in/api/users");

Seperti yang kita bahas sebelumnya, method .open()memiliki 5 parameter, yaitu method, URL, async, user dan password. URL dan method sudah kita bahas, sekarang kita akan bahas sisanya.

Async merupakan optional parameter yang menentukan apakah proses XHR ini asynchronously atau tidak. Parameter ini diisi dengan boolean yaitu, true atau false. Default-nya adalah false. Bila parameter ini diisi dengan false, maka kode setelah XHR tidak akan dieksekusi hingga proses transaksi XHR selesai.

User dan password merupakan optional parameter yang digunakan bila endpoint membutuhkan authentication.

Bila URL dan method sudah ditentukan, saatnya “meluncurkan” permintaan ke server dengan menggunakan method .send() dari XHR.

xhr.send();

Permintaan tidak akan diekskusi atau “diluncurkan” sampai method .send() pada XHR dipanggli.

Sampai sini kita sudah menulis kode berikut,

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqres.in/api/users");
xhr.send();

Dengan kode di atas kita sudah dapat melakukan permintaan data terhadap server, namun kita belum bisa menerima data tersebut.

Untuk meng-handle response data dari server maka kita perlu menggunakan event listener yang tersedia pada XHR, yaitu load. Kira-kira seperti berikut,

xhr.addEventListener("load", () => {
  console.log("transfer selesai");
});

Event tersebut akan di-fire saat permintaan telah di-response oleh server. Selain event listener load ada juga yang lainnya, seperti progress, error, abort dan lainnya.

Untuk mengambil data response yang diberikan server kita dapat menggunakan property responseTextpada XHR object.

xhr.addEventListener("load", () => {
  console.log(xhr.responseText);
});

Sampai sini kita sudah dapat melakukan request dan response HTTP dengan XML Http Request (XHR). Kesuluruhan kodenya maka seperti berikut,

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqres.in/api/users");
xhr.send();
xhr.addEventListener("load", () => {
  console.log(xhr.responseText);
});

Request di atas akan menghasilkan response seperti berikut,

{"page":1,"per_page":3,"total":12,"total_pages":4,"data":[{"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},{"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},{"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}]}

Response di atas adalah berformat JSON.

Untuk mengetahui response yang diterima galat atau sukses, kita dapat menggunakan response status code yang diterima XHR dari server. Response status tersebut dapat diambil menggunakan property .status dari XHR object. Pada HTTP, response code yang menunjukan request sukses adalah 200 hingga 226. Maka kita akan membuatnya seperti berikut,

xhr.addEventListener("load", () => {
  if(xhr.status >= 200 && xhr.status <= 226) {
    console.log(xhr.responseText);
  }else{
    console.log("Galat");
  }
});

Kode di atas akan menampilkan response dari server bila response status lebih dari sama dengan 200 dan kurang dari sama dengan 226. Bila response status di luar itu maka akan menampilkan teks “Galat” pada console log.

Sampai sini kita sudah memahami request method GET dan response pada HTTP dengan XHR object.

Membuat request POST

Setelah sebelumnya mencoba membuat request dengan method GET. Maka kali ini kita akan membuat request dengan method POST. Apa bedanya? Method GET cenderung untuk mengambil data spesifik dan digunakan untuk mengambil data saja, sedangkan POST umumnya digunakan untuk membuat sesuatu yang baru pada server, seperti meng-create record baru atau yang lainnya.

Dalam kasus ini kita akan mencoba membuat data pengguna baru dengan endpoint yang terdapat pada server Reqres.in, yaitu POST /api/users. Pada endpoint tersebut, kita perlu mengirim parameter data yang berisi namedan jobMisal,

name=Muhamad Nauval Azhar&job=Back-end Developer

Untuk melakukan request POST sama saja halnya seperti kita melakukan request GET. Kode yang digunakan pun hampir sama, hanya saja ada sedikit tambahan dan perubahan.

Perubahan yang perlu dilakukan adalah merubah method GET menjadi POST pada method .open() di XHR object.

Lalu, menambahkan nilai parameter name=Muhamad Nauval Azhar&job=Back-end Developer ke dalam method .send(data)pada XHR object.

Terakhir, menambahkan header Content-Typepada XHR object. Header merupakan sebuah informasi seputar rincian permintaan yang diberikan kepada server.

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

URL tidak akan kita ubah, karena kita menggunakan URL yang sama hanya saja method-nya yang berbeda. Keseluruhan kode akan seperti berikut,

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://reqres.in/api/users");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Muhamad Nauval Azhar&job=Back-end Developer");
xhr.addEventListener("load", () => {
  console.log(xhr.responseText);
});

Request di atas akan menghasilkan output seperti berikut,

{"name":"Muhamad Nauval Azhar","job":"Back-end Developer","id":"4","createdAt":"2018-06-16T04:41:23.683Z"}

Sampai sini kita sudah mencoba membuat request dengan method GET dan POST.

Implementasi XHR dengan HTML

Sekarang kita akan mengimplementasikan XHR dengan HTML. Dalam kasus ini kita akan membuat sebuah form dengan kolom input Namedan Job. Lalu ditambakan dengan sebuah tombol action yang ketika diklik akan mengirim request ke server Reqres.in pada endpoint POST /api/users.

Untuk struktur HTML-nya kira-kira seperti berikut,

<form id="create-user">
  <label for="name">Name</label>
  <input name="name" id="name">
  <br><br>
  <label for="job">Job</label>
  <input name="job" id="job">
  <br><br>
  <button type="submit" id="submit-form">
    Create User
  </button>
</form>

Kode HTML di atas akan menampilkan 2 kolom input Name dan Job. Ada juga tombol dengan teks Create User.

Pertama, kita perlu membuat halaman tidak reload ketika form di-submit. Sebelum itu, silakan kode JavaScript yang kamu tulis itu akan diletakkan sebagai inline script dengan menggunakan tag <script>atau diletakkan pada file yang terpisah.

Seperti yang dapat kita lihat, form di atas memiliki identifier atau ID create-usermaka kita dapat akses element tersebut dengan menggunakan document.getElementById("create-user").

var create_user_form = document.getElementById("create-user");

Tambahkan event listener submitpada form tersebut.

create_user_form.addEventListener("submit", (event) => {
  // do something
});

Lalu, gunakan method .preventDefault()pada event agar form tidak reload saat di-submit.

create_user_form.addEventListener("submit", (event) => {
  event.preventDefault();
});

Sampai sini seharusnya ketika tombol diklik atau form di-submit, maka tidak akan terjadi apa-apa.

Berikutnya, kita akan collecting data nilai yang terdapat pada kedua input text yang terdapat pada form, yaitu Name dan Job.

var input_name = document.querySelector("input[name=name]").value,
    input_job = document.querySelector("input[name=job]").value;

Kode document.querySelector()merupakan kode JavaScript untuk mengakses DOM dari element dan memiliki return object. Sedangkan .valuemerupakan property yang terdapat pada DOM input text untuk mengambil nilai yang diinput oleh user.

Bila digabung kodenya akan seperti berikut,

var create_user_form = document.getElementById("create-user");

create_user_form.addEventListener("submit", (event) => {
  var input_name = document.querySelector("input[name=name]").value,
      input_job = document.querySelector("input[name=job]").value;

  event.preventDefault();
});

Berikutnya kita akan gunakan kode XHR POST yang telah kita gunakan sebelumnya. Kodenya seperti berikut,

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://reqres.in/api/users");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=Muhamad Nauval Azhar&job=Back-end Developer");
xhr.addEventListener("load", () => {
  console.log(xhr.responseText);
});

Pada kode di atas dapat kita lihat ada teks “Muhamad Nauval Azhar” sebagai data name dan “Back-end Developer” sebagai data job. Mari kita ubah teks tersebut agar nilainya sesuai dengan yang di-input oleh user.

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://reqres.in/api/users");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name="+ input_name +"&job=" + input_job);
xhr.addEventListener("load", () => {
  console.log(xhr.responseText);
});

Letakkan kode di atas ke dalam listener submit pada form.

var create_user_form = document.getElementById("create-user");

create_user_form.addEventListener("submit", (event) => {
  var input_name = document.querySelector("input[name=name]").value,
      input_job = document.querySelector("input[name=job]").value;
      
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://reqres.in/api/users");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("name="+ input_name +"&job=" + input_job);
  xhr.addEventListener("load", () => {
    console.log(xhr.responseText);
  });

  event.preventDefault();
});

Sampai sini kita sudah bisa melakukan request POST XHR dengan menggunakan form HTML atau dalam kata lain, kita dapat membuat data pengguna baru dengan form HTML pada server Reqres.in melalui JavaScript XHR. Silakan gunakan JSFiddle berikut untuk mengujinya.


Berikutnya, agar memberikan user-experience yang lebih baik maka kita akan memberikan sebuah wadah informasi mengenai XHR yang kita buat. Informasi tersebut seperti, data pengguna telah dibuat, informasi galat atau yang lainnya. Informasi tersebut nantinya akan ditampilkan pada sebuah tag div HTML.

Mari kita buat tag div HTML dengan identifier atau ID info-box.

<div id="info-box"></div>

Letakkan kode tersebut di bawah form.

Lalu kita akan mengakses element tersebut pada JavaScript menggunakan method .getElementById().

var info_box = document.getElementById("info-box");

Letakkan kode di atas setelah variable create_user_form.

Pertama, kita akan memberikan informasi bahwa request sedang dilakukan. Maka kodenya seperti berikut,

info_box.innerHTML = "Permintaan sedang dikirim ...";

Letakkan kode di atas pada baris pertama di dalam listener submit pada form.

..
...
create_user_form.addEventListener("submit", (event) => {
  info_box.innerHTML = "Permintaan sedang dilakukan ...";
...
..
.

Kemudian, kita akan memberi informasi ketika request telah selesai (entah itu galat atau sukses).

info_box.innerHTML = "Permintaan telah selesai. <br> Status: " + xhr.status + "<br> Response Text: " + xhr.responseText;

Letakkan kode tersebut di dalam listener load pada XHR object.

...
  xhr.addEventListener("load", () => {
    info_box.innerHTML = "Permintaan telah selesai. <br> Status: " + xhr.status + "<br> Response Text: " + xhr.responseText;
    ..
  });
...
..

Bila digabungkan, keseluruhan kode akan seperti berikut,

Untuk HTML

<form id="create-user">
  <label for="name">Name</label>
  <input name="name" id="name">
  <br><br>
  <label for="job">Job</label>
  <input name="job" id="job">
  <br><br>
  <button type="submit" id="submit-form">
    Create User
  </button>
</form>
<div id="info-box"></div>

Untuk JavaScript

var create_user_form = document.getElementById("create-user"),
    info_box = document.getElementById("info-box");

create_user_form.addEventListener("submit", (event) => {
  info_box.innerHTML = "Permintaan sedang dilakukan ...";
  
  var input_name = document.querySelector("input[name=name]").value,
      input_job = document.querySelector("input[name=job]").value;
      
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://reqres.in/api/users");
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("name="+ input_name +"&job=" + input_job);
  xhr.addEventListener("load", () => {
    info_box.innerHTML = "Permintaan telah selesai. <br> Status: " + xhr.status + "<br> Response Text: " + xhr.responseText;
    console.log(xhr.responseText);
  });

  event.preventDefault();
});

Untuk mengujinya silakan gunakan JSFiddle berikut ini,


Bila berhasil akan menampilkan format teks berikut ini pada info box.

Permintaan telah selesai. 
Status: 201
Response Text: {"name":"Muhamad Nauval Azhar","job":"Web Developer","id":"618","createdAt":"2018-06-16T05:47:14.077Z"}

Sampai sini kita sudah mengimplementasikan XHR dengan HTML.

Untuk lebih detail lagi seputar XHR maka kamu dapat membaca dokumentasinya di sini.

 

Final Words

Pada artikel ini semoga kamu sudah paham dengan XHR ya, Jon. Jadi, XHR dan AJAX itu sama saja secara fungsi, hanya saja AJAX itu lebih ke kompabilitas cross-browser, namun secara core, AJAX juga menggunakan XHR. Semoga bermanfaat.

Topik:

Baca juga post berikut

Tutorial Membuat Line Chart Dengan Chart...

Program Sederhana Dengan JavaScript

Muhamad Nauval Azhar
4 months ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

Pecinta Alam (Mbah dukun)

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!