Sıfırdan AJAX Kullanımı [Öğrenmek isteyenler için] - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

04 Eylül 2007, 17:14

Tarih: 04 Eylül 2007 - 17:23:45
Yazar: Nickolas

Öncelikle bilmemiz gereken AJAX 'ın Tarayıcıdan Tarayıcıya farklılık gösterdiğidir.
Internet Explorer ActiveXObject, MSXML kullanırken Gecko Türü Tarayıcılar(Firefox, Netscape, Safari), Opera
XMLHttpRequest Nesnesini kullanır. Bu nedenle istersek Sadece Internet Explorer 'a ya da Gecko Türü Tarayıcılara
ayrı ayrı kod yazabilir ya da belirli nesnel testlerle tüm tarayıcılarla uyumlu bir ajax kodu oluşturabiliriz.
Tabi ben burada önce en basit halini ve daha sonra tüm tarayıcıları kapyasacak bir kütüphane oluşturmayı düşünüyorum.

1- Internet Explorer 'ın AJAX anlayışı...
Dünyada en çok kullanılan tarayıcısı Internet Explorer, Windows 'un güncelleme sisteminin temelini oluşturan
ActiveXObject ile AJAX 'a gözlerini açtı. Daha sonrasında ise MSXML ve bunların versiyonlarını geliştirerek
daha aktif ve kararlı bir yapı oluşturmayı hedefledi ve başardıda...
Internet Explorer 'ın en eski AJAX sistemi ActiveXObject nesnesi ve Microsoft.XMLHttp ile oluşur. Internet Explorer 4 'de
bu nesneyi kullanır. 5 ve sonrasında Windows 'un güncellik derecesine göre MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"
Nesneleri daha kararlı yapılar sunar.

2- Opera, Safari, Firefox, Netscape
Bilindik tek Nesneye dayanır. Bu da XMLHttpRequest Nesnesidir.

Elimizdekileri ortaya dökelim;
Internet Explorer için elimizde: MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"
Gecko için elimizde: XMLHttpRequest
O halde AJAX Fonksiyonumuzu yazmaya başlayalım.
AJAX Fonksiyonunda şunları göz önüne almamız gerekiyor.

1- Veri Gönderme şeklini GET ile mi POST ile mi yapacağımız.
2- Async bağlantı türü kullanıp kullanmayacağımız.
3- Bir de Cache Kullanıp kullanmayacağımız

Cache: Aynı ajax fonksiyonununu 1. kullandığımızda AJAX çalışı ve verileri bize getirir. Fakat aynı fonksiyonu bir kere
daha kullanmak istediğimizde ise 1. de getirdiği bilgileri AJAX 'ı çalıştırmadan direk bellekten verir. Tabi bunun
kullanımı bize kalmış.
Kod Planımız şöyle. Bir değişkene olutşurduğumuz nesneyi atayacağız ve tüm işlemleri bu değişkenden yapacağız.

Kod: Kodu kopyalamak için üzerine çift tıklayın!

function create_ajax()
{
 // AJAX Nesnesi olarak kullanacağımız değişkenin başlangıç değeri
 var ajaxobject = null;
 // Burada Bir iki test gerekiyor. Bunlardan ilk olarak Tek Nesne olduğu için XMLHttpRequest 'i deneyelim.
 // Bu değişken de AJAX Nesnesini Oluşturup oluşturamadığımız konusunda bize fikir sağlayacaktır.
 var found = false;
 try
 {
  ajaxobject = new XMLHttpRequest();
  found = true; // Evet Oluşturduk! Tarayıcımız Gecko Türü bir tarayıcı
 }
 catch(e) // Eğer oluşturamadıysa Internet Explorer 'ı deneyelim
 {
  // Microsoft un Tüm XMLHttp Nesneleri
  var MicrosoftObjects = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
  // Sırasıyla deneyelim
  for (var i = 0; i <= MicrosoftObjects.length; i++)
  {
   if (!MicrosoftObjects[i])
   {
    break;
   }
   try
   {
    var ajaxobject = new ActiveXObject(MicrosoftObjects[i]);
    found = true; // Kaçamazsın Bizden! Tarayıcımız Internet Explorer
    break;
   }
   catch(f)
   {
    // Yukarıda ki XMLHttp Nesnelerinden biri ile uyumlu değil. Bir Sonrakini deneyelim
   }
  }
 }
 if (!found) // Tarayıcımızın AJAX desteği yok...
 {
  alert('Bu işlemi gerçekleştirmek için AJAX Destekli Bir Tarayıcıya ihtiyacınız olacak');
  return null;
 }
 return ajaxobject; // Tarayıcımız AJAX destekli ve kullanıma hazır.
}

Evet Bu noktada açıklamalı olarak AJAX Nesne oluşturucumuzu tamamladık. Bundan sonraki işlevler şöyle;

Kod: Kodu kopyalamak için üzerine çift tıklayın!

