Minggu, 03 Juni 2012

Contoh aplikasi Ajax

Pada artikel ini saya akan coba memberikan contoh ajax yang paling sederhana karena aplikasi-aplikasi website yang besar dimulai dari sesuatau yang sederhana. Untuk memulainnya silahkan anda buat sebuah File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama index.html

<html>
<head>
<title>Contoh AJAX title>
<script language=”javascript”>
function GetXmlHttpObject(){
var xmlHttp=null;
try {
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Untuk Browser Internet Explorer
try {
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e){
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
function getpages(url,centercol) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp) {
var obj = document.getElementById(centercol);
xmlHttp.open(“GET”, url);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 1) {
obj.innerHTML = ‘<img alt=\”Halaman Sedang Dimuat \” src=\”images/wait.gif\” alt=\”loading\” / >’;
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
}
</script>
</head>
<body>
<h1>Request File Dari HTML </h1>
<form>
<input value=”Request File  ” onclick=”getpages(‘request.html’,'centercol’)” type=”button”>
</form>
<div id=”centercol”>
File request.html akan ditampilkan disini
</div>
</body>
</html>

dan berikut hasilnya:

Tidak ada komentar:

Posting Komentar