IRCDForum.COM - IRC ve mIRC dünyasının forumu!   irc hosting


  IRCDForum.COM - IRC ve mIRC dünyasının forumu! IF - Programlama / Yazılım Javascript Programlama Ajax


Like Tree1Teşekkürler;
  • 1 Post By diAbLErO

Yeni Konu   Cevap Yaz

 
LinkBack Seçenekler Stil
Alt 22 Şubat 2019, 18:09   #1
 
diAbLErO - ait Kullanıcı Resmi (Avatar)
 
Üyelik tarihi: 19 Şubat 2019
Bulunduğu yer: izmir
Mesajlar: 82
WEB Sitesi: www.IRCDForum.com
IRC Sunucusu: irc.teklan.com.tr
İlgi Alanı: C++
Alınan Beğeni: 75
Standart Adım Adım Ajax Uygulaması

1. Olay Gelişiyor ve JavaScript Fonksiyonu Çağrılıyor
JavaScript uygulamaları "olay" (event) sonuçlarına göre çalışırlar. HTML DOM (Document Object Model) elementlerinde çeşitli olay türleri bulunmaktadır. İlk adım olarak bir form elemanındaki onkeyup olayına göre çağrılan JavaScript fonksiyonunu tanımlayalım.

<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validate();">
Bu form elemanı her tuşa basılışta (onKeyup) validate() fonksiyonunu çağırmaktadır.

2. XMLHttpRequest Nesnesi Oluşturuluyor ve Ayarlanıyor
var req;

function validate() {
var idField = document.getElementById("userid");
var url = "validate?id=" + escape(idField.value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
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:

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("id=" + escape(idTextField.value));
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.

function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
// update the HTML DOM based on whether or not message is valid
}
}
}
Tarayıcılar web sayfalarını DOM nesneleri ile görüntüler. JavaScript bu DOM elementlerine erişme ve kontrol etme yeteneğine sahiptir.

Başarılı bir transfer sonucu Javascript elde edilen bu verileri req.responseXML ile kullanabilecek duruma gelir.

Şimdi yanıt olarak alınan aşağıdaki XML çıktısını JavaScript ile nasıl değerlendireceğimize bakalım.

<message>
valid
</message>
Örnekteki XML içerik message elementi içinde yer alan valid veya invalid değerini taşımaktadır.

function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.childNodes[0].nodeValue);
}
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/")

Kaynak people.sabanciuniv.edu/alper/calismalar_ajax.html
pCkOpAt bu mesaja teşekkür etti
 diAbLErO isimli Üye şimdilik offline konumundadır   Alıntı

Yeni Konu   Cevap Yaz

Etiketler
ajax kodları


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
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




Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.