DOM erişimi ile Tarayıcı Tarafında Dinamik Olarak İçerik oluşturulması

21 12 2008

Bazı web sayfalarında görmüşsünüzdür belli bir yere tıkladığınızda anında arama çubuğu oluşuverir.  Bu işlem Javascript ile HTML dökümanının düğümlerine erişim ile olur. İşi yapan Javascriptteki createElement, appendChild ve removeChild metotlarıdır.

Aşağıda bu işlemi yapacak bir kod göreceksiniz:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript”>

function arama_formu()
{

var formtag = document.createElement(‘form’); // FORM TAGI OLUSTURULUYOR
var form_yazi=”ARAMA:”;
//formtag.innerHTML=form_yazi;
formtag.setAttribute(“name”,”form1″);
formtag.setAttribute(“method”,”GET”);
formtag.setAttribute(“target”,”_blank”);
formtag.setAttribute(“action”,”http://www.google.com.tr/search?site=&hl=tr”);
var inputtag=document.createElement(“input”);
inputtag.setAttribute(“type”,”text”);
inputtag.setAttribute(“id”,”q”);
inputtag.setAttribute(“name”,”q”);

var dugme=document.createElement(“input”);
dugme.setAttribute(“type”,”submit”);
dugme.setAttribute(“id”,”button”);
dugme.setAttribute(“name”,”button”);
dugme.setAttribute(“value”,”Ara”);

var fani=document.getElementById(“fani”);
var fanidugme=fani.firstChild;
fani.removeChild(fanidugme);

formtag.appendChild(inputtag);
formtag.appendChild(dugme);

document.getElementById(‘apDiv1′).setAttribute(“class”,”tbar”);
document.getElementById(‘apDiv1′).appendChild(formtag);

}
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>SUAT ATAN AJAX DERSLERİ</title>
<style type=”text/css”>
<!–
#apDiv1 {
position:absolute;
left:3px;
top:8px;
width:507px;
height:29px;
z-index:1;
}
#q{
background-color: #FFFF99;
}
–>
</style>
</head>

<body>
<div id=”apDiv1″></div>
<div id=”fani”>
<input type=”button” id=”dugme1″ value=”Ara” onclick=”arama_formu()” /> </div><!–Bu kodlar Suat ATAN tarafından kodlanmıştır.–></body>
</html>
Bu kodların çalışır hali için

http://suatatan.com/ajax/arge1/arama_formu_olustur.htm

Ancak bu kodlar şu an itibari ile Mozilla Firefox altında çalışmamaktadır. Nedeni bulunduğunda yeni versiyonu yazılacaktır.


Yorumlar : » yorum bırak;
Etiketler: , ,
Kategoriler : Kategorilenmemiş

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

3 11 2008

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”>
<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

Yorumlar : 2 Yorum »
Etiketler: ,
Kategoriler : Kategorilenmemiş