Menu tanpa Re-Load dengan JQuery AJAX

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai bagaimana cara membuat menu navigation bar jika di klik tidak meRe-Load atau loading ulang, jadi ketika tombol navbar lain di klik, yang berubah akan kontennya saja

A. PENDAHULUAN

Pengertian

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.

Latar Belakang

Ingin membuat website dengan menu yang tanpa reload bisa berubah kontennya dengan AJAX

Maksud dan Tujuan

Dapat menggunakan AJAX dan menerapkan nya pada navigation bar sebuah aplikasi.

B. ALAT DAN BAHAN

Text Editor.
JQuery LIbrary.
Web Browser.
1 Unit PC / Laptop.

C. JANGKA WAKTU PELAKSANAAN

Sekitar 10menit-an

D. RANGKAIAN KEGIATAN

Definisi AJAX

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. dengan AJAX kita dapat membuat website interaktif dengan cara tidak Re-Load pada pemrosesannya

Penerapan AJAX dalam Navigation Bar

pertama tama kita buat file index, dimana di file index kita berikan script untuk memanggil file-file pendukung, yaitu sebagai berikut.

kemudian kita buat struktur untuk halaman kontennya

kemudian kita panggil fungsi fungsi JQuerynya seperti script berikut....

dan jika dibuka di browser, maka hasilnya akan menjadi seperti ini...

perhatikan link diatas, kemudian kita klik menunya, maka akan menjadi seperti ini..

perhatikan link diatas, kemudian kita klik menunya, maka akan menjadi seperti ini..

link nya diatas tidak berubah, dan hanya kontennya saja yang berubah?, kok bisa? karena kita menggunakan metode AJAX, dimana saat tombol tertentu yang telah kita beri ketentuan di klik, akan terganti kontennya saja, dan halaman induknya tidak berubah.

E. HASIL YANG DIDAPATKAN