Hallo teman-teman Dumet School. Kali ini saya akan melanjutkan pembahasan sebelumnya mengenai Cara Membuat Halaman Dinamis Dengan AJAX Javascript Part2. Dimana di bagian part 1 kita sudah membuat struktur htmlnya dengan data php yang isinya adalah membuat link dinamis menggunakan method GET untuk membuat halaman dinamis menggunakan AJAX Javascript.
Dan untuk melanjutkan pembahasan Cara Membuat Halaman Dinamis Dengan AJAX Javascript di part 1 kita buat script AJAX Javascriptnya sebagai berikut ya teman-teman. Letakkan script ini di paling bawah sebelum tag penutup body.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> var menu=document.getElementsByTagName('a'); function load_ajax(){ const ajax = new XMLHttpRequest(); ajax.open('GET', 'src/data.php'+attr+'='+text, true); ajax.onreadystatechange = function(){ if(this.readyState ===4 && this.status ===200){ document.getElementById('result').innerHTML = this.responseText; } } ajax.send(); } for(var j=0; j<menu.length; j++){ menu[j].onclick = function(event){ event.preventDefault(); attr = this.getAttribute('href'); text = this.textContent; load_ajax(); } } </script> |
Nah jika sudah maka teman-teman sudah selesai dalam Membuat Halaman Dinamis Dengan AJAX Javascript. Disini teman-teman bisa perhatikan pertama saya memilih selector dengan method getElementsByTagName(‘a’) kemudian saya melakukan open ajax dengan menggunakan method GET untuk halaman dinamisnya. Kemudian parameter data.php saya dapat dari hasil looping menu yang didallamnya saya buatkan event onclick kemudian saya ambil attribute hrefnya serta textContent yang ada di menu dan kemudian saya jalankan function load_ajax().
|
1 2 3 4 |
<a href="?home">Home</a> <a href="?gallery">Gallery</a> <a href="?events">Events</a> <a href="?contact">Contact</a> |
Lalu saya sambung dengan membuat function dari property ajax yaitu onreadystatechange dimana didalamnya ada kondisi pengecekan status dan kemudian saya lakukan cetak dengan menggunakan innerHTML dan mengambil datanya dengan property responseText pada ajax.
Maka jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.
Dan jika halaman selain dari pada menu di atas, maka akan muncul seperti di bawah ini bahwa halaman tidak ditemukan.
Demikian artikel di bawah ini tentang Cara Membuat Halaman Dinamis Dengan AJAX Javascript Part2. Semoga dapat menambah ilmu baru untuk teman-teman dan teman-teman bisa explore lagi untuk materi AJAX Javascriptnya. Sampai bertemu di pembahasan berikutnya, buat teman-teman yang penasaran bisa langsung mencobanya. Dan selamat mencoba.