AJAX (Asynchronous JavaScript and XML), 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. [Wikipedia, 2011]
Problem AJAX
Karena pada dasarnya tidak melakukan perubahan alamat (URL) ketika menggunakan AJAX, maka AJAX mempunyai kelemahan yaitu meload kembali konten yang sebelumnya terjadi pemanggilan AJAX. Hal ini bisa aja di akali dengan tidak melakukan AJAX pada bagian konten utama, melainkan hanya pada bagian-bagian kecil saja (misalnya, banner). Tetapi untuk kasus yang menerapkan AJAX pada bagian konten utama (contoh: Facebook, Twitter, dll) yang membutuhkan kedinamisan halaman yang sangat tinggi, maka problem ini bisa menjadi fatal karena tampilan kembali ke awal ketika halaman di reload ulang.
Solusi
Sebenarnya permasalahannya terletak pada saat browser melakukan pemanggilan melalui XMLHttpRequest, dimana tidak akan mengubah alamat browser pada halaman yang dipanggil. Hal inilah yang membuat halaman akan meload ulang konten sebelum AJAX dipanggil ketika dilakukan REFRESH. Facebook telah lama memecahkan permasalahan ini dengan melakukan pencegahan klik link anchor (<a>), dan menaruhnya dalam hash setelah alamat halaman web. Dan di tutorial ini akan dijelaskan penggunaan sistem AJAX-Reload yang digunakan oleh Facebook dengan memanfaatkan framework jQuery.
Source Code
Kita akan membuat beberapa halaman web + Ajax dan menerapkan sistem yang pakai Facebook untuk melakukan Ajax-Reload ini.
File : index.html
- Code: Select all
<html>
<head>
<title>Penerapan AJAX-Reload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script language="javascript" src="jquery.history.js"></script>
<script>
$(document).ready(function() {
$.history.init(pageLoad);
bindAnchor('a');
});
function bindAnchor(selector)
{
$(selector).bind('click', function(e) {
e.preventDefault();
var hash = this.href.replace(window.location.protocol + '//' + window.location.hostname, '');
$.history.load('!' + hash);
getPage();
return false;
});
}
function pageLoad(hash) {
if (hash) getPage();
}
function getPage()
{
if (window.location.hash != '') {
var hash = window.location.hash;
// Get Content
$.ajax({
url: window.location.protocol + '//' + window.location.hostname + hash.substring(hash.search('!') + 1),
success: function(data) {
$('#content').hide();
$('#content').html(data);
bindAnchor($('#content').find('a'));
$('#content').fadeIn('slow');
}
});
}
}
</script>
</head>
<body>
<h2>Penerapan AJAX-Reload</h2>
<p>Content dengan ajax</p>
<ul>
<li><a href="content-1.html">Content 1</a></li>
<li><a href="content-2.html">Content 2</a></li>
<li><a href="content-3.html">Content 3</a></li>
</ul>
<div id="content" style="border: 1px solid #000; padding: 5px">
</div>
</body>
</html>
File : jquery.history.js
- Code: Select all
(function($){function History(){this._curHash='';this._callback=function(hash){}};$.extend(History.prototype,{init:function(callback){this._callback=callback;this._curHash=location.hash;if($.browser.msie){if(this._curHash==''){this._curHash='#'}$("body").prepend('<iframe id="jQuery_history" style="display: none;"></iframe>');var iframe=$("#jQuery_history")[0].contentWindow.document;iframe.open();iframe.close();iframe.location.hash=this._curHash}else if($.browser.safari){this._historyBackStack=[];this._historyBackStack.length=history.length;this._historyForwardStack=[];this._isFirst=true;this._dontCheck=false}this._callback(this._curHash.replace(/^#/,''));setInterval(this._check,100)},add:function(hash){this._historyBackStack.push(hash);this._historyForwardStack.length=0;this._isFirst=true},_check:function(){if($.browser.msie){var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentDocument||ihistory.contentWindow.document;var current_hash=iframe.location.hash;if(current_hash!=$.history._curHash){location.hash=current_hash;$.history._curHash=current_hash;$.history._callback(current_hash.replace(/^#/,''))}}else if($.browser.safari){if(!$.history._dontCheck){var historyDelta=history.length-$.history._historyBackStack.length;if(historyDelta){$.history._isFirst=false;if(historyDelta<0){for(var i=0;i<Math.abs(historyDelta);i++)$.history._historyForwardStack.unshift($.history._historyBackStack.pop())}else{for(var i=0;i<historyDelta;i++)$.history._historyBackStack.push($.history._historyForwardStack.shift())}var cachedHash=$.history._historyBackStack[$.history._historyBackStack.length-1];if(cachedHash!=undefined){$.history._curHash=location.hash;$.history._callback(cachedHash)}}else if($.history._historyBackStack[$.history._historyBackStack.length-1]==undefined&&!$.history._isFirst){if(document.URL.indexOf('#')>=0){$.history._callback(document.URL.split('#')[1])}else{$.history._callback('')}$.history._isFirst=true}}}else{var current_hash=location.hash;if(current_hash!=$.history._curHash){$.history._curHash=current_hash;$.history._callback(current_hash.replace(/^#/,''))}}},load:function(hash){var newhash;if($.browser.safari){newhash=hash}else{newhash='#'+hash;location.hash=newhash}this._curHash=newhash;if($.browser.msie){var ihistory=$("#jQuery_history")[0];var iframe=ihistory.contentWindow.document;iframe.open();iframe.close();iframe.location.hash=newhash;this._callback(hash)}else if($.browser.safari){this._dontCheck=true;this.add(hash);var fn=function(){$.history._dontCheck=false};window.setTimeout(fn,200);this._callback(hash);location.hash=newhash}else{this._callback(hash)}}});$(document).ready(function(){$.history=new History()})})(jQuery);
File : content1.html
- Code: Select all
<ul>
<li><strong>CONTENT 1</strong></li>
<li><a href="content-1.html">Content 1</a></li>
<li><a href="content-2.html">Content 2</a></li>
<li><a href="content-3.html">Content 3</a></li>
</ul>
File : content2.html
- Code: Select all
<ul>
<li><strong>CONTENT 2</strong></li>
<li><a href="content-1.html">Content 1</a></li>
<li><a href="content-2.html">Content 2</a></li>
<li><a href="content-3.html">Content 3</a></li>
</ul>
File : content3. html
- Code: Select all
<ul>
<li><strong>CONTENT 3</strong></li>
<li><a href="content-1.html">Content 1</a></li>
<li><a href="content-2.html">Content 2</a></li>
<li><a href="content-3.html">Content 3</a></li>
</ul>
Selamat mencoba...
News
Site map
SitemapIndex
RSS Feed