AJAX Beserta contoh programnya
Haloooo.... kali ini saya akan membahas tentang materi ajax beserta contoh programnya
Apa yang dimaksud AJAX?
AJAX merupakan singkatan dari Asynchronous JavaScript and XML. AJAX adalah metode pertukaran data dengan server dan memperbarui bagian-bagian halaman web tanpa memuat ulang seluruh halaman. AJAX merupakan teknologi browser web yang tidak tergantung pada perangkat lunak server web. Bahasa pemrograman AJAX adalah tidak ada karena AJAX sendiri merupakan sebuah teknik.
AJAX sendiri adalah istilah umum untuk berbagai teknik JavaScript yang digunakan untuk terhubung ke server web secara dinamis tanpa harus memuat banyak halaman. Dalam pengertian yang lebih sempit, AJAX mengacu pada penggunaan objek XmlHttpRequest untuk berinteraksi dengan server web secara dinamis melalui JavaScript.
Tujuannya adalah untuk memindahkan sebagian besar interaksi di komputer surfer web, bertukar data dengan server di bagian back screen.
AJAX berfungsi untuk:
1. Mengambil data dari server secara background;
2. Update tampilan web tanpa harus relaod browser;
3. Mengirim data ke server secara background.
Pada dasarnya AJAX hanya menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server.
Kita bisa bisa melihat proses AJAX melalui inspect elemen di web browser, lalu buka tab Network dan aktifkan filter XHR (XML HTTP Request).
AJAX juga mendukung format JSON, Plain Text, dan HTML.
Langkah-langkah menggunakan AJAX sebagai berikut:
1. Membuat Objek Ajax
var xhr = new XMLHttpRequest();2. Menentukan Fungsi Handler untuk Event
xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };3. Menentukan Method dan URL
xhr.open("GET", url, true);4. Mengirim Request
xhr.send();Kemudian buatlah file HTML dengan isi sebagai berikut:
<!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</title>
</head>
<body>
<h1>Tutorial Ajax</h1>
<div id="hasil"></div>
<button onclick="loadContent()">Load Content</button>
<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 :
Artikel ini untuk memenuhi tugas matkul Frontend. Sekian Penjelasannya, Terimakasih Pembaca >.<
Komentar
Posting Komentar