Ajax | Ajax Örnekleri
Ajax kelimesini birde biz açıklayalım.
AJAX (Asynchronous JavaScript and XML), İnternet sayfalarında JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan tekniğin adıdır.
En yaygın kullanım alanı, sayfayı yeniden yüklemeye gerek kalmaksızın, sayfada görünür değişiklikler yapmaktır.XMLHttpRequest kullanılarak birden fazla bağımsız işlem yapılabilir.
Desteklediği Teknolojiler:
- Bilgiyi biçimlendirmek ve görüntüsünü değiştirmek için XHTML (ya da HTML) ve CSS.
- Görüntülenecek bilgiyi dinamik olarak göstermek ve onunla etkileşimli çalışmak için özellikle JavaScript ve JScript gibi ECMAScript olan kullanıcı tarafındaki bir scripting dili yardımıyla erişilebilen DOM.
ve daha birçok teknoloji ile kullanılan bir tekniktir.
Ajax ın avatajları veya dezavantajları ne olabilir.
Avantajları:
Bantgenişliğini ayarlamak ;
HTML’yi ağ tarayıcısı (browser) programında oluştururken, JavaScript işlemlerini ve işlenecek verileri kullanırken, sunucudan gelen sayfa bilgisi gerektiğinden daha az yer tuttuğundan dolayı Ajax web sayfalarının görece olarak daha hızlı yüklendiği gözlenebilir.
İçeriğin “isteğe bağlı olarak yüklenmesine” ek olarak, bazı web uygulamaları ilk önce Olay Yöneticilerini (event handler), ardından ilgili fonksiyonları indirir. Bu teknik, karmaşık mekanizması ve fonksiyonu olan web uygulamalarının gereksinim duyduğu yüksek miktarda bantgenişliği tüketimini önemli ölçüde hafifletir.
Kullanıcı Arabirimi ;
Gelen ziyaretcilere daha güzel bir karşılama sayfası istiyorsanız ajax ı kullanabilirsiniz.Daha hızlı ve daha güzel sayfaları ajax ile karşılarına sunabilirsiniz.
Dezavantajları:
Google gibi arama motorlarında henüz 2.planda tutulması bir dezavantajdır.Tabi ikinci planda olması oakdarda kötü bir dezavantaj değildir sayfa içeriğinizi düzgün güzel bir şekilde yaparsanız diğer teknolojiler gibi de aynı plana gelecektir.
Tarayıcı Uyumu ;
Bazı tarayıcılarda yapılmış olan işlemler sonucunda kendini kaydetmez ve geri komutu kullanıldıgında ajax ile yapılmış uygulamalar elde edilemeyebilir.
Yanıt Verme Süresi ;
Yanıt verme süresi dikkate alınması gereken bir dezavantajdır.Bilğilerini çekilmesi uzun sürebilir ve bu durumu ziyaretci anlayamaz ve sayfadan çıkış yapabilir.
Arama Motorları ;
Arama motorlarınca endekslenmesi gereken bilgileri yüklemek için Ajax kullanılan web siteleri, Ajax işlevselliği için gerekli olan JavaScript kodunu arama motorlarının genelde çalıştırmamasından dolayı, arama motorlarının okuyabileceği bir formatta ve bir URL linki şeklinde bilgi koymalıdır. Bu problem Ajax‘a özgü değildir, çünkü örneğin form gönderme sonrası gereken tam sayfa güncellemesi gibi dinamik sayfalar üreten sitelerde de bu problem vardır (bu gibi problemler genelde hidden web olarak adlandırılır).
Çalışma Mantığı
Sayfada varolan işlemlerden biri tetiklenince, sayfada hazırda bekleyen javascript fonksiyonlarıyla xmlhttprequest nesnesi oluşturulur. Bu nesne arka planda gönderdiği bir HTTP talebiyle, istenen işlem için sunucu tarafında bulunan ve sunucu tabanlı bir dille yazılmış ilgili dosyadan o işlemin yapılmasını talep eder ve bu dosyanın çıktısını alarak kullanıcı tarafında işlenmesi ve istenen şekilde sunulması için diğer bileşenlere aktarır.
Bu işlem akışı sırasında, bir AJAX uygulamasını tetiklemek için HTML ve JS, XMLHTTPREQUEST nesnesini oluşturmak için JS, arkaplanda sunucuya asenkron (eşzamanlı olmayan/gerçek zamanlı) HTTP talebi göndermek için XMLHTTPREQUEST nesnesi, sunucu tarafında yapılması istenen işlem için PHP, ASP/.NET, JSP/JAVA vb. sunucu tabanlı bir dil, sunucu tarafında üretilen çıktıyı almak için gene XMLHTTPREQUEST nesnesi, elde edilen bu çıktıyı işlemek ve sayfada istenen alana yerleştirmek için DOM, DHTML ve JS, işlenmiş çıktının renk, çizgi vb. şekilsel sunumu için de (X)HTML ve CSS kullanılmaktadır.
Hangi Browserlarda Destekleniyor
- Mozilla Firefox 1.0 ve üstü,
- Netscape 7.1 ve üstü,
- Konqueror,
- Microsoft Internet Explorer 4.0 ve üstü,
- Opera 7.6 ve üstü,
- Apple Safari 1.2 ve üstü
Yukarıdada dediğimiz gibi bazı browserlarda güzel çalışmayacaktır.Çalıştıgı browserlar bunlardır.
Ajax Örnekleri:
Örnek 1 :Bir Liste/Menü de seçilen verinin alt katagorisini gösterme.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>Ajax ile secmece</title> </head> <body> <script type="text/javascript" src="ajax/eyceks.js"></script> <script type="text/javascript"> function islemyap(deger){ JXP(0, "sonuc_goruntulenen_yer", "islem.php", "kategori="+deger); } </script> <form action="javascript:void(0)" method="post"> <table> <tr> <td>Kategori</td> <td width="1">:</td> <td><select name="kategori" onChange="islemyap(this.value)"> <option>Bir Kategori Secin</option> <option value="1">Kategori 1</option> <option value="2">Kategori 2</option> <option value="3">Kategori 3</option> </select> </td> </tr> <tr> <td>Alt Kategori</td> <td width="1">:</td> <td> <div id="sonuc_goruntulenen_yer"></div> </td> </tr> </table> </body> </html> |
index.php sayfasını açıklayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<table> <tr> <td>Kategori</td> <td width="1">:</td> <td><select name="kategori" onChange="islemyap(this.value)"> <option>Bir Kategori Secin</option> <option value="1">Kategori 1</option> <option value="2">Kategori 2</option> <option value="3">Kategori 3</option> </select> </td> </tr> <tr> <td>Alt Kategori</td> <td width="1">:</td> <td> <div id="sonuc_goruntulenen_yer"></div> </td> </tr> </table> |
Burada yapmış oldugumuz sadece katagoriler ve alt katagorilerin gösterileceği yeri hazırladık.Katagori bölümüne bir list menü ve içerisine 3 tane katagori yerleştirdik ve value(isim)lerini verdik sırasıyla 1-2-3 diye ve alt katagoriye geçtik oraya sadece sonuc_gotuntulene_yer yazdık bunun nedenini birazdan açıklayacağım.
|
1 2 3 4 5 6 |
<script type="text/javascript" src="ajax/eyceks.js"></script> <script type="text/javascript"> function islemyap(deger){ JXP(0, "sonuc_goruntulenen_yer", "islem.php", "kategori="+deger); } </script> |
burada ki script işlemiyle islem.php sayfasındaki işlemi çektik ve yukarıda dediğim sonuc_goruntulenen_yer içine atadık ve işi bitirdik.
|
1 |
<script type="text/javascript" src="ajax/eyceks.js"></script> |
bu satırda ise yüklemiş olduğumuz ayarları yüklüyoruz.
islem.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php $kategori = $_POST["kategori"]; if(!$kategori) echo "<font color=red>Kategori Secin</font>"; switch($kategori){ case "1": echo '<select name="altkategori"> <option>Kategori 1in alt kategorisi 1</option> <option>Kategori 1in alt kategorisi 2</option> <option>Kategori 1in alt kategorisi 3</option> </select>'; break; case "2": echo '<select name="altkategori"> <option>Kategori 2in alt kategorisi 1</option> <option>Kategori 2in alt kategorisi 2</option> <option>Kategori 2in alt kategorisi 3</option> </select>'; break; case "3": echo '<select name="altkategori"> <option>Kategori 3in alt kategorisi 1</option> <option>Kategori 3in alt kategorisi 2</option> <option>Kategori 3in alt kategorisi 3</option> </select>'; break; default: echo "<font color=red>Kategori Secin</font>"; break; } ?> |
burada yapmış oldumuz işlemler index.php sayfasından seçilen katagoriye göre burada işlem yaptırdık.Yukarıda dediğim gibi value(isim)lerini yazdırmıştık.Burada da oradan seçilen katagori case fonksiyonu ile birbirine yakalattırdık.Eğer Katagori 1 seçilirse case 1 e ait olanlar görülecek eğer 2 ise case 2 e ait olanlar gözükecektir.
Dosyayı upload ederek sizlerle paylaşmak istedim.İndir.
Örnek 2
Değişik şekillerde ajax örnekleri buldum sizlerle paylaşmak istedim.
içerisinde boyutlandırma,tema değiştirme,içerik kısıtlama ve daha fazla bir çok örnek var içerisinde bunları açıklamak istemedim yok fazla oldukları için birini anlatsam diğerlerinide anlatmak zorunda kalacaktım çünkü içerikler birbirne bağlı oldugu için uzun olurdu.
Değişik Örneklerle Devam Edeceğiz.
-
Html 5 jquery slider 10 Şık ve ilgi çekici tasarım html 5 uyumlu.Aşağıdaki ön izleme olarak örnek’ten baka bilirsiniz. -
Html 5 jquery slider 9 Şık ve ilgi çekici tasarım html 5 uyumlu. Aşağıdaki ön izleme olarak örnek’ten baka
About Author
smtdncr
27,09,1991 Rize Dpğumluyum İlkokulu 3 değişik okulda okudum ilk sene Çayeli Fikri Keçeli İlköğretim Okulu 2-3-4-5 Rize Şevket Yardımcı İlköğretim Okulu 6-7-8 Rize Çaykur İlköğretim Okulunda okudum lise hayatımın tamamını Rize Mimar Sinan İMKB(Hasan Kemal Yardımcı Lisesi yeni adı) Lisesinde Okudum. Üniversiteyide inş güzel bir okulda okuyup hayat okuluna tek başıma devam etmeye başlarım.