xmlhttprequest
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 İ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 Http İstemleri
AJAX Http İstemleri kullanır
Geleneksel JavaScript kodlarında, eğer sunucudaki bir veritabanından
yada dosyadan bilgi almak isterseniz, yada sunucuya kullanıcı girdisini
göndermek isterseniz bir HTML formu oluşturup GET yada POST
yöntemlerinden biriyle sunucuyla veri alışverişi yaparsınız. Kullanıcı
veriyi göndermek/almak için formdaki "Gönder" vb. bir düğmeyi tıklar,
sunucunun yanıtını bekler ve sonuçları yeni yüklenen sayfada görür.
Kullanıcının her veri girişinde sunucunun yeni bir sayfa
oluşturmasını beklemesi nedeniyle geleneksel internet uygulamaları daha
yavaş çalışabilir ve daha az kullanıcı dostu olabilir.
Ajax ile, Javascript kodunuz XMLHttpRequest nesnesini kullanarak doğrudan sunucuyla iletişime geçer.