|
|
AJAX (Asynchronous JavaScript and XML) - Ajax Webmaster bilgi bankası, knowledge base Webmaster Araçları
| AnaSayfa > Ajax > AJAX (Asynchronous JavaScript and XML) | |
| | Kategori | : Ajax | | Gönderen | : Admin | | Tarih | : 2008-12-07 | | Puan | : 5  | Katılımcı : 2 | | Okunma | : 5558 | | | | | |
| |
AJAX yani Asynchronous JavaScript And XML. Henüz adı bu olmadan önce kullandığımız ama bir ad konunca nedense daha çok ilgimizi çeken şey.
Ne işe yarıyor?
Sayfada meydana gelen her tıklamada tarayıcının yeni bir istek yaparak bütün sayfayı güncellemesi yerine sadece belli bir kısmı yüklemesini sağlayarak ağ trafiğini azaltıyor ve kullanıcı dostu bir arabirim sağlıyor.
Nasıl çalışıyor?
Tarayıcı üzerinde çalışan bir Javascript´in sayfa üzerinde meydana gelen olaylara (event: tıklama vs.) göre sunucudan istekte bulunup gelen XML veriye göre sayfayı değiştirmesi. Bu durumda JS ve DOM´u destekleyen bir tarayıcıya ihtiyacımız var. Elbette XML destekli olmaları da gerekmektedir. IE, Firefox, Opera gibi tarayıcılar bazı farklılıklar olmakla beraber bu işi yapabilmektedir.
Şimdi kullanıcının sayfanızda bir linki tıkladığını düşünün, tarayıcı hemen sunucuya yeni bir istekte bulunup bütün sayfayı yeniden yükleyecektir. Sayfanın üstünde, altında, kenarlarında bulunan bütün sabit kısımlar ve biçimlendirme kodları gibi herşeyi. Oysa sadece bir <div> içindeki metni değiştirmek istemiş olabilirsiniz. İşte AJAX buna iyi bir çözümdür. Aşağıda örneğin tarayıcı tarafında çalışan hali ve tarayıcı JavaScript kodu verilmiştir. (Bu kod basit olması için sadece IE´ye uygun yazılmıştır, en altta linkini bulacağınız başka bir örnek yaygın tarayıcıların hepsinde çalışmaktadır.)
Örnek sayfa (index.htm):
<html>
<head>
<title>Ajax</title>
<meta http-equiv=´content-language´ content=´tr´ />
<meta http-equiv=´content-type´ content=´text/html; charset=windows-1254´ />
<script>
var ajax_istek;
function ajax_getir(url){
if (ajax_istek){ajax_istek.abort()}
else{ajax_istek=new ActiveXObject("Microsoft.XMLHTTP")}
if (ajax_istek){
ajax_istek.onreadystatechange=ajax_takipet;
ajax_istek.open(´get´,url,true);
ajax_istek.send(null);
}
}
function ajax_takipet(){
var cevapXML;
var kimlik;
var deger;
if (ajax_istek.readyState==4){
if (ajax_istek.status==200){
cevapXML=ajax_istek.responseXML.documentElement;
kimlik=cevapXML.getElementsByTagName(´kimlik´)[0].firstChild.data;
deger=cevapXML.getElementsByTagName(´deger´)[0].firstChild.data;
document.getElementById(kimlik).innerHTML=deger;
}
}
}
</script>
</head>
<body>
Aşağıdan sırasıyla 1, 2, 3 gibi tıklayın.<br/><br/>
<a href="#" onclick="ajax_getir(´ajax.asp?istek=1´)">1</a> -
<a href="#" onclick="ajax_getir(´ajax.asp?istek=2´)">2</a> -
<a href="#" onclick="ajax_getir(´ajax.asp?istek=3´)">3</a> -
<a href="#" onclick="ajax_getir(´ajax.asp?istek=4´)">4</a><br/><br/>
<a href="index.htm" target="_blank">Yeni Pencerede Aç</a><br/><br/><br/><br/>
<div id="kutu1" name="kutu1" style="width:100%;height:100px;background:ffff00"> </div><br/>
<div id="kutu2" name="kutu2" style="width:100%;height:100px;background:ff00ff"> </div><br/>
</body>
</html>
ajax_getir fonksiyonunda oluşturulan XMLHttp isteğinin olaylarını takip etmek üzere ajax_istek.onreadystatechange=ajax_takipet; satırı ile ajax_takipet fonksiyonu atanmıştır. Yapılan istek bittiğinde ajax_istek.readyState´nin değeri 4 olacaktır. Eğer sunucu düzgün bir şekilde cevap verirse ajax_istek.status´un değeri 200 olur. Bu durumda gelen XML verisi parse edilmektedir. Gelen verinin içinden hangi <div>´in değiştirilmek istendiği ve içine konulmak istenen veri çekilir.
Sunucu tarafında çalışan kod (ajax.asp):
<%
Session.Codepage=1254
Session.LCID=1055
Response.Expires=-1
Dim Istek
Dim Kimlik
Dim Deger
Istek=Request.QueryString("istek")
Select Case Istek
Case "1"
Kimlik="kutu1"
Deger="<b>AJAX için JavaScript kullanılır</b>"
Case "2"
Kimlik="kutu1"
Deger="<i>Veri sunucudan XML formatında gelir</i>"
Case "3"
Kimlik="kutu2"
Deger="<u>Tarayıcı tarafında XML verisi parse edilir</u>"
Case "4"
Kimlik="kutu2"
Deger="<select id=´sec´ name=´sec´>" & _
"<option value=´0´>Seçenek 1</option>" & _
"<option value=´1´>Seçenek 2</option>" & _
"</select>"
End Select
Response.ContentType="text/xml"
Response.Write "<?xml version=""1.0"" encoding=""windows-1254"" ?>"
Response.Write "<ajax>"
Response.Write "<nesne>"
Response.Write "<kimlik>" & Kimlik & "</kimlik>"
Response.Write "<deger>" & XMLMetni(Deger) & "</deger>"
Response.Write "</nesne>"
Response.Write "</ajax>"
Function XMLMetni(psMetin)
Dim ysMetin
ysMetin=psMetin
ysMetin=Replace(ysMetin,"&","&")
ysMetin=Replace(ysMetin,">",">")
ysMetin=Replace(ysMetin,"<","<")
ysMetin=Replace(ysMetin,"´","'")
ysMetin=Replace(ysMetin,"""",""")
XMLMetni=ysMetin
End Function
%>
Görüldüğü gibi asp kodu gelen isteğe göre değiştirilecek içeriği nesnenin kimlik bilgisini ve içerik metnini ayarlamakta ve XML formatında istemciye yollamaktadır. Eğer bir div içine yolladığınız veri içinde başka html kontolleri varsa onlar da görüntülecektir. 4. link buna bir örnektir.
Konu yeni olduğundan örnek kodu indirin, sunucunuzda bir dizine koyun ve index.htm dosyasını çalıştırarak sırayla 1, 2, 3 ve 4 numaralı linklere tıklayın.
|
| Yorumlar | | Henüz Kimse Yorum Yapmamış, ilk yorumu siz ekleyin! | | Yorum Ekleme Aparatı | Yorum Eklemek için lütfen sol menuden giris yapınız.. | | Toplam 0 yorum listelendi. |
|
