IRCSayfası - IRC ve mIRC Kullanıcılarının Buluşma Noktası   VefaSohbet

Geri Dön   IRCSayfası - IRC ve mIRC Kullanıcılarının Buluşma Noktası > Webmaster > Web 2.0

Web 2.0 CSS, XHTML, DHTML, AJAX, Flash Apps hakkındaki herşeye bu başlık altından ulaşabilirsiniz.

Etiketlenen üyelerin listesi

Yeni Konu Aç  Cevapla
 
LinkBack Seçenekler Stil
Alt 29 Haziran 2020, 23:44   #1
Çevrimdışı
Sıfırdan AJAX Kullanımı [Öğrenmek isteyenler için]


-- Sponsor Baglantı --



Ö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.

PHP- Kodu:
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 = ***91;"MSXML2.XMLHttp.5.0""MSXML2.XMLHttp.4.0""MSXML2.XMLHttp.3.0""MSXML2.XMLHttp""Microsoft.XMLHttp"***93;;
  
// Sırasıyla deneyelim
  
for (var 0<= MicrosoftObjects.lengthi++)
  {
   if (!
MicrosoftObjects***91;i***93;)
   {
    break;
   }
   try
   {
    var 
ajaxobject = new ActiveXObject(MicrosoftObjects***91;i***93;);
    
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;

PHP- Kodu:
// 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 == && ajax.status == 200 && ajax.responseText)
  {
   
alert(ajax.responseText); // Gelen Sorgu
  
}
 };
 
ajax.send(null);

Örnek Kod:

PHP- Kodu:
<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 = ***91;"MSXML2.XMLHttp.5.0""MSXML2.XMLHttp.4.0""MSXML2.XMLHttp.3.0""MSXML2.XMLHttp""Microsoft.XMLHttp"***93;;
  
// Sırasıyla deneyelim
  
for (var 0<= MicrosoftObjects.lengthi++)
  {
   if (!
MicrosoftObjects***91;i***93;)
   {
    break;
   }
   try
   {
    var 
ajaxobject = new ActiveXObject(MicrosoftObjects***91;i***93;);
    
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 == && ajax.status == 200 && ajax.responseText)
   {
    
alert(ajax.responseText); // Gelen Sorgu
   
}
  };
  
ajax.send(null);
 }
}
//-->
</script>
</html> 
Screenshot:



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


Yarın POST Methodu ile AJAX kullanımı....
  Alıntı ile Cevapla

İS Reklam
sohbetediyoruz.com
Yeni Konu Aç  Cevapla

Etiketler
sıfırdan ajax kullanımı [öğrenmek isteyenler için]


Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık