İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | Ajax | AJAX a Giriş

Diğer Yazılar
Ajax Uygulama Örneği


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:1434Güvenlik Kodu:1434Güvenlik Kodu:1434Güvenlik Kodu:1434




En Son Okunan 10 Makale
  1. Hızlı Aşağı Açılır (Drop-down) Menü
  2. İnternet Nedir? (Tarihçe)
  3. Hazırlama Teknikleri
  4. Genç BT 'cilere İş Hayatı Öncesinde Öneriler
  5. Logo ve Amblemlerin Anlamları
  6. Renklerin Dili - Mavi
  7. Özgüven Nedir ?
  8. Site Haritası
  9. Flash Oyunları
  10. RSS Dosya Yapısı
 
AJAX a Giriş>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

Ajax, aslında Asynchronous JavaScript and XML'in kısaltılmış halidir. Ajax, ne bir dil, ne de bir kütüphanedir. Ajax, sadece bir yöntemin adıdır. Biz bu kitapta Ajax için xajax kütüphanesini ( http://xajax.sourceforge.net/ ) kullanacağız. Adresten xajax.inc.php dosyasını indirin. Neyse, Ajax'ı bu kadar popüler olmasının sebebi ise Gmail'de Ajax sisteminin çok profesyonel bir şekilde kullanılmasıdır. Ajax, hem web trafiğini azaltmakta, hem de hızı artırmaktadır.

Ajax Ne İşe Yarar?

Diyelim ki bir web sayfası var. Üst taraf, yan menüler ve ortada ana içerik. Siz ortada birşeyin değişmesini istiyorsunuz fakat linkle bütün sayfa değişiyor. Sadece oranın değişmesi için framelerden faydalanabilirsiniz. Onun dışında başka bir yol yoktu. Burada Ajax yardımımıza koşuyor. Yani kısaca sayfanın sadece bir kısmını değiştirmemizi sağlıyor.

 

 

1)Ajax'a Başlayalım

Ajax'ın ne olduğunu öğrendik. Şimdi de örnek bir uygulama yapacağız. Bu uygulamada kullanıcı metin kutusuna ne yazarsa, üstünde aynısı çıkacak.

Code:

<?php

include_once("xajax.inc.php");

function yazidegistir($yazi)

{

 

$objResponse = new xajaxResponse();

$objResponse->addAssign("div1","innerHTML", $yazi);

return $objResponse->getXML();

}

 

$xajax = new xajax();

$xajax -> addFunctions("yazidegistir");

$xajax->processRequests();

$xajax->javascript();

 

?><title>Ajax</title> <h1 align="center">Ajax Denemesi</h1>

<div align="center" id="div1" name="div1">

<font face="Verdana"><b>Deneme Yazisi</b></font></div>

<div align="center">

<input type="text" name="yazi" onChange="xajax_yazidegistir( document.getElementById('yazi').value);">

</div>

 

İşte uygulamamız tamam. Peki burada ne yapıyoruz? İlk önce xajax kütüphanesini içeri alıyoruz. Sonra içeriği değiştirecek olan fonksiyonu yazıyoruz. Fonksiyonda hngi layer'ın ve neresini değiştireceğimizi belirtiyoruz. Fonksiyonu bitiriyoruz. Sonra xajax olayı başlatıyoruz. "yazidegistir" fonksiyonunu xajax fonksiyonu olarak tanımlıyoruz. Sonra çıktı üretmeden xajax'ın istekleri işlemesini sağladık. Sonra bunları JavaScript fonksiyonuna çevirdik. Sonra daha önce belirttiğimiz gibi bir div oluşturduk fakat id'si "div1". Ardındn metin kutusunu yaptık ve değişirse fonksiyonu yerine getirmesini sağladık. Kod bundan ibaret.

 

Peki, biz sadece bunu mu yapıyoruz Ajax'la? Tabii ki hayır. Mesela renk de değiştirebiliriz. Nasıl olur?

1)

Code:

$objResponse->addAssign("div1","innerHTML", $yazi);

 

satırını

Code:

$objResponse->addAssign("div1","style.color", $yazi);

 

şeklinde değiştirin.

2)

Code:

<input type="text" name="yazi"

onChange="xajax_yazidegistir(document.getElementById('yazi').value);">

 satırını şu şekilde değiştirin:

Code:

<select id="colorselect" name="colorselect"

onchange="xajax_yazidegistir( document.getElementById('colorselect').value);">

<option value="black" selected="selected">Siyah</option>

<option value="red">Kirmizi</option>

<option value="green">Yesil</option>

<option value="blue">Mavi</option>

<option value="lightblue">Acik Mavi</option>

<option value="lightgreen">Acik Yesil</option>

<option value="pink">Pembe</option>

<option value="orange">Turuncu</option>

</select>

 Bu işlemler sonucu metin kutusu gidecek, yerine combo box gelecektir. Oradan seçtiğiniz renk ise yazının rengi olacaktır.

 Tamam, biz böyle yaptık da, nasıl kullanırız biz bunu diyorsanız, işte size örnek:

Code:

<?php

include_once("xajax.inc.php");

function degistir($deger) {

if ($deger == 0) {

 

 

$text = "Burasi Ana Sayfa. Bir icerik seciniz";

} elseif ($deger == 1) {

 

$text = "Hakkimda bilgiler";

} elseif ($deger == 2) {

$text = "Resimlerim";

} elseif ($deger == 3) {

$text = "Ziyaretci defterim";

} else {

 

$text = "Bir icerik seciniz";

}

$objResponse = new xajaxResponse();

$objResponse->addAssign("div1","innerHTML",$text);

 

return $objResponse->getXML();

}

$xajax = new xajax();

$xajax->addFunction("degistir");

 

$xajax->processRequests();

$xajax->javascript();

?><center>

<p><a href="javascript:xajax_degistir(0)">Ana Sayfa</a> - <a href="javascript:xajax_degistir(1)">Hakkimda</a>

- <a href="javascript:xajax_degistir(2)">Resimler</a> - <a href="javascript:xajax_degistir(3)">Ziyaretci

Defteri</a></p>

</center>

<div align="center" id="div1" name="div1">Burasi Ana Sayfa. Bir icerik seciniz</div>

Örneğimiz bitti. Burada yukarıda bir menü, aşağıda da içerik olacaktır. Ajax çalışmalarına devam edin.

Kolay gelsin!

Cumhur Korkut



Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : Cumhur Korkut
Son Güncelleme : 01 Haziran 2006, Perşembe
Sayfa Sürümü : 1
Okunma Adedi : 6,859
Son Okunma : 2017-05-29 13:57:55
Kaynaklar : http://www.php.org.tr/index.php?option=com_content&task=view&id=73&mc_show=1&start=5

AJAX a GirişAjax Uygulama Örneği
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 8 kişi çevirimiçi | Bugün =128 | Dün =230 | Bu Ay=6,459 | Günlük En Fazla=1,109 tekil ziyaretçi