Enis Baydemir : Sayfa yenilemeden belirlenen alanda içerik güncelleme kodu

Çoğu zaman ihtiyaç duyduğumuz, çok işinize yarayabilecek, tüm sayfayı yenilemeden belirlenen bir alanda, tv kanalı değiştirmek gibi içeriği değiştirmenin nasıl olduğunu elimden geldiğince basit bir dille anlatmaya çalışacağım. Bunun için ajaxtan faydalanacağız.

Öncelikle gösterilecek olan ekran alanını belirliyoruz. Burası bizim monitörümüz gibi olacak. Bunun için div ve iframe'den faydalanacağız.

Şu anda bu alan sayfa açıldığında boş olacak. Boş görünmesini istemiyorsak src="link buraya" komutu ekleyerek video, resim ne istersek ekleyebiliriz veya görüntülenecek şeylerden birini de ekleyebiliriz.

Şimdi ise bunun altına link gönderecek olan asıl script kodumuzu ekleyelim.

<div>
<iframe name="pencere" style="height: 360px; width: 620px;" src="https://s-media-cache-ak0.pinimg.com/originals/92/ca/1b/92ca1b7881f1bfc713b27ed5bbba6b1d.gif"/></iframe>
</div>
<br/>
<script>
function saybakim()
{
   xmlHttp=ajax();
   if (xmlHttp==null)
   {
 alert ('Tarayiciniz Ajax Desteklemiyor!');
 return;
   }
   var url='sayac.php';
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
}
function ajax() 
{
 var xmlHttp=null;
 try
 {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
 }
 catch (e)
 {
  // Internet Explorer
  try
  {
   xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch (e)
  {
   xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
  }
 }
 return xmlHttp;
}
function sayac()
{  
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 {
  document.getElementById('sayacs').innerHTML = xmlHttp.responseText;
  saybakim();
 }
setTimeout(sayac,3000);//5 Saniye
 }
setTimeout(sayac,3000);
</script>
<head>
<body onload="saybakim()">
<div id="sayacs">

Unutmayın linkten sonra target="pencere"> komutu gelecek. İstersek link isimleri yerine <img src= ile resim de ekleyebiliriz. İstersek id="sayacs" komutundan sonra slayt ekleyebiliriz. Neyi nasıl istiyorsak boyutlarını falan gerekli komutları ekleyerek ayarlayabiliriz.

Sayfalar

Sayfa yenilemeden belirlenen alanda içerik güncelleme kodu