![Sıfırdan AJAX Kullanımı [Öğrenmek isteyenler için] Uyeols10](https://2img.net/r/ihimizer/img19/561/uyeols10.gif)
![Sıfırdan AJAX Kullanımı [Öğrenmek isteyenler için] Render12](https://i.servimg.com/u/f55/13/61/25/92/render12.png)
Anasayfa
Yaş
tarafından Ö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.
Evet Bu noktada açıklamalı olarak AJAX Nesne oluşturucumuzu tamamladık. Bundan sonraki işlevler şöyle;
Örnek Kod:
Screenshot:
Not: Ekte Yukarıdaki örneğin kaynak kodları mevcut.
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:
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.
}
Kod:
// 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);
}
Kod:
<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>
 |
Not: Ekte Yukarıdaki örneğin kaynak kodları mevcut.
