Me-Load Halaman Tanpa Refresh Dengan JQuery

Melanjutkan dari posting memasang jquery kali ini kita buat tutorial me-load halaman tanpa refresh sehingga browser hanya load pada daerah tertentu saja pada bagian web yang di refresh tanpa harus me-load ulang semua tampilan web sehingga bisa meminimalisir penggunaan bandwidth.
Cara ini sama jika dengan jika anda menggunakan Javascript / AJAXkarena JQuery sendiri adalah perkembangan dari Javascript dan AJAX.

JQuery sendiri adalah kumpulan AJAX yang digabungkan menjadi sebuah kerangka yang siap digunakan oleh pengembang web newbie tanpa harus mengetahui Javascript secara mendalam.

Yang dibutuhkan dalam coding kali ini cuma memasang jquery kemudian sedikit pengetahuan dari javascript.
Langsung saja contohkan dalam html.
Dalam hal ini kita akan meload sebuah text dalam file text.html dan ditampilkan di file index.html tanpa harus meload seluruh halaman webnya.
Kode file index.html




<html>
<head>
<title>Load tanpa refresh</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" >
</script>

<script type="text/javascript">
 $(document).ready(
  function(){
$("#klikdata").click(function(){
$("#tampung").load("text.html");
});
}
);
</script>
</head>
<body>
<center>
<h1>Dibawah sini adalah tempat load data dari file text.html</h1>
<a href="#" id="klikdata">Tampil Data</a><br />
<div id="tampung"></div>
</center>
</body>
</html>

Kode file text.html



<html>
<head>
</head>
<body>
Ini adalah data yang terdapat di file text.html, jika anda tidak mengklik tampilkan, maka tulisan ini tidak akan tampil disitu coy
</body>
</html>

Sedikit penjelasan dari kode diatas, di file index.html haruslah disertakan atau di masukan Jquery.js anda bisa mendownload atau bisa menggakan source online sebagai contoh yaitu di googleapi seperti kode diatas.
Selanjutkan pada index.html dibuat script untuk menjalankan jquery disitu dideklarasikan $(document).ready(); untuk menjalankan jquery jika halaman sudah dalam keadaan ready atau sudah di load sepenuhnya.
Kemudian dideklarasikan #klikdata maksudnya adalah elemen yang memiliki id klik data, dalam contoh yaitu tag a, maka ketika di klik akan melakukan perintah berikutnya yaitu meload di elemen #tampung atau elemen yang memiliki id tampung sebuah data dari file text.html.
Selain dari file html, jquery juga bisa me-load dari file lain seperti php, txt,dll dan yang di load berupa text biasa.
Sekian dari saya Semoga anda Mengerti
Semoga Membantu ^^


Powered by Danz
di
Kategori , ,

2 komentar:

Silakan Comment Tapi yang membangun ya (Jangan Spam) (^.^)

Langganan: Posting Komentar (Atom)

Trend Minggu Ini