PENGENALAN AJAX
Hai para pembaca pada artikel kali ini kita akan membahas tentang AJAX, apa sih ajax itu?
AJAX atau Asynchronous JavaScript and XML adalah teknik yang digunakan untuk membuat website yang dinamis. Artinya website mampu mengupdate dan menampilkan data baru dari server tanpa perlu melakukan reload. Salah satu contoh penggunaannya misalnya pada update jumlah angka likes dan komentar pada media sosial Instagram, Facebook, Twitter, dan lainnya. Sesuai namanya, AJAX terdiri dari JavaScript dan XML yang bekerja bersama. JavaScript adalah bahasa pemrograman untuk mengelola konten website yang dinamis. Sementara XML (eXtensible Markup Language) digunakan untuk memuat dan membawa data dari server ke browser. AJAX JavaScript dan XML ini bekerja secara asynchronous untuk berkomunikasi dengan server. Proses pertukaran informasi ini dilakukan di background. Artinya, saat AJAX JavaScript dan XML bekerja, halaman dapat tetap diakses oleh pengunjung website.
Berikut merupakan merupakan script membuat server tiruan menggunakan json server
<html>
<head>
<script lang="javascript">
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
// kirim permintaan
function sndReq() {
http.open('get', 'https://jsonplaceholder.typicode.com/posts');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){ // permintaan selesai dan respons siap
var response = http.responseText; // Mengembalikan data respons sebagai string
document.getElementById('foo').innerHTML = response;
}
}
</script>
</head>
<body>
<a href ="javascript:sndReq()">Request</a>
<div id="foo"></div>
</body>
</html>
1. Function CreateRequestsObject
Semua browser modern mendukung objek XMLHttpRequest. Objek XMLHttpRequest dapat digunakan untuk bertukar data dengan server web di belakang layar. Ini berarti dimungkinkan untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman. Semua browser modern (Chrome, Firefox, IE, Edge, Safari, Opera) memiliki objek XMLHttpRequest bawaan. Sintaks untuk membuat objek XMLHttpRequest: variable = new XMLHttpRequest();
2. Function SndReq(Mengirim permintaan)
Saat pengguna mengklik link "Requests" di atas, fungsi sndReq() dijalankan. Fungsi sndReq() membuat objek http.onreadystatechange = handleResponse; yaitu Mendefinisikan fungsi yang akan dipanggil ketika properti readyState berubah. Untuk mengirim permintan ke server yaitu http.open('get', 'https://jsonplaceholder.typicode.com/posts');
3. Function HandleRequests
Kemudian menambahkan fungsi handleResponse yang akan dieksekusi saat respons server siap, dan mengirimkan permintaan ke server. Ketika respons server siap, , node (elemen) diekstraksi dari http, dan akhirnya memperbarui elemen "foo" dengan data yang tersedia. dan ini hasilnya .
mari kita coba untuk menjalankan Back server tiruan dengan CMD
Komentar
Posting Komentar