Hallo teman-teman Dumet School. Kali ini saya akan membahas tentang cara Mengubah Isi Konten Dengan AJAX Javascript.
Dimana ketika saya melakukan klik pada sebuah tombol maka data dengan format txt yang sudah saya siapkan akan tampil dan merubah isi konten yang sudah ada. Disini saya menggunakan ajax javascript dengan XMLHttpRequest().
Untuk dapat mengetahui cara Mengubah Isi Konten Dengan AJAX Javascript teman-teman langsung saja membuat struktur htmlnya seperti pada script di bawah ini. Teman-teman bisa salin ya lalu disimpan dengan format php.
html>
<title>Mengubah Isi Konten Dengan AJAX Javascript</title>
<style type="text/css">
#demo{width: 500px; margin: auto; background: salmon; padding: 10px; border:10px solid darkblue;}
</style>
<body>
<div id="demo">
<h2>Indonesia Juara Dunia Lari 100m di IAAF U-20 </h2>
<button type="button" onclick="loadDoc()">Read More</button>
</div>
</body>
</html>
Nah jika sudah maka disini kita akan membuat data yang akan di tampilkan dengan format txt. Berikut adalah datanya.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Dan jika sudah maka kita bisa langsung membuat script AJAX Javascriptnya dan berikut scriptnya di bawah ini. teman-teman
letakkan di paling bawah sebelum tag penutup body.
<script>
function loadDoc() {
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
http.open("GET", "data.txt", true);
http.send();
}
</script>
Temen-temen bisa perhatikan scriptnya. Dimana saya membuat Function loadDoc() dengan method XMLHttpRequest() lalu buat function untuk mengecek status AJAXnya dan kemudian melakukan cetak dengan innerHTML. Setelah itu melakukan open pada AJAX Javascript dengan method GET yang mengambil data dari data yang sudah kita buat sebelumnya dengan format txt. Jika teman jalankan di browser masing-masing, maka tampilannya seperti pada gambar di bawah ini.
Dan ketika teman-teman melakukan klik pada tombol maka akan tampil seperti gambar di bawah ini.
Demikian artikel tentang Mengubah Isi Konten Dengan AJAX Javascript semoga dapat bermanfaat dan selamat mencoba ya.