[ask]cara bikin ajax loader

[denzizzy]

maw tanya Tuan.

ada yg tw gak caranya bikin ajak loader ??

saya dah ada tapi gak tw knapa gak bisa

nih scriptnya Tuan:

function bikinAjax(){
if(window.ActiveXObject){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return new ActiveXObject("Msxml2.XMLHTTP");
}
}
else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}

var xmlhttp = bikinAjax();
function kirimRequest(halaman, parameter, konten, komponen){
var obj = window.document.getElementById(konten);
obj.innerHTML = "<table border='0' width='100%' height='100%'><tr><td align='center' valign='middle' height='150'><img src='images/loadings.gif' width='24' height='24' style='border:0px groove #fff;' /></td></tr></table>";
if(xmlhttp.readyState==4 || xmlhttp.readyState==0){
xmlhttp.open('POST', halaman, true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
if(komponen=='div') obj.innerHTML=parseScript(xmlhttp.responseText);
else obj.value=parseScript(xmlhttp.responseText);
}
}
xmlhttp.send(parameter);
}
}

function parseScript(_source)
{
var source = _source;
var scripts = new Array();

while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
var s = source.indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.indexOf("</script", s);
var e_e = source.indexOf(">", e);

scripts.push(source.substring(s_e+1, e));
source = source.substring(0, s) + source.substring(e_e+1);
}

for(var i=0; i<scripts.length; i++) {
try {
eval(scripts);
}
catch(ex) {
// do what you want here when a script fails
}
}
// Return the cleaned source
return source;
}

trus di divnya

<a href="#"onClick="javascript: kirimRequest('home.php', '', 'content', 'div');">Home</a>

thx for reading. .

 

[vkios01]

hai om, itu pakai script JS yang masi murni ya :S diem ahhh kalau pakai script begituan..
saran saya pakai framework JQuery dengan semboyannya write less do more

ini saya kasi contohnya ya, request ajax

<input id="nama" type="text"><br />
<input id="email" type="text"><br />
<span id="proses">Proses</span>
<img id="loader" src="/img/loader.gif" style="visibility: hidden;"><br />
<span id="pesan"></span>

<script>
$("#proses").live('click', function() {
	var dataString = "nama="+$("#nama").val()+"&email="+$("#email").val();
	$.ajax({
		type: "POST",
		url: "pungsion/membereg.php",
		data: dataString,
		cache: false,
		beforeSend: function(){
				$("#loader").show();
		},
		success: function(html){
			if(html=="Pendaftaran Sukses"){
				$("#pesan").html(html);
				$("#loader").hide();
			}
			else{
				$("#pesan").css("color","red").html(html);
			}			
		}
	});
});
</script>

kalau bingung, silakan ditanyakan om

 

[vkios01]

kayanya ada yg ketinggalan lagi, nanti tdk jalan itu code diatas, kurang

$(function(){

});

jadinya

<input id="nama" type="text"><br />
<input id="email" type="text"><br />
<span id="proses">Proses</span>
<img id="loader" src="/img/loader.gif" style="visibility: hidden;"><br />
<span id="pesan"></span>

<script>
$(function(){
$("#proses").live('click', function() {
	var dataString = "nama="+$("#nama").val()+"&email="+$("#email").val();
	$.ajax({
		type: "POST",
		url: "pungsion/membereg.php",
		data: dataString,
		cache: false,
		beforeSend: function(){
				$("#loader").show();
		},
		success: function(html){
			if(html=="Pendaftaran Sukses"){
				$("#pesan").html(html);
				$("#loader").hide();
			}
			else{
				$("#pesan").css("color","red").html(html);
			}			
		}
	});
});

});
</script>