Ajax sederhana bagi pemula.
Sederhana saja kita menggunakan 2 atau lebih file.html yang kita gunakan, tujuan utamanya adalah meruban suatu susunan didalam page tanpa harus mereload susunan lainnya dengan cara memasukkan file pertama dan file kedua,,
ini contoh sederhananya:
file pertama simpan dengan nama ajax.html <// dapat diubah>
<html>
<head>
<title>jQuery Ajax</title>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(function() {
$('#loading').ajaxStart(function(){
$(this).fadeIn();
}).ajaxStop(function(){
$(this).fadeOut();
});
$('#menu li a').click(function() {
var url = $(this).attr('href');
$('#container').load(url);
return false;
});
});
</script>
<style type="text/css">
{ font-family: Verdana, sans-serif; }
div { font-size: 12px; }
#container { line-height: 20px; width: 500px; height: 500px; margin: 20px 0; padding: 10px; border: 1px solid #999; }
ul { padding: 0 }
li { display: inline; margin: 0 3px; }
#loading { position: absolute; top: 0; left: 0; color: white; background-color: red; padding: 5px 10px; font: 12px Arial; }
</style>
</head>
<body>
<div id="loading" style="display:none">Loading...</div>
<h4>jQuery Ajax</h4>
<div>
<div id="menu">
<ul>
<li><a href="halaman1.html">Menu 1</a></li>
<li><a href="halaman2.html">Menu 2</a></li>
</ul>
</div>
<div id="container">
Isi dari file url anda akan ditampilkan di sini
</div>
</div>
</body>
</html>
untuk file kedua simpan dengan nama halaman1.html
<html>
<body>
halaman ke2
<br>
gampang khan??
<br>
lihat contoh ajax2.html
<a href="ajax2.html>link</a>
</p>
</body>
</html>
dan file yang ketiga simpan dengan nama halaman2.html
<html>
<body>
halaman ke3
<br>
Dan ini merupakan halaman ke 2
</p>
</body>
</html>
dan langkah terakhir simpan ketiga file ini pada satu folder.,,.
siap deh.,,. gampang khan,, bagi yang belum ngerti anda dapat mendownloadnya disini..:
ajax1
ajax2
~::selamat mencoba::~
