Asynchronous JavaScript and XMLHTTP, atau sering kita sebut AJAX, merupakan suatu teknik penulisan pemrogramman berbasis web yang berfungsi untuk membuat website lebih interaktif sama halnya dengan jquery karena AJAX merupakan teknik penulisan jquery juga, dengan menggunakan Ajax ini kita dapat melakukan pertukaran data tanpa harus mereload keseluruhan halaman websitenya,
dan teknik seperti ini tentunya lebih efisien ketimbang kita harus mereload halaman seperti halnya kita menggunakan php, data yang kita pinta harus terlebih dahulu terkirim ke server seperti halnya kita merefhresh halaman, dan dengan Menggunakan AJAX ini tentunya akan meningkatkan interaktivitas, kecepatan, dan usability, Pada kesempatan kali ini kita akan coba lebih memahami fungsi jquery ajax load() dan cara penggunaannya.
Pada Kasus kali ini kita akan meleroad sebuah file dengan menggunakan fungsi load jquery ajax, untuk lebih jelasnya mungkin kita langsung saja praktekan, pertama teman-teman harus buat file html terlebih dahulu dan silahkan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> </head> <body> <div id="text"><h2>Klik Tombol Untuk Merubah text</h2></div> <button>Get External Content</button> </body> </html> |
Script diatas saya membuat sebuah div dengan id text, lalu saya membuat sebuah tombol yang nanti kita akan berikan fungsinya, jika sudah sekarang teman-teman buat lagi satu buah file dengan extensi .txt dan didalam file txt itu teman-teman ketikan script berikut ini:
|
1 |
<h1>Hallo teman-teman semuanya</h1> |
lalu teman-teman simpan dengan nama cetak.txt
Sekarang kita telah memiliki 2 file yaitu satu file html dan satu lagi file cetak.txt, lalu teman-teman buka kembali file htmlnya dan tambahkan script berikut ini:
|
1 2 3 4 5 6 7 8 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#text").load("cetak.txt"); }); }); </script> |
Letakan pada bagian antara element head, script diatas menjelaskan bahwa pertama saya mereload core dari jquery, lalu membuat fungsi bilamana tombol diklik maka pada bagian id text akan memjalankan fungsi load yaitu mereload cetak.txt yang artinya text akan berubah tanpa harus mereload browsernya,
jika sudah teman-teman bisa save dan jalankan file htmlnya, maka hasilnya akan seperti berikut ini:
Dan sekarang coba teman-teman klik tombol get external contentnya, maka hasilnya akan seperti berikut ini:
Textnya akan berubah sesuai dengan isi pada file cetak.txt, jika teman-teman jelih lihat bagian reloadnya, browser tidah mereload seperti halnya ketika kita menggunakan php.
Oke teman-teman untuk tutorial kali ini tentang memahami fungsi jquery ajax load() dan cara penggunaannya cukup sampai sini dulu, semoga bermanfaat.
Terima Kasih.