Kita bisa bisa melihat proses AJAX melalui inspect elemen di web browser, lalu buka tab Network dan aktifkan filter XHR (XML HTTP Request).
Oh iya, meskipun di AJAX ada kata “XML”… Bukan berarti hanya mendukung format XML saja.
AJAX juga mendukung format JSON, Plain Text, dan HTML.
Cara Menggunakan Ajax di Javascript
Langkah-langkah menggunakan AJAX seperti ini:
Membuat Objek Ajax
var xhr = new XMLHttpRequest();
Menentukan Fungsi Handler untuk Event
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
Menentukan Method dan URL
xhr.open("GET", url, true);
Mengirim Request
xhr.send();
Oke…
Mari kita coba.
Buatlah file HTML dengan isi sebagai berikut:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajaxtitle>
head>
<body>
<h1>Tutorial Ajaxh1>
<div id="hasil">div>
<button onclick="loadContent()">Load Contentbutton>
<script>
function loadContent(){
var xhr = new XMLHttpRequest();
var url = "https://api.github.com/users/petanikode";
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
document.getElementById("hasil").innerHTML = this.responseText;
}
};
xhr.open("GET", url, true);
xhr.send();
}
script>
body>
html>
Hasilnya:
Pada contoh di atas, kita mengambil data dari server Github dengan methode GET. Lalu hasilnya langsung dimasukan ke dalam elemn
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
9.
Event yang kita gunakan adalah
xhr.open("GET", url, true);
0, pada event ini kita bisa mengecek state dan status AJAX.
if(this.readyState == 4 && this.status == 200){
//...
}
Kode state
xhr.open("GET", url, true);
1 artinya done dan status
xhr.open("GET", url, true);
2 artinya sukses. Berikut ini daftar kode state AJAX.KodeStateKeterangan0UNSENTObjek AAJAX sudah dibuat tapi belum memanggil method
xhr.open("GET", url, true);
3.1OPENEDMethod
xhr.open("GET", url, true);
3 sudah dipanggil.2HEADERS_RECEIVEDMethod
xhr.open("GET", url, true);
5 sudah dipanggil, dan di sini sudah tersedia header status.3LOADINGDownloading; sedang mendownload data.4DONEOperasi AJAX selesai.
Sementara untuk status header
xhr.open("GET", url, true);
2 adalah status HTTP Request. Biasanya kode di atas
xhr.open("GET", url, true);
2 artinya baik dan di bawah
xhr.open("GET", url, true);
2 artinya buruk.
Lalu coba perhatikan kode ini:
xhr.open("GET", url, true);
Terdapat tiga parameter yang kita berikan kepada method
xhr.open("GET", url, true);
3:
xhr.send();
0 adalah metode request yang akan digunakan;xhr.send();
1 adalah alamat URL tujuan;xhr.send();
2 adalah untuk mengeksekusi AJAX secara asynchronous.
Mari kita lanjutkan dengan contoh yang lainnya. Silahkan ubah isi file HTML yang tadi menjadi seperti ini:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajaxtitle>
head>
<body>
<h1>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clearbutton>h1>
<div id="hasil">div>
<button id="button" onclick="loadContent()">Load Contentbutton>
<script>
function loadContent() {
var xhr = new XMLHttpRequest();
var url = "https://api.github.com/users/petanikode";
xhr.onloadstart = function () {
document.getElementById("button").innerHTML = "Loading...";
}
xhr.onerror = function () {
alert("Gagal mengambil data");
};
xhr.onloadend = function () {
if (this.responseText !== "") {
var data = JSON.parse(this.responseText);
var img = document.createElement("img");
img.src = data.avatar_url;
var name = document.createElement("h3");
name.innerHTML = data.name;
document.getElementById("hasil").append(img, name);
document.getElementById("button").innerHTML = "Done";
setTimeout(function () {
document.getElementById("button").innerHTML = "Load Lagi";
}, 3000);
}
};
xhr.open("GET", url, true);
xhr.send();
}
function clearResult() {
document.getElementById("hasil").innerHTML = "";
}
script>
body>
html>
Hasilnya:
Mengirim Data ke Server dengan AJAX
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Dasar Ajaxtitle>
head>
<body>
<h1>Kirim Data dengan Ajaxh1>
<form method="POST" onsubmit="return sendData()">
<p>
<label>Titlelabel>
<input type="text" id="title" placeholder="judul artikel">
p>
<p>
<label>Isi Artikellabel><br>
<textarea id="body" placeholder="isi artikel..." cols="50" rows="10">textarea>
p>
<input type="submit" value="Kirim" />
form>
<script>
function sendData() {
var xhr = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/posts";
var data = JSON.stringify({
title: document.getElementById("title").value,
body: document.getElementById("body").value,
userId: 1
});
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onload = function () {
console.log (this.responseText);
};
xhr.send(data);
return false;
}
script>
body>
html>
Hasilnya:
Pengiriman data tersebut hanya untuk simulasi. Data tidak benar-benar akan terkirim ke server https://jsonplaceholder.typicode.com/posts.
AJAX Menggunakan JQuery
JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX dapat dibuat seperti ini:
// load data ke elemen tertentu via AJAX
$(selector).load(URL,data,callback);
// ambil data dari server
$.get(URL,callback);
// kirim data dari Server
$.post(URL,data,callback);
Mari kita coba…
Buatlah file baru bernama
xhr.send();
3 lalu isi dengan kode berikut:
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
0
Hasilnya:
Dengan fungsi
xhr.send();
4, kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.
Fungsi JQuery
xhr.send();
5 cocoknya untuk mengambil bagian dari HTML untuk ditampilkan.
Contoh lainnya menggunakan metode GET:
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
1
Hasilnya:
Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan
xhr.send();
6.
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
2
AJAX Menggunakan Fetch API
Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX.
Methode ini mulai hadir pada Javascript versi ES6.
Perbedaanya dengan
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
8 dan JQuery adalah:
- Fetch akan mengembalikan sebuah promise;
- Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari server.
- Fetch dapat digunakan di web browser dan juga Nodejs dengan modul
xhr.send();
8.
Berikut ini sintak dasar penggunaan Fetch.
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
3
Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini:
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
4
Mari kita coba…
Berikut ini contoh pengambilan data menggunakan fetch:
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };
5
Hasilnya:
Ajax Menggunakan Axios
Axios hampir sama seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.
