.
Event yang kita gunakan adalah onreadystatechange
,
pada event ini kita bisa mengecek state dan status AJAX.
if(this.readyState == 4 && this.status == 200){
//...
}
Kode state 4
artinya done dan status 200
artinya sukses. Berikut ini daftar kode state AJAX.1
Kode | State | Keterangan |
---|
0
| UNSENT
| Objek AAJAX sudah dibuat tapi belum memanggil method open() .
|
1
| OPENED
| Method open() sudah dipanggil.
|
2
| HEADERS_RECEIVED
| Method send() sudah dipanggil, dan di sini sudah tersedia header status.
|
3
| LOADING
| Downloading; sedang mendownload data.
|
4
| DONE
| Operasi AJAX selesai.
|
Sementara untuk status header 200
adalah status HTTP Request. Biasanya kode di atas 200
artinya baik dan di bawah 200
artinya buruk.
Lalu coba perhatikan kode ini:
xhr.open("GET", url, true);
Terdapat tiga parameter yang kita berikan kepada method open()
:
GET
adalah metode request yang akan digunakan;url
adalah alamat URL tujuan;true
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>
<h2>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clearbutton>h2>
<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>
<h2>Kirim Data dengan Ajaxh2>
<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 ajax-jquery.html
lalu isi dengan kode 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 AJAX dengan JQuerytitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>
head>
<body>
<h2>Load Datah2>
<pre id="result">pre>
<script>
$("#result").load("https://api.github.com/users/petanikode");
script>
body>
html>
Hasilnya:
Dengan fungsi $("#result").load()
, kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.
Fungsi JQuery load()
cocoknya untuk mengambil bagian dari HTML untuk
ditampilkan.
Contoh lainnya menggunakan metode GET:
<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 AJAX dengan JQuerytitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>
head>
<body>
<h2>Load Datah2>
<img id="avatar" src="" width="100" height="100">
<br>
<h3 id="name">h3>
<p id="location">p>
<script>
var url = "https://api.github.com/users/petanikode";
$.get(url, function(data, status){
$("#avatar").attr("src", data.avatar_url);
$("#name").text(data.name);
$("#location").text(data.location);
});
script>
body>
html>
Hasilnya:
Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan $.get()
.
<script>
var url = "https://jsonplaceholder.typicode.com/posts";
var data = {
title: "Tutorial AJAX dengan JQuery",
body: "Ini adalah tutorial tentang AJAX",
userId: 1
};
$.post(url, data, function(data, status){
// data terkkirim, lakukan sesuatu di sini
});
</script>
AJAX Menggunakan Fetch API
Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX.
Methode ini mulai hadir pada Javascript versi ES6.
Perbedaanya dengan XMLHttpRequest
dan JQuery adalah:
- Fetch akan mengembalikan sebuah promise;
- Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari
server.2
- Fetch dapat digunakan di web browser dan juga Nodejs dengan modul
node-fetch
.
Berikut ini sintak dasar penggunaan Fetch.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini:
fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
.then(response => response.json()); // parses JSON response into native Javascript objects
Mari kita coba…
Berikut ini contoh pengambilan data menggunakan fetch:
DOCTYPE html>
<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 Ajax dengan Fetch</title>
</head>
<body>
<h2>Tutorial Ajax dengan Fetch</h2>
<button onclick="loadContent()">Load Content</button>
<div id="hasil"></div>
<script>
function loadContent(){
var url = "https://jsonplaceholder.typicode.com/posts/";
fetch(url).then(response => response.json())
.then(function(data){
var template = data.map(post => {
return `
${post.title}
${post.body}
`;
});
document.getElementById("hasil").innerHTML = template.join('
');
}).catch(function(e){
alert("gagal mengambil data");
});
}
</script>
</body>
</html>
Hasilnya:
Ajax Menggunakan Axios
Axios hampir sama
seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.
Axios juga sama-sama bisa digunakan di web browser dan Nodejs.
Contoh AJAX dengan Axios:
axios.get('https://jsonplaceholder.typicode.com/posts/')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
Mari kita coba dalam HTML:
<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>Tutorial AJAX dengan AXIOStitle>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<h2>Tutorial AJAX dengan AXIOSh2>
<button id="btn-load" onclick="loadContent()">Load Contentbutton>
<div id="result">div>
<script>
function loadContent() {
document.getElementById("btn-load").innerHTML = "loading...";
document.getElementById("btn-load").setAttribute("disabled", "true");
axios.get('https://jsonplaceholder.typicode.com/posts/')
.then(function (response) {
var template = response.data.map(post => {
return `
${post.title}
${post.body}
`
}).join("");
document.getElementById("result").innerHTML = template;
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
document.getElementById("btn-load").innerHTML = "Done";
document.getElementById("btn-load").removeAttribute("disabled");
});
}
script>
body>
html>
Hasilnya:
Ahir Kata….
Jadi… Cara mana yang paling bagus?
Tidak ada yang paling bagus dan jelek, di sini semuanya sama-sama bagus.
Tinggal kita saja yang menentukan, lebih nyaman
pakai yang mana.
Kalau saya, lebih suka menggunakan fetch dari pada XMLHttpReques
, JQuery, dan Axios.
Bagaimana denganmu?
Apa itu fetch dalam javascript?
Fetch merupakan cara baru dalam melakukan network request. Pada dasarnya fungsi fetch memanfaatkan sebuah Promise, sehingga untuk menggunakan nya pastikan browser sudah mendukung ECMAScript 6 atau biasa disebut ES6. Good news! Karena kebanyakan browser sekarang sudah mendukung ES6 ini.
Fungsi async untuk apa?
Asynchronous network server programming adalah sebuah pendekatan dalam komunikasi server dimana server dapat saling berkomunikasi, mengirim, dan menerima data dengan bersamaan tanpa harus menghentikan komunikasi dengan client lain.
Apa fungsi AJAX?
AJAX (Asynchronous Javascript And XML) adalah sebuah teknik interaktif yang digunakan untuk membuat aplikasi web. Dengan AJAX, aplikasi web dapat mengambil data dari server secara asynchronous di belakang tanpa perlu refresh halaman atau postback. Data diambil menggunakan XMLHttpRequest atau untuk mengakses prosedur ...