AJAX ile veri çekerken veriyi salt veya HTML’nin okunmuş hali olarak alma


Aşağıda göreceğiniz fonksiyon kendisine gelen parametreye bağlanarak içerğini okur ve çalıştığı dökümanın güncellenmesini gerektirmeksizin (Zaten Ajax ile uğraştığımıza göre amaç bu) içeriğini ekrana yazar.

index.html dosyası:——————————

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html>
<head>
<title>Suat ATAN Ajax Dersleri</title>
<script type=”text/javascript” src=”ajax.js”></script>

</head>
<body>

<p>
<a href=”http://checkip.dyndns.org/” onclick=”grabFile(this.href); return false;”> IP Sorgula</a>

</p>

<div id=”hedef”></div>
</body>
</html>

ajax.js dosyası:——————————————-

// JavaScript Document Suat ATAN. suatatan.com _ajax_libraries
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(e) {
xhr = false;
}
}
}
return xhr;
}

function grabFile(file) {
var istek = getHTTPObject();//obje olusturuldu
if (istek) { //istek gerceklestiridli
istek.onreadystatechange = function() {

//durum degistigi zaman sonucu goster
displayResponse(istek); //istek sonucugun goster
};
istek.open(“GET”, file, true); //veri al
istek.send(null);//bos gonder
}
}

function displayResponse(istek) {
if (istek.readyState == 4) { //sonuc tam dondyse
if (istek.status == 200 || istek.status == 304) { //hata yoksa

var gelen_deger=istek.responseText;
var ana_tag=document.getElementById(“hedef”);

var yeni_icerik=document.createTextNode(gelen_deger);
ana_tag.appendChild(yeni_icerik);

}
}
}

bu durumda index.html’  “<a href= ” ibaresindeki http://www.checkip.dynds.org adresine bağlanan site bu sitenin html kodlarını createTextNode(gelen_deger); metodu ile ekrana yazar.  Metot ilginç bir şekilde yeni oluşturulan değeri işlemeden ekrana basar.

aynı ajax.js kodlarını aşağıdaki gibi değiştirince ise:
// JavaScript Document Suat ATAN. suatatan.com _ajax_libraries
function getHTTPObject() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(e) {
xhr = false;
}
}
}
return xhr;
}

function grabFile(file) {
var istek = getHTTPObject();//obje olusturuldu
if (istek) { //istek gerceklestiridli
istek.onreadystatechange = function() {

//durum degistigi zaman sonucu goster
displayResponse(istek); //istek sonucugun goster
};
istek.open(“GET”, file, true); //veri al
istek.send(null);//bos gonder
}
}

function displayResponse(istek) {
if (istek.readyState == 4) { //sonuc tam dondyse
if (istek.status == 200 || istek.status == 304) { //hata yoksa

var gelen_deger=istek.responseText;
var ana_tag=document.getElementById(“hedef”);
var yeni_tag=document.createElement(“p”);
ana_tag.appendChild(yeni_tag);
yeni_tag.innerHTML=gelen_deger

//Geri zekalı forum manyaklarınca bu içeriklerin de eni sonu kopyalanacağını biliyorum ancak onlar //da bilsinler ki bu metnin her satırı emekle yazıldı. Kopyala yapıştır ile değil. (Suat ATAN)
}
}
}

http://checkip.dyndsn.org sitesine bağlanan index.html dosyası veriyi HTML olarak değil işlenmiş olarak basar.

Burada fark şundan olur. Normal şartlarda AJAX ile hangi dosya çekilirse o dosyanın olduğu gibi çekilmesi sağlanır. innerHTML metodu ise çekilen HTML verisini işler.

Ajax ile çekilecek verilerin XML veya JSON olarak da çekme yöntemleri vardır.  Ancak HTML olarak veri çekmek ve özellikle de innerHTML metodu çok basittir ancak Mozilla Firefox’ta sorunlu olmaktadır. Bu durumu innerHTML’nin W3C konsorsiyumunca onaylan bir özellik olmamasına bağlıyorum.

Blogged with the Flock Browser

AJAX ile veri çekerken veriyi salt veya HTML’nin okunmuş hali olarak alma’ için 6 yanıt

  1. Selin Hanım;
    Lanet olası “evet” lanet olası forumların copy-paste’ci salaklarının yaptıklarına “eyvallah” demek anlamına gelen “paylaşım için teşekkürler” sözünü umarım düşündüğüm gibi anlayarak “yanlış anlamıyorumdur”.

  2. selam usta yukarıdaki anlatım güzel eline sağlık. Seline gelince ise paylaşım için teşekkürler yazmış ya bana kalırsa o bir bot ve nickindeki sitenin kafasına göre backlink yapısını oluşturuyor 🙂 ne diyelim allah böyle uyuz insanları bloglarımızdan uzak tutsun

  3. Fatih Beycim;
    Vallahi ta ciğerlerimden amiiiiin diyorum.
    Allah bu forumcu gençliği de bilgi üretenlerden etsin,ıslah etsin.
    Size selam eder, saygılar sunarıö.

  4. merhaba.

    bu kodda sanırım bir hata var. çünkü normal olarak <a ile verilmiş linke tıkladığınızda verilmiş href adresine gidiyor.

    yani normal bir dan farkı yok. halbuki normalde browserdan bağlanmaması lazım.

  5. yeniden baktım da, IE’de çalışıyor fakat Mozilla ve Chrome’da çalışmıyor.

    Bunun sebebi nedir acaba?

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s