jQuery merupakan sebuahlibrary javascript yg saat pertama kali muncul langsung berimbas padaberalihnya para developper untuk segera memanfaatkan nya sebagailibrary yang powerfull untuk menyaingi ajax. Awal muncul nya sempatmembuat ajax hanya mendapat hitungan jari kelingking dari paradevelopper. Karena seperti motto jQuery sendiri adalah “Write Less, Do More”. Wah pantes aja posisi ajax langsung ketendang.
Berikutadalah tutorial sederhana cara mengimplementasikan jQuery sebagailibrary yang powerfull, dapat menciptakan interaktif user pada halamanwebsite lu 
)
Sebelumnya download dlu library nya:)Download Page
jQuery 1.2.6 {The Latest Release}
jQuery Ajax Display for Loading Content
Siapkan HTML kosong bwat halaman utama, pada header panggil dlu library jQuery na:
- Code:
- <script language=”javascript” src=”jquery-1.2.6.min.js”></script>
- Code:
- <script language=”javascript”>//show animation$(function(){$(“#ajax_display”
.ajaxStart(function(){$(this).html(<div style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/> <br><strong>Loading….</strong><br><br>Pleasebe patien, do not close the window. <br>Gathering data beingprogress …</div>;});$(“#ajax_display”.ajaxSuccess(function(){$(this).html();});$(“#ajax_display”.ajaxError(function(url){alert(jqSajax is error );});});</script>
- Code:
- <script type=”text/javascript”>function getRandom() {$(“#random”.hide(“slow”;$(“#random”.load(“sleep.php”, , callback);}function callback() {$(“#random”.show(“slow”;setTimeout(“getRandom();”, 10000);}$(document).ready(getRandom);</script><div id=”random”></div>
sleep.php berisi script yg akan di load, lu bisa isi apa aja seperti contoh code dibawah ini untuk simulasi gw kasiin sleep(10)
- Code:
- <?sleep(10);echo “<span style=font-weight:bold;font-color:green;> All Data loaded successfully !!</span>”;?>
- Code:
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /><title>jQuery Ajax Display</title><script language=”javascript” src=”jquery-1.2.6.min.js”></script><script language=”javascript”>//show animation$(function(){$(“#ajax_display”.ajaxStart(function(){$(this).html(<div style=”position:absolute;”><imgsrc=”ajax-loader-refresh.gif”/> <br><strong>Loading….</strong><br><br>Pleasebe patien, do not close the window. <br>Gathering data beingprogress …</div>;});$(“#ajax_display”.ajaxSuccess(function(){$(this).html();});$(“#ajax_display”.ajaxError(function(url){alert(jqSajax is error );});});</script> <style type=”text/css”><!–body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 11px;color: #000000;}body {background-color: #FFFFFF;margin-left: 10px;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;}a:link {color: #0066FF;}a:visited {color: #0066FF;}a:hover {color: #009900;}a:active {color: #0066FF;}–></style></head><body><div id=”ajax_display”></div><div style=”position:absolute; top:100px;”><script type=”text/javascript”>function getRandom() {$(“#random”.hide(“slow”;$(“#random”.load(“sleep.php”, , callback);}function callback() {$(“#random”.show(“slow”;setTimeout(“getRandom();”, 10000);}$(document).ready(getRandom);</script><div id=”random”></div>This is an Implementation for jQuery Ajax Display, while loading a progress from an external source.<br />developped by <a href=”http://dremi.info” target=”_blank”>dr.emi</a></div></body></html>
