Assalamu’alaikum warahmatullahi wabarakatuh.
Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali kita akan melanjutkan artikel sebelumnya Mengenal Ajax Javascript dan Ajax jQuery. Di artikel kali ini kita akan belajar tentang Cara Menampilkan Data Dengan Ajax Javascript, seperti yang kita bahas di artikel sebelumnya untuk memulai ajax javascript langkah awal kita request terlebih dahulu. Teman – teman buat struktur html nya terlebih dahulu seperti script di bawah ini
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Menampilkan Data Dengan Ajax Javascript</title> </head> <body> <button id="viewData">Ambil Data</button> <p id="result"></p> </body> </html>
Save dengan nama index.php, jadi idenya adalah kita siapkan button yang saya beri id=”viewData” dan kita berikan aksi klik kemudian akan ambil data dengan ajax javascript dan kita tampilkan di tag p yang saya beri id=”result”. Kemudian kita buat fungsi untuk ajax nya, ketikkan seperti script di bawah ini
function tampil_data_ajax(){
const ajax = new XMLHttpRequest();
ajax.open('GET', 'http://localhost/reno/ajax/data.php', true);
}
Pada script di atas ini kita menggunakan fungsi GET untuk mengambil data, dalam hal ini saya sudah menyiapkan text di dalam file data.php
Teman – teman silahkan buat dan panggil file nya sesuai lokasinya atau letakkan sejajar dengan file index.php nya untuk mempermudah dalam pemanggilannya. Kemudian kita tambahkan fungsi nya
ajax.onreadystatechange = function(){
if(this.readyState ===4 && this.status ===200){
}
}
Kita tambahkan fungsi onreadystatechange dari ajaxnya dan membuat fungsi untuk mengawasi bagaimana status requestnya. Kemudian kita ambil data nya dengan fungsi reponseText
ajax.onreadystatechange = function(){
if(this.readyState ===4 && this.status ===200){
let data = this.responseText;
}
}
Selanjuitnya kita panggil id yang sudah kita siapkan pada tag html nya
let button = document.getElementById("viewData");
let output = document.getElementById("result");
Dan kita berikan fungsi klik untuk buttonnya
button.onclick =function(){
output.innerHTML = data;
output.style.color = "#fff";
output.style.backgroundColor = "orange";
output.style.padding = "10px";
}
Jika sudah save dan jalankan pada browsernya
Kemudian jika kita klik pada button maka text yang ada di data.php berhasil di tampilkan
Nah itulah Cara Menampilkan Data Dengan Ajax Javascript tentu kita akan lanjutkan pada artikel selanjutnya dengan ajax javascript. Terimakasih dan sampai jumpa.
