Ajax'a Giriş ve Örnek

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 -> registerFunctions("yazidegistir");

$xajax->processRequests();

$xajax->printJavascript();

?><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:

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->registerFunctions("degistir");

$xajax->processRequests();

$xajax->printJavascript();

?><center>

  <p><a href="javascript:xajax_degistir(0)">Ana _fcksavedurl=""javascript:xajax_degistir(0)">Ana" _fcksavedurl=""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!

Ajax'a Giriş ve Örnek

Haber anlatımı

268 Kere okundu

Bu makaleyi beyendinizmi ?

Mr. CanaWar

Sitede ara Gelişmiş Arama seçenekleri »

Ana sayfa \| Ana sayfanız yapın \| Sık kullanılanlara ekle \| Rss/Rdf \| JavaScript