Kemarin saya membahas tentang server side nya,nah untuk membuat web kita lebih interaktif saya coba sekarang buat artikel tentang client site nya.
Langsung aja ke script nya hehe :)
di masalah ini kita membutuhkan 2 file untuk melakukan uji coba script ini
buat file index.html
yang isinya sebagai berikut
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arsen Lexdorf" />
<title>Link With Ajax</title>
<script type="text/javascript">
var xml;
//fungsi tersebut untuk pengecekkan browser apa yang kita gunakan
function index(){
//yang ini jika browser yang kita gunakan selain IE
if(window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else{
//yang ini jika browser yang kita gunakan IE
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
return xml;
}
var xmlhttp=index();
//fungi pindah ini digunakan untuk link ke halaman lain tanpa merubah url header di atas
function pindah(){
//yang ini untuk mengambil file pindah.html
xmlhttp.open('GET','pindah.html',true);
xmlhttp.onreadystatechange = function(){
//script ini untuk membuat text loading saat menunggu respon
document.getElementById("tengah").innerHTML="Loading";
if(xmlhttp.readyState==4){
//jika respon benar akan di ambilah file yang pindah.html tadi
document.getElementById("tengah").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body>
<div>
<a href="index.html">Home</a>
<a href="#" onclick="pindah()">Link Ajax</a>
</div>
<div id="tengah">Deydra</div>
</body>
</html>
nah selanjutnya buat file pindah.htmlnya isinya sebagai berikut
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Arsen Lexdorf" />
<title>Untitled 2</title>
</head>
<body>
Deden
</body>
</html>
nah coba sja anda klik yang link with ajax,content akan berubah dan url headernya tetap
selamat mencoba
No comments:
Post a Comment