Contoh Dasar Ajax Menggunakan XMLHttpRequest

134 Dilihat
XMLHttpRequest atau XHR merupakan objek yang tersedia pada browser yang digunakan untuk membuat HTTP Requests menggunakan JavaScript. Karena namanya kita mungkin beranggapan bahwa XHR hanya mendukung format data XML, tetapi nyatanya saat ini XHR dapat digunakan oleh banyak format, bukan hanya XML.

Walaupun sekarang terdapat cara yang lebih modern yaitu menggunakan fetch, namun masih ada kok beberapa developer yang menggunakan XHR dalam melakukan HTTP Request. Alasannya karena alasan dukungan browser tua atau suatu fitur yang tidak bisa fetch lakukan seperti tracking upload progress.

Basic Usage

XMLHttpRequest dapat berjalan secara synchronous maupun asynchronous. Namun kebanyakan kasus HTTP Request sebaiknya asynchronous.
Contoh penggunaan dasar dari XMLHttpRequest adalah seperti ini:
202003132318522fefb326486e99f9449b3ea0b5d8cb31.png
Langkah awal untuk menggunakan XMLHttpRequest adalah dengan membuat instance baru dari objek XMLHttpRequest seperti ini:
    

  1. const xhr = new XMLHttpRequest();
    2.
Lalu pada instance dari objek tersebut (xhr) kita tentukan callback function ketika request berhasil (onload) dan ketika request gagal (onerror).
    

  1. xhr.onload = function () {
    2. 

  2.     console.log(this.responseText);
    3. 

  3. }
    4. 

  4. xhr.onerror = function () {
    5. 

  5.     console.log("Ups something error")
    6. 

  6. }
    7.
Di dalam callback function tersebut, nilai dari this merupakan XHR objek. Sehingga this.responseText akan memiliki nilai response (dalam bentuk text) dari server. Ingat karena pada callback function tersebut nilai this merupakan XHR objek, kita tidak dapat menggunakan gaya arrow function dalam menuliskan callback function-nya.
    

  1. xhr.onload =  () => {
    2. 

  2.     // akan menyebabkan error, karena arrow function tidak memiliki this.
    3. 

  3.     console.log(this.responseText);
    4. 

  4. }
    5.
Selanjutnya kita tentukan HTTP Method dan URL yang dituju dengan menggunakan method .open()
    

  1. xhr.open("GET", "https://api-to-call.com/endpoint");
    2.
Nah, langkah akhir adalah mengirimkan request yang sudah kita konfigurasi di atas menggunakan method .send().
    

  1. xhr.send();
    2.
Sehingga seluruh kode dalam penggunaan dasar dari XMLHttpRequest dengan contoh target url berikut https://web-server-book-dicoding.appspot.com/list adalah seperti ini:
    

  1. const xhr = new XMLHttpRequest();
    2. 

  2.  
    3. 

  3. xhr.onload = function () {
    4. 

  4.  console.log(this.responseText)
    5. 

  5. }
    6. 

  6. xhr.onerror = function () {
    7. 

  7.  console.log("Ups something error")
    8. 

  8. }
    9. 

  9.  
    10. 

  10. xhr.open("GET", "https://web-server-book-dicoding.appspot.com/list");
    11. 

  11. xhr.send();
    12.
Coba Anda copy dan paste kode di atas dan jalankan pada console devTools. Jika request berhasil, Anda akan mendapatkan data dalam bentuk JSON String. Data tersebut bisa Anda olah menjadi JavaScript objek dengan mengubahnya menggunakan method JSON.parse().
    

  1. JSON.parse(this.responseText)
    2.

Anda juga bisa mencoba menjalankan potongan kode di atas pada repl.it melalui tautan berikut: https://repl.it/@dicodingacademy/163-06-AJAX-XHR-basic?lite=true

Halaman: 1 2
Catatan Penting: Tulisan ini dilindungi oleh hak cipta. Dilarang keras mengambil, menyalin, atau menyebarluaskan isi tulisan tanpa persetujuan tertulis dari media atau penulis.

Pos terkait