Contoh Dasar Ajax Menggunakan XMLHttpRequest - Mengenal Dasar Ajax Menggunakan XMLHttpRequest

Contoh Dasar Ajax Menggunakan XMLHttpRequest

XMLHttpRequest atau disingkat XHR adalah objek yang tersedia pada browser yang digunakan untuk membuat HTTP Requests menggunakan JavaScript. Karena namanya kita mungkin menganggap  bahwa XHR ini hanya mendukung format data XML, namun pada kenyataannya saat ini XHR bisa  digunakan oleh banyak format, bukan hanya XML.

Meskipun saat ini terdapat cara yang lebih modern yakni menggunakan fetch, tetapi masih ada kok beberapa developer yang masih menggunakan XHR dalam melakukan HTTP Request. Alasannya karena ada atau masih dukungan browser tua atau suatu fitur yang tidak bisa fetch lakukan seperti tracking upload progress.

Basic Usage

XMLHttpRequest bisa berjalan secara synchronous serta asynchronous. Akan tetapi kebanyakan kasus HTTP Request sebaiknya asynchronous.

berikut ini Contoh penggunaan dasar dari XMLHttpRequest adalah seperti dibawah ini:

Langkah pertama untuk menggunakan XMLHttpRequest yakni dengan membuat instance baru dari objek XMLHttpRequest seperti  dibawah ini:

const xhr = new XMLHttpRequest();

Kemudian pada instance dari objek tersebut (xhr) kita harus tentukan callback function ketika request berhasil (onload) dan ketika request gagal (onerror).

xhr.onload = function () {

    console.log(this.responseText);

}

xhr.onerror = function () {

    console.log("Ups something error")

}

pada callback function tersebut, value atau nilai dari this merupakan XHR objek. Sehingga this.responseText akan mempunyai nilai response (dalam bentuk text) dari server. perlu diingat karena pada callback function tersebut nilai this merupakan XHR objek, kita tidak bisa menggunakan gaya arrow function dalam menuliskan callback functionnya.

xhr.onload =  () => {

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

    console.log(this.responseText);

}

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

xhr.open("GET", "https://api-to-call.com/endpoint");

Nah, langkah terakhir adalah mengirimkan request yang telah kita konfigurasi di atas menggunakan method .send().

xhr.send();

Sehingga seluruh kode dalam penggunaan dasar dari XMLHttpRequest  ini dengan contoh target url berikut https://web-server-book-dicoding.appspot.com/list adalah seperti dibawah ini:

const xhr = new XMLHttpRequest();

 

xhr.onload = function () {

 console.log(this.responseText)

}

xhr.onerror = function () {

 console.log("Ups something error")

}

 

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

xhr.send();

Coba Anda copy dan paste code di atas dan jalankan code pada console devTools. Jika request berhasil, Anda akan melihat dan mendapat data dalam bentuk JSON String. Data tersebut dapat Anda olah menjadi JavaScript objek dengan mengubahnya menggunakan method JSON.parse().

JSON.parse(this.responseText)

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

Header and Body Request using XHR

tadi kita sudah belajar bagaimana cara membuat dan menggunakan dasar XMLHttpRequest dalam membuat sebuah GET Request. Lantas bagaimana jika kita ingin mempergunakan method POST dan menetapkan properti pada Header ? Lantas bagaimana caranya guna mengirimkan data pada body HTTP Request? Mari kita bahas permasalahan tersebut satu per satu.

Set Header Property

Dalam menggunakan Web API tidak selalu kita hanya menggunakan GET request saja, terutama ketika request yang kita inginkan, yang mana ini bertujuan mengubah atau menambahkan data. Web API umumnya meminta kita untuk melaksanakannya dengan method POST atau PUT. Tak jarang juga Web API meminta kita untuk menetapkan properti tertentu pada request header guna menunjukkan credential yang kita punyai. Request tersebut sudah pernah kita coba yah Bos Qu menggunakan Postman. akan tetapi bagaimana ya caranya jika menggunakan XHR?

Untuk menetapkan properti pada request header, Anda bisa menggunakan method setRequestHeader() pada instance XMLHttpRequest setelah menetapkan method .open(). Method tersebut menerima dua parameter. Parameter pertama adalah nama properti dan parameter, yang kedua merupakan nilai yang akan ditetapkan pada properti tersebut. Sehingga untuk menetapkan properti Content-Type dengan value application/json pada request kita bisa melakukannya dengan cara seperti berikut ini:

const xhr = new XMLHttpRequest();
 
xhr.onload = function() {
 console.log(this.responseText);
}
 
xhr.onerror = function() {
 console.log("Ups something error");
}
 
xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");
 
// menambahkan properti pada header request
xhr.setRequestHeader("Content-Type", "application/json");

Kita bisa juga menetapkan properti pada request header sebanyak yang kita perlukan atau inginkan.

const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("X-Auth-Token", "12345")

Lumayan mudah bukan Bos Qu?

Set Data to Body Request

Lalu guna menetapkan data pada body request, kita perlu melakukannya pada method .send() dari instance XMLHttpRequest. Semisal guna mengirimkan data JSON String pada body request, begini caranya sebagai berikut: 

const xhr = new XMLHttpRequest();

 

xhr.onload = function() {

 console.log(this.responseText);

}

 

xhr.onerror = function() {

 console.log("Ups something error");

}

 

xhr.open("POST", "https://web-server-book-dicoding.appspot.com/add");

 

// menambahkan properti pada header request

xhr.setRequestHeader("Content-Type", "application/json");

xhr.setRequestHeader("X-Auth-Token", "12345")

 

const book = {

 id: 10,

 title: "Edensor",

 author: "Andrea Hirata"

}

 

xhr.send(JSON.stringify(book));

Sebenarnya tidak hanya JSON format yang bisa dikirimkan melalui body, namun apa yang dilansir pada situs MDN menyebutkan bahwa kita juga dapat mengirimkan dokumen yang sudah ter-serialized sebelum dikirim, atau data lain yang sudah terdaftar pada Fetch spec seperti Blob, BufferSource, FormData, URLSeachParam, ReadableStream atau juga USVString object.

Contoh daripada kode di atas bisa Anda akses atau temukan pada tautan link berikut https://repl.it/@dicodingacademy/163-06-AJAX-XHR-Header-and-Body?lite=true. Anda bisa mencoba mellakukan POST Request dengan menjalankan potongan kode tersebut.

Hasil Akhir Cek link berikut :
https://github.com/dicodingacademy/a163-bfwd-labs/tree/302-dicoding-books-xhr

Terimakasih Semoga bermanfaat !!

Baca Juga : mengenal JSON - Apa Itu JSON?