Adım Adım Ajax Uygulaması - IRC Forum , Forum Sitesi , Forumlar , Sohbet , Chat , IRCDFORUM
Adım Adım Ajax Uygulaması
22 Şubat 2019, 18:09 #1
Bu form elemanı her tuşa basılışta (onKeyup) validate() fonksiyonunu çağırmaktadır.
2. XMLHttpRequest Nesnesi Oluşturuluyor ve Ayarlanıyor
validate() Fonksiyonu çağrıldığında bir XMLHttpRequest nesnesi oluşturur ve oluşturulan nesne özelliklerini kullanır. Burada IE tarayıcılarının standart dışı nesne oluşturma sınıfları (class) kullanmasından dolayı; tarayıcının hangi Ajax nesnesini desteklediği (Yani bir anlamda IE olup olmadığı) test edilir. Aynı test rutinleri içinde nesne oluşturma işlemi de yapılır. Oluşturulan nesne adı "req" olarak belirlenmiştir (you can named object as your head ). open fonksiyonu)ile nesne ile sunucu taraflı (server side) uygulama arasında köprü kurulur. Bu fonksiyon için üç parametre tanımlanmaktadır bunlar: Değişken iletim metodu (GET veya POST), uygulama adresi ve iletişimin asenkron olup olmayacağına ilişkin parametredir (true veya false). Son parametre genelde "true" olarak kullanılır, bu durumda asenkron çalışma olacak, yani sunucu taraflı uygulama sonucu hazırlayıp yollarken ve hatta tüm veri transferi gerçekleşinceye kadar geçen sürede tarayıcı diğer fonksiyonlarını ve süreçlerini takip edebilecek. Bu durum onreadystatechange ile kontrol edilen bir süreçtir. onreadystatechange bir tür olay gibi de algılanabilir.
onreadystatechange tüm transferler tamamlandığında callback fonksiyonunu çağırır. Bu fonksiyon ile işlenebilecek verilere sahip nesne ele alınacaktır.
3. XMLHttpRequest Nesnesi İstekte Bulunuyor
req.send(null); komutu ile, sunucu taraflı uygulamaya istekte bulunulmuş olur. Eğer GET metodu kullanılıyorsa bu komutta parametre olarak "null" veya boşluk kullanılabilir. Aşağıdaki örnekte "null" yerine (id) parametresi URL ile birlikte gönderilmektedir. Burada kullanılan escape fonksiyonu parametre olarak gönderilecek verinin "URL encode" edilmesini sağlar.
Burada unutulmaması gereken GET metodu kullanıldığında tarayıcı veya bası sunucu taraflı uygulamaların kısıtlı bilgi gönderip almasıdır. Bazı durumlarda POST yönteminin tercih edilmesi gerekir. Bu durumlarda Content-Type tanımı yapılması gereklidir. Bu "header" bilgisi XMLHttpRequest nesnesi yardımıyla aşağıdaki şekilde iletilebilir:
4. İstek Sunucuda Değerlendiriliyor.
2. Maddede url değişkeni ile belirtilen sunucu taraflı uygulama XMLHttpRequest nesnesinin isteği olan işlemleri yapar. Bu işlemler gereksinim duyulan süreçleri tamamlar ve geriye bir değer döndürür. Bu adımlarda beklenilen text alana girilen değerin geçerli olup olmadığının testidir. Bu nedenle var url = "validate?id=" + escape(idField.value); ile sunucudan bilgi istenmektedir.
Burada sunucunun standartlara uygun bir XML çıktı oluşturması beklenir. Bu çıktı isteğe karşı yanıt olarak iletilecektir.
Bazı uygulamalarda XML dönüş yerine text veya HTML dönüş beklenebilir. Bu durumda aşağıda açıklandığı gibi dönüş bilgisini isteyen fonksiyon da değişecektir.
5. XMLHttpRequest Nesnesi callback() Fonksiyonunu Çağırıyor ve Veriyi İşliyor
XMLHttpRequest nesnesi; readyState özelliği değiştiği anda callback() fonksiyonunu çağırmak üzere düzenlenmiştir. callback()çağrıldığında readyState 4 değerini alırsa, XMLHttpRequest işlemini tamamladı demektir. Eğer status değeri de 200 ise bağlantı işlemin başarıyla yapıldığı anlamı çıkar.
Örnekteki XML içerik message elementi içinde yer alan valid veya invalid değerini taşımaktadır.
parseMessages() fonksiyonu XML veriyi işleyecek bir fonksiyon olarak yazılmıştır. setMessage() fonksiyonu ise tanımlanmış olan HTML DOM elementini güncelleyecek (içeriğini veya değerini değiştirecek) olan fonksiyondur.
(Greg Murray, June 9, 2005 "http://java.sun.com/developer/technicalArticles/J2EE/AJAX/")
Ajax imkansızı başardı AntepLi Spor Haberleri 0 07 Mart 2019 11:02
Ajax'a giriş! diAbLErO Ajax 0 22 Şubat 2019 18:02
Ajax nedir? diAbLErO Ajax 0 22 Şubat 2019 17:58
Beşiktaş-Kabataş Üniversitesi için ilk adım atıldı IF-Haber Spor Haberleri 0 23 Mart 2016 21:12
Ajax: F.Bahçe güçlü Violence Fenerbahçe 0 29 Ağustos 2015 12:48