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

index.php sayfasını açıklayalım.

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.

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.

bu satırda ise yüklemiş olduğumuz ayarları yüklüyoruz.

islem.php

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.

İndir.

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.

Yazar: Samet Dinçer

Samet Dinçer sitemizde 13 yazı eklemiş...

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.

Share
  • Hocam merhaba paylaşımlarınız çok beğeniyorum ajax ile menü yapı ile ilgili bir makale yazarsanız çok sevinirim

  • Hocam kolay gelsin güzel paylaşım yalnız ben şu tarz bişey arıyorum
    payment_option-checker
    country_code-checker
    gsm_number-checker

    bu konularda örnek varmı acaba elinizde yardımcı olabilirmisiniz.

  • ibrahim

    Ellerinize sağlık hocam,
    hocam benim size sorum olacak, diyelimki kategori 1 i seçtik ve onun içindeki form elemanlarını işaretledik sonra kategori 1 den vazgeçip kategori 3 ü seçtim ve bununda içindeki form elemanlarını işaretledikten sonra asp ile veritabanıma post ettim, hocam burda takıldığım konu ben 1 ci kategoriyi terk ettikten sonra form elemanlarının temizlenmesi yoksa hem 1 ci kategorideki işaretlediğim form elemanları hemde 3 cü kategorideki işaretlediğim form elemanlarını post etmiş olacağım, bu konuda ne yapmam gerekiyor.
    Saygılar

  • eahmet

    başlangıçtan ileriye doğru incelenebilecek çok güzel bir bir paylaşım. Teşekkürler…

  • paylaşım için teşekkür

  • coşkun gün

    teşekkürler hocam başarılarınızın devamını dilerim

  • Saolun arkadaşlar devam edicek inş ajax çalışmalarımız

  • oldukça güzel ve açıklayıcı olmuş,teşekkürler

  • Teşekkürler. Örneklerinizin devamını bekleriz 🙂

  • teşekkür ederim hocam ajax çok önemli ihmal etmemek lazım:)

  • c.t

    eline saglik cok yararli olmus