// GET ile AJAX
var ajax = create_ajax(); // AJAX Oluşturmaya çalışıyoruz
if (ajax) // Eğer AJAX Oluşturulduysa yani değer null değilse
{
 var url = 'index.php'; // AJAX Sorgusu yapacağımız url
 // Yukarıda Cache 'in ne olduğundan bahsetmiştim.
 var nocache = ((url.indexOf('?') != -1) ? '&' : '?') + 'nocache=' + Math.random();
 // Eğer Cache Kullanımı istemiyorsak;
 url += nocache;
 ajax.open('GET', 'index.php', true); // AJAX açılışı
 ajax.onreadystatechange = function() // AJAX Sorgusu tamamlandığı gelen verileri işleyeceğimiz durum
 {
  if (ajax.readyState == 4 && ajax.status == 200 && ajax.responseText)
  {
   alert(ajax.responseText); // Gelen Sorgu
  }
 };
 ajax.send(null);
}

Örnek Kod:

Kod: Kodu kopyalamak için üzerine çift tıklayın!

<html>
<body>
<input type="button" value="Bu Sayfanın Kaynak Kodlarını ver" style="font: bold 11px Tahoma" onclick="alert_source_codes()" />
<script type="text/javascript">
<!--
function create_ajax()
{
 // AJAX Nesnesi olarak kullanacağımız değişkenin başlangıç değeri
 var ajaxobject = null;
 // Burada Bir iki test gerekiyor. Bunlardan ilk olarak Tek Nesne olduğu için XMLHttpRequest 'i deneyelim.
 // Bu değişken de AJAX Nesnesini Oluşturup oluşturamadığımız konusunda bize fikir sağlayacaktır.
 var found = false;
 try
 {
  ajaxobject = new XMLHttpRequest();
  found = true; // Evet Oluşturduk! Tarayıcımız Gecko Türü bir tarayıcı
 }
 catch(e) // Eğer oluşturamadıysa Internet Explorer 'ı deneyelim
 {
  // Microsoft un Tüm XMLHttp Nesneleri
  var MicrosoftObjects = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
  // Sırasıyla deneyelim
  for (var i = 0; i <= MicrosoftObjects.length; i++)
  {
   if (!MicrosoftObjects[i])
   {
    break;
   }
   try
   {
    var ajaxobject = new ActiveXObject(MicrosoftObjects[i]);
    found = true; // Kaçamazsın Bizden! Tarayıcımız Internet Explorer
    break;
   }
   catch(f)
   {
    // Yukarıda ki XMLHttp Nesnelerinden biri ile uyumlu değil. Bir Sonrakini deneyelim
   }
  }
 }
 if (!found) // Tarayıcımızın AJAX desteği yok...
 {
  alert('Bu işlemi gerçekleştirmek için AJAX Destekli Bir Tarayıcıya ihtiyacınız olacak');
  return null;
 }
 return ajaxobject; // Tarayıcımız AJAX destekli ve kullanıma hazır.
}
function alert_source_codes()
{
 var ajax = create_ajax(); // AJAX Oluşturmaya çalışıyoruz
 if (ajax) // Eğer AJAX Oluşturulduysa yani değer null değilse
 {
  var url = 'index.php'; // AJAX Sorgusu yapacağımız url
  // Yukarıda Cache 'in ne olduğundan bahsetmiştim.
  var nocache = ((url.indexOf('?') != -1) ? '&' : '?') + 'nocache=' + Math.random();
  // Eğer Cache Kullanımı istemiyorsak;
  url += nocache;
  ajax.open('GET', 'index.php', true); // AJAX açılışı
 
  ajax.onreadystatechange = function() // AJAX Sorgusu tamamlandığı gelen verileri işleyeceğimiz durum
  {
   if (ajax.readyState == 4 && ajax.status == 200 && ajax.responseText)
   {
    alert(ajax.responseText); // Gelen Sorgu
   }
  };
  ajax.send(null);
 }
}
//-->
</script>
</html>

Screenshot:

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Not: Ekte Yukarıdaki örneğin kaynak kodları mevcut.

Yarın POST Methodu ile AJAX kullanımı....

Raiden · 08 Aralık 2007, 22:02

aynı fonksiyonları kullanarak post metodu veya get metodu ile de php veya asp ile istediğinizi yaptırabilirsiniz.. önce nerelerde kullanacağınızı planlayın sonra uyarlayın...

örneğin. sayfa includeleri olabilr zaten kullanılan bir yöntem

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Final Fantasy X, Vita için sıfırdan yapılıyor.	Deep	Oyun Dünyasından Son Haberler	0	24 Eylül 2011 21:34
PHP ve AJAX - Gmail'in Belkemiği: AJAX	EGEMAN	PHP	3	16 Ekim 2008 13:36
Ingilizce öğrenmek isteyenler buraya !!!	CyberNeaT	Bilgisayar Donanımı	3	13 Haziran 2008 18:44

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.