Ajax ile div güncelleme

İnternet Yorum yaz

Javascript ile divleri güncellemek için çoğu sitede aynı tip fonksiyon kullanılıyor.Ancak bu fonsiyonu aynı anda 2 veya daha fazla div güncellemek için çalıştırdığımız zaman sadace bir div güncellenebiliyordu.Aşağıdaki kod ile bu problemi çözdük.Artık MakeRequest(‘ekleneceksayfa.htm’, ‘eklenecekdiv’);MakeRequest(‘ekleneceksayfa2.htm’, ‘eklenecekdiv2′)“> şeklinde iki kez çağırabiliyoruz.Yardımları için Harun Yiğit Legoz’a ve M. Tahir Çakmak’a teşekkür ediyorum.

Örnek sayfayı buradan inceleyebilirsiniz.

function GetXHR()


{
if (window.XMLHttpRequest)
{// code for Firefox, Opera, IE7, etc.

xhr=new XMLHttpRequest();


}
else if (window.ActiveXObject)
{// code for IE6, IE5

xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xhr==null)


{
alert(“Your browser does not support XMLHTTP.”);

return null;
}
return xhr;
}


function MakeRequest(url, yer)
{
var xmlReq = GetXHR();
var divId = yer;
var urlStr = url;

xmlReq.onreadystatechange

=function() {
if (xmlReq .readyState==4)
{// 4 = “loaded”
if (xmlReq .status==200)
{// 200 = “OK”
document.getElementById(divId)
.innerHTML=xmlReq.responseText;
}
else
{
alert(“Problem retrieving data:” + xmlReq.statusText);
}
}
};
xmlReq.open(“GET”,urlStr ,true);
xmlReq.send(null);
}

eski fonksiyon;

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
else
{
alert(“Your browser does not support XMLHTTP.”);
}
}

function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = “loaded”
if (xmlhttp.status==200)
{// 200 = “OK”
document.getElementById(‘T1′).innerHTML=xmlhttp.responseText;
}
else
{
alert(“Problem retrieving data:” + xmlhttp.statusText);
}
}
}

Özgür Web Teknolojileri Günleri 15-16 Ekim 2010 Yeditepe Üniversitesi

Yazar: Baran
Etiketler: , , , |


5 Cevap to “Ajax ile div güncelleme”

  1. Hasan Diyor ki:

    acaba bunu örnek bi html sayfasıyla detaylandırabilir misin, bi htmle 3 tane div koy orada bir iki tane tuş olsun işte ona tıklayınca diğer divlerden bazıları dğeişsin filan

    Beğendim - Beğenmedim: Thumb up 0 Thumb down 0

  2. Baran Diyor ki:

    Örnek sayfayı ekledim. Butonun onclick durumuna fonksiyonu ekleyerek istediğin gibi kullanabilirsin.

    Beğendim - Beğenmedim: Thumb up 0 Thumb down 0

  3. cihan Diyor ki:

    Örnek sayfa çalışmıyor. Bi göz atar mısınız?

    Beğendim - Beğenmedim: Thumb up 0 Thumb down 0

  4. Baran Diyor ki:

    İnceledim, sayfa çalışıyor. Herhangi bir problem göremedim.

    Beğendim - Beğenmedim: Thumb up 0 Thumb down 0

  5. eyüp Diyor ki:

    hay sizden Allah razı olsun! harika oldu …

    Beğendim - Beğenmedim: Thumb up 0 Thumb down 0

Yorum Yazın