ajax
AJAX Puanlama Uygulaması
Kısa Bilgi
Ajax-Tr sitesinde yazıların her birinin altında görebileceğiniz,
yazıyı puanlama mekanizmasının benzerini kendi sitenizdeki; yazılar,
makaleler, haberler gibi her türlü metin içerikli bölüme uygulamak
istiyorsanız AJAX sizin için çok iyi bir çözümdür. Bu yazıda elimden
geldiğince bu mekanizmanın AJAX ile nasıl yapılabileceğini
göstereceğim. Bunu yaparken de prototype.js’nin hazır AJAX
fonksiyonlarından faydalanacağım. Tabii siz isterseniz aynı
uygulamayı kendi kütüphanenizi, eyceks kütüphanesini ya da bir başka
kütüphaneyi kullanarak yazabilirsiniz.
Dosyalar
AJAX ile Eş Zamanlı Form Kontrolü
Kısaca konuyu anlatmak
gerekirse eski usulde form kontrolünde tüm formu doldururdunuz ve
bittiği zaman "Gönder" düğmesine basardınız. Eğer girmiş olduğunuz
kullanıcı adı veya e-posta adresi başkası tarafından kullanılıyorsa
ancak tüm formu doldurup gönderdikten sonra bunu öğrenebilirdiniz.
Oysa ki AJAX ile o an doldurmuş olduğunuz metin kutusunu eş zamanlı
olarak kontrol edilmesini sağlama imkanınız var. Yani kontrolü,
gönder butonuna basmadan önce, form elemanı doldurulduğu anda
yapabileceğinizi kastediyorum. Konuyu anlatırken AJAX-TR için
hazırladığım ve AJAX Tab Kontrol ismini verdiğim örnek uygulamayı
AJAX İle Yerinde Düzenleme
Bu yazımızda AJAX'in
kullanılabileceği yerler arasında özellikle veritabanı
uygulamalarında işimizi oldukça kolaylaştıran Yerinde Düzenleme (Edit
In Place) işlemini inceleyeceğiz. Konuyu daha iyi anlatabilmek için
yine örnek bir uygulama hazırladık. Erhan (eburhan) tarafından
yazılmış olan AJAX Yerinde Düzenleme Betiği'ni size ben anlatacağım.
Neden böyle oldu derseniz, aslında kodları da ben yazacaktım fakat
eburhan'ın zaten önceden kendisi için hazırladığını öğrendim.
Kodlarını biraz düzenleyip gönderdi. Bize de anlatmak kaldı
Önce Mantık
AJAX İle Dosya Göndermek
AJAX’in artık bir çok
farklı alanda kullanılabileceğini eburhan‘ın AJAX Ne Gibi Durumlarda
Kullanılmalı? başlıklı yazısında gördük. Gelin bunlara bir de AJAX
ile sitemize dosya göndermeyi ekleyelim. Bunun nasıl yapıldığını
kendi yazmış olduğum AJAX Göndermeç isimli betik ile anlatmaya
çalışacağım. Konu hakkında biraz daha ipucu vermek gerekirse AJAX
ile dosya göndermenin mümkün olup olmadığını göreceğiz.
AJAX ile dosya göndermenin mantığı
Yukarıda AJAX ile dosya göndermenin mümkün olup olmadığını
göreceğimizi söylemiştim. Şimdi de cevabını veriyorum; malesef
Ajax İle Filtreleme
Dosyalar
Bu uygulamada anasayfayı oluşturan index.php, filitrelemenin
yapıldığı filitrele.php, oyuncuların özelliklerini göstermek
istediğim oyuncu.php dosyası ve eyceks kütüphanesi içindeki dosyalar
(loading.gif , eyceks.js) bulunmaktadır .
Başlıyoruz . . .
İlk olarak uygulamamıza filitrenin nasıl edileceği konusunda karar
vermemiz lazım. Bu uygulamada aynı zamanda ajax'te Dinamik Formları
da kullanmış olacağım. Biliyorsunuz ajax'in diğer bir güzel özelliği
ise Dinamik Formlar'dır. Dinamik formdan kastım isteğimize o anda
AJAX - XML ile Çalışmak
XML’e Giriş başlıklı
yazımda XML’in hangi durumlarda kullanılabileceğini açıklamıştım. Bu
yazıda ise kendi XML belgelerimizi ne şekilde oluşturabileceğimizi
göreceğiz. Ayrıca yazının sonunda XML belgeleriyle çalışabilmeniz
için bir kaç araçtan da bahsedeceğim.
Yazılarımda hep vurguluyorum: XML’de patron sizsiniz. Bilmeniz veya
ezberlemeniz gereken çok fazla özelleşmiş sözcük (KEYWORD) yok.
Fakat yazdığınız belgelerin uygulamalar tarafından sorunsuzca
değerlendirilebilmesi için bazı yazım kurallarını bilmeniz gerekir.
AJAX - XML’e Giriş
Merhabalar Arkadaşlar.
Yazının başlığından da anlayabileceğiniz gibi sizlere XML hakkında
önemli bilgiler veren bir yazı dizisi sunacağım. Bu yazı da serinin
ilk yazısı olacak. AJAX-TR‘ de XML’ in konu olarak yer almasının
temel nedeni AJAX ile uygulama geliştirirken sizlere XML bilgisinin
de lâzım olacak olmasıdır. Ayrıca sadece bu alanda değil uygulama
geliştireceğiniz pek çok alanda XML’den faydalanabilirsiniz. Günden
güne popülerliği artan XML’in neden bu kadar önemli olduğunu
öğrenmek istiyorsanız öncelikle XML NEDİR (NEDEN BU KADAR ÖNEMLİ)
başlıklı yazımı okumanızı tavsiye ederim. Bu yazıda ise XML’in
AJAX Asenkron ve Senkron Meselesi
AJAX’i Anlamak yazısında
AJAX’i tarif ederken açılımının Asenkron Javascript ve XML olduğunu
söylemiştik. Buradaki Javascript’i ve XML’i mutlaka bir yerlerden
duymuşsunuzdur fakat Asenkron neyin nesi hiç merak ettiniz mi? Neden
senkron değil de asenkron? Asenkron ve senkron arasındaki fark
nedir? Birbirlerine karşı avantajları ve dezavantajları var mıdır?
Yazımızda bu sorulara cevap arayacak, AJAX tanımı içerisinde neden
Asenkron kullandığını belirlemeye çalışacağız.
30 saniyede AJAX yazısında da belirtildiği gibi AJAX tekniğinin
30 Saniyede AJAX
Bu yazımla kodlara ilk
adımımızı atacağız ve AJAX'in çekirdeği olan XMLHTTPREQUEST
nesnesinin kullanımını göreceğiz.
Konuyu daha somut olması açısından bir örnekle anlatacağım.
Örneğimizde bir kutu ve buton bulunuyor. Kutuya girilen isim eğer "ajax-tr"
ise sonuç "Tamam" değilse "Hata!" olacaktır.
XMLHTTPREQUEST nesnesini çağırma
Önce en basit haliyle XMLHTTPREQUEST nesnesinin çağırılışını
görelim.
(Birinci yöntem)
PLAIN TEXTPHP:
nesne = new XMLHttpRequest();
AJAX Öneri Kaynak Kodu
AJAX Öneri Örneğinin Kaynak Kodu
Aşağıdaki kaynak kodlar önceki sayfadaki AJAX örneğine aittir.
Kodları kopyalayıp siz de deneyebilirsiniz.
AJAX HTML Sayfası
Bu HTML sayfasıdır. Bu sayfa basit bir HTML formu ve bir JavaScript koduna bağlantı içerir.
AJAX İle Öneri
AJAX Öneri Örneği
Aşağıdaki ajax örneğinde, bir kullanıcı standart bir HTML formuna
veri girerken web sayfasının sunucu ile nasıl iletişim kurabileceğini
göreceğiz.
Bir isim girin
Öneriler:
Örneğin açıklaması - HTML Formu
Yukarıdaki form aşağıdaki HTML koduyla oluşturulmuştur:
AJAX İle Sunucuya İstek Göndermek
Sunucuya bir istek göndermek için open() ve send() işlevlerini kullanırız.
open() işlevi üç parametre alır. İlk parametre istekte bulunurken
hangi yöntemin kullanılacağını belirtir (GET yada POST). İkinci
parametre sunucudaki betiğin url adresini belirtir. Üçüncü parametre ise
isteğin asenkron (eşzamansız) olarak ele alınacağını belirtir. send()
işlevi isteği sunucuya gönderir. Eğer HTML ve (eğer sunucuda PHP dilini
kullanıyorsak) PHP dosyalarının aynı dizinde olduğunu varsayarsak kod
şöyle olacaktır:
AJAX İle XMLHttpRequest Nesnesi
Sunucuya veri göndermeden önce, XMLHttpRequest nesnesinin üç önemli özelliğini açıklamamız gerekiyor.
onreadystatechange özelliği
Sunucuya bir istek gönderilmesinden sonra, sunucudan dönen veriyi alabilecek bir işleve ihtiyacımız var.
onreadystatechange özelliği sunucunun yanıtını işleyecek olan
fonksiyonu tutar. Aşağıdaki kod boş bir fonksiyon tanımlar ve aynı
zamanda onreadystatechange özelliğini ayarlar:
AJAX Tarayıcı Desteği
AJAX 'ın temeli XMLHttpRequest nesnesidir.
Farklı tarayıcılar XMLHttpRequest nesnesini yaratmak için farklı işlevler kullanırlar.
Internet Explorer bir ActiveXObject kullanırken, diğer tarayıcılar XMLHttpRequest adı verilen Javascript nesnesini kullanırlar.
Bu projeyi oluşturmak ve farklı tarayıcılarla başa çıkmak için bir "try - catch" ifadesi kullanacağız.
Önceden oluşturduğumuz "testAjax.htm" dosyamızı XMLHttpRequest nesnesini oluşturan Javascript kodumuzla güncelleyelim.:
AJAX Örneği
Ajax 'ın nasıl çalıştığını anlamak için küçük bir ajax uygulaması oluşturacağız.
İlk önce, username ve time adında iki metin girişi bulunan standart
bir HTML formu oluşturacağız. username alanı kullanıcı tarafından
doldurulacak ve time alanı AJAX tarafından doldurulacak.
Oluşturduğumuz HTML dosyasının adı "testAjax.htm" olsun (bu formda gönder tuşunun olmadığına dikkat edin!):
<html>
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>