Belirli sürelerde ajax çağrıları yapmak

Belirli sürelerde ajax çağrıları yapmak

Öncelikle javascript ile bir döngüyü belirli bir süre içerisinde saydırmayı öğrenelim.  Aşağıdaki kodlarda  her saniyede sayac değişkeni 1 artırılıp alert ile gösteriliyor, sayac değişkeni 4 olduğunda clearInterval(intervall); fonksiyonu çalıştırılarak saydırma işlemini bitiriyoruz. Her döngü 1000 milisaniye yani 1 saniyede tekrarlanıyor bunu kodlarda görebilirsiniz. İstediğiniz süreyi yazabilirsiniz.

<script type="text/javascript">

var sayac=1;
var intervall= window.setInterval(
function(){

alert(sayac);

if(sayac==4)
{
clearInterval(intervall);
}
else
{
sayac++;
}
}
,1000);

</script>

Ajax ile bir sayfayı sorgulamak için aşağıdaki kodları kullanmalıyız. Dikkat etmeniz gereken nokta jquery kütüphanesini header kısmına eklememiz.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">
<head>
<title>Ajax ve zamanlama</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="alan">
</div>

<script type="text/javascript">
var url="veri.html";
function AjaxIstek(){
$.ajax({
type: "GET",
cache: false,
url: "veri.html",
success: function (data)
{
//alert(data);
$("#alan").append("<div id='yeni' class='examplebox code'>"+data+"</div>");
},
error: function (xhr, textStatus, errorThrown)
{
alert("Hata var!");
}
});
}
</script>

<script type="text/javascript">
AjaxIstek();
AjaxIstek();
AjaxIstek();
</script>

</body>
</html>

veri.html sayfasını 3 kere sayfamıza çağırdık ve alan id li div’in içine,  id si “yeni” olan yeni div’imizi ekleyerek gösterdik. veri.html içinde ne varsa bu div’in içinde toplam 3 kere görükecektir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr">
<head>
<title>Ajax ve zamanlama</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>

<body>

<div id="alan">

</div>

<script type="text/javascript">
var url="veri.html";
function AjaxIstek(){
$.ajax({
type: "GET",
cache: false,
url: "veri.html",
success: function (data)
{
//alert(data);
$("#alan").append("<div id='yeni' class='examplebox code'>"+data+"</div>");
},
error: function (xhr, textStatus, errorThrown)
{
alert("Hata var!");
}
});
}
</script>

<script type="text/javascript">

var sayac=1;
var intervall= window.setInterval(
function(){

//alert(sayac);

if(sayac==4)
{
clearInterval(intervall);
}
else
{
AjaxIstek();
sayac++;
}
}
,1000);

</script>

</div>
</body>
</html>

Bu kodları bir web sunucusuna atıp çalıştırabilirsiniz, ancak çevrimdışı çalıştıracaksanız web tarayıcınızın açılış ayarlarını değiştirmeniz gerekir.
Internet explorer en dandik web tarayıcısı olduğu için güvenlik önlemi almamaktadır yani kodlarımız çalışacaktır.
Chrome veya mozilla kullanıyorsanız başlat menüsünden sağ tıklayıp o tarayıcının özelliklerinden hedef kısmına parametre eklemeniz gerekir.
Örneğin chrome’da “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –allow-file-access-from-files yazmanız gerekir.
Bunu yaptıktan sonra başlattan chome’u çalıştırın, çalıştırdığınız zaman html dosyanızı sürükleyin bırakın.
Html’yi direkt çift tıklayarak açarsanız olmaz.

Bu örnekleri test etmek isteyeceğinizi düşündüğümden bu kodları siteme yükledim:

http://www.gokhanbeken.com/ornekler/yokla.htm

http://www.gokhanbeken.com/ornekler/veri.html

yokla.htm sayfasını açtığınızda 3 kere veri.html sayfasını çağırır. veri.html içinde sadece ve sadece “1” yazdığından ekrana 3 tane 1 gelir.

One thought on “Belirli sürelerde ajax çağrıları yapmak

  1. Pingback: Soru: ajax ile alert box

Bir Cevap Yazın