Javascript dili son yıllarda yaygın bir ön yüz(front end) geliştirme aracı haline gelmiştir. Farklı problemlere çözüm üreten kütüphanelerin sayısı gün geçtikçe artmakta ve “front end” geliştiricilerin işi de epeyce kolaylaşmaktadır. Bazı durumlarda hazır kütüphanelerin dışına çıkıp kontrolü elimize almak istediğimizde Javascript kodları ile birebir haşır neşir olmak durumunda kalırız.
Javascript ile ağırlıklı olarak DOM (Document Object Model) işlemeleri yapılmaktadır. DOM Türkçe olarak “Belge Nesnesi Modeli” şeklinde çevirilebilir. Sunucu tarafından oluşturulup(render) bize gönderilen internet sayfasını bir belge olarak düşünebiliriz. Bu internet sayfasında gördüğümüz yazı, resim, video, form gibi elemanları birer nesne olarak düşünebiliriz. Javascript dili ile bu nesneler üzerinde işlemler yapabilmekteyiz. Bunun yanı sıra Javascript dili bize sunucu ile iletişim kurmamızı da sağlamaktadır. Sunucudaki bir URL üzerinden veri istemek veya sunucuya veri göndermek mümkündür.
Javascript bize, sunucuya düz metin (plain text) verisi göndermenin yanı sıra bir de dosya gönderme imkanı sunmaktadır. Bu yazının konusu da dosyaların sunucuya gönderimi sırasında işlemleri takip etmektir.
Javascript ile arka plandan sunucu ile bilgi alışverişi yapmak istediğimizde XMLHttpRequest nesnesini kullanırız. XMLHttpRequest nesnesi ile;
- Sayfa yenilemeden bilgi alışverişi yapmak mümkündür.
- Veri alışverişi arka planda gerçekleşir.
- Veri alışverişi asenkron veya senkron olarak belirlenebilir.
Sunucuya bir istek göndermek için XMLHttpRequest nesnesinin Open() ve Send() metodları kullanılır.
- open() Metodu: Gönderilen isteğin(request) türünü(GET, POST), URL adresini ve isteğin asenkron olup olmadığını belirler.
- send() Metodu: İsteği sunucuya gönderir.
XMLHttpRequest nesnesinin çalışma prensibini incelemek için bir kaç örnek vermeden geçmek olmaz.
Örnek: Senkron çalışan yöntem
Senkron yöntemlerde open() metodunun son parametresi false olarak belirlenir ve send() metodu ile istek sunucuya gönderilir. İşlem asenkron olmadığından istek gönderildikten sonra cevap gelene kadar beklenir. Yani send() metodundan sonra gelen kodlar çalışmaz.
Örnek: Asenkron çalışan yöntem
Asnekron isteklerde open() medodunun son parametresi true olarak belirlenir ve request nesnesinin readystatechange olayına(event) bir metod bağlanır. Sunucudan cevap geldiğinde bu metod tetiklenir. İsteği göndermek için send() metodu çalıştırılır. İşlem asenkron olduğundan send() metodu çalıştırıldıktan sonra başka kod satırları varsa onlar da çalıştırılır.
Bu örneklerde sunucudan GET metodu ile düz metin sonucu almak için uygulamalar yaptık.
Asıl konumuz, bir dosyanın bir isteğe(request) eklenerek sunucuya gönderilmesi işlemidir. Dosyalar büyük veriler olabildiği için, uzak sunucuya gönderilmeleri sırasında takip grektiren bir durum durum ortaya çıkmaktadır. İsteğin sunucuya ulaşıp ulaşmadığı, dosyanın bir T anında yüzde kaçının yüklendiği ve işlemin tamamlanıp tamamlanmadığı gibi durumların kullanıcıya bildirilerek belirsizliğin ortadan kaldırılması gerekmektedir.
Dosya gönderim işlemleri sırasında XMLHttpRequest nesnesinin upload özelliğinden faydalanırız. upload özelliği üzerindeki olaylar(events) sayesinde yükleme işlemlerini takip edebiliriz.
upload özelliğinin;
- loadstart olayı: yükleme işlemi başladığında tetiklenir.
- progress olayı: yükleme işlemi sırasında her giden byte grubu sunucuya aktarıldığında tetiklenir.
- load olayı: yükleme işlemi başarıyla tamamlandığında tetiklenir.
request.open() metodu çalıştırıldıktan sonra setRequestHeader metodu ile gönderilecek olan isteğe(request) dosya bilgileri eklenir. Dosya bilgileri, file tipindeki input elementinden alınır. send() metodu ile istek POST tipinde sunucuya gönderilir. Burada send netodunun parametre alan çeşidi kullanılmış ve parametre olarak POST edilecek bilgi send metoduna eklenmiştir.
Dosya yükleme sırasında işlem takibini konsola yazarak gerçekleştirdim. Siz isterseniz HTML elementlerine yazarak gerçekleştirebilirsiniz. Hatta daha önceki yazılarımdan birinde css aracılığı ile durum çubuğu yapmayı işlemiştim. Dosya upload işlemini bu yöntemle bir durum çubuğuna bağlamak mümkündür.
Bir sonraki yazıda görüşmek üzere.