Cara Menampilkan Data Dengan Ajax Javascript

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

Cara Menampilkan Data Dengan Ajax Javascript

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

Cara Menampilkan Data Dengan Ajax Javascript

Kemudian jika kita klik pada button maka text yang ada di data.php berhasil di tampilkan

Cara Menampilkan Data Dengan Ajax Javascript

Nah itulah Cara Menampilkan Data Dengan Ajax Javascript tentu kita akan lanjutkan pada artikel selanjutnya dengan ajax javascript. Terimakasih dan sampai jumpa.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published.