AJAX BESERTA PROGRAM NYA
Website tidak hanya soal konten saja. Jika ingin menjadi webmaster, ada sejumlah hal yang harus Anda pahami, seperti apa itu AJAX. AJAX adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi web untuk bekerja secara asynchronous (tidak langsung) – memproses setiap request (permintaan) yang datang ke server di sisi background. Agar lebih memahami apa itu AJAX, kami akan membahas terminologinya satu per satu.
JavaScript merupakan bahasa coding yang kerap digunakan. Salah satu fungsinya adalah untuk mengelola konten dinamis website dan memungkinkan interaksi user yang dinamis. Layaknya HTML, XML atau eXtensible Markup Language adalah varian lain dari bahasa markup. Jika HTML dirancang untuk menampilkan data, maka XML dirancang untuk memuat dan membawa data.
Baik JavaScript maupun XML bekerja secara asynchronous di dalam AJAX. Alhasil, aplikasi web yang menggunakan AJAX dapat mengirimkan dan menerima data dari server tanpa harus mereload keseluruhan halaman.
Cara Kerja AJAX
AJAX bukanlah teknologi dan bukan pula bahasa pemrograman. Seperti yang telah dijelaskan sebelumnya, AJAX adalah sekumpulan teknik pengembangan web. Pada umumnya sistem ini terdiri atas:
- HTML/XHTML sebagai bahasa utama dan CSS untuk menampilkan data.
- The Document Object Model (DOM) untuk menampilkan data yang dinamis beserta interaksinya.
- XML untuk pertukaran data, sedangkan XSLT untuk manipulasi data. Sebagian besar developer mulai mengganti XML dengan JSON karena bentuknya yang mendekati JavaScript.
- Objek XMLHttpRequest untuk komunikasi tidak langsung (asynschronous).
- Bahasa pemrograman JavaScript untuk menyatukan semua teknologi ini.
Siapkan alat
Sebelum itu siapkan alat-alatnya yaitu
- Visual Studio Code(VSC) yang di gunakan untuk membuat codingnya,kalau belum punya aplikasinya silakan mendownload terlebih dahulu. Atau donwload melalui link ini
- Pastikan sudah terinstall json-server sebagai fake server,atau lihat di sini untuk melihat tutorial install json
- Masuk ke VSC dan buat file baru dengan format file .html untuk coding ajax dan .json untuk fake servernya.
- Tulis Coding ajax,kal ini saya membuat ajaxnya yaitu mencari file dari link yang sudah ada kemudian outpunya(hasilnya) akan di tampilkan dalam bentuk tabel
Contoh Program
<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();
function sndReq() {
http.open('get', 'http://localhost:3000/mahasiswa');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var jsonData = JSON.parse(response);
var t = '<table border="1">';
t += '<tr><td>TITLE</td><td>BODY</td></tr>';
for(var i = 0; i < jsonData.length; i++){
t += '<tr><td>'+jsonData[i]["nim"]+'</td><td>'+jsonData[i]["nama"]+'</td></tr>';
}
t += '</table>';
document.getElementById('foo').innerHTML = t;
}
}
</script>
</head>
<body>
<a href ="javascript:sndReq()">Request</a>
<div id="foo"></div>
</body>
</html>3. buat code di file.jsonya untuk isinya sebagai berikut
{
"mahasiswa" : [
{ "nim": "123", "nama": "Budi" },
{ "nim": "444", "nama": "Nana" },
{ "nim": "232", "nama": "Bidu" }
]
}4. Untuk menjalankan jsonnya,buka Cmd lalu ketik “json-server –watch namafile.json” jika tidak bisa run pastikan masuk ke direktor yang ada file json milikmu. Jika sudah maka akan tampil seperti ini dan servernya sudah aktif,jika ingin mengecek maka copy yang berada di Resources
5. Jika servernya berjalan kembali lagi ke File.html lalu jalankan file tersebut. jika sudah maka akan tampil sebagai berikut
Komentar
Posting Komentar