BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 7: JavaScript Sunucu İletişimi
Giriş
Günümüzde web teknolojileri incelendiğinde, hayatın her alanına temas eden web uygulamaları geliştirildiğini, birçok alandaki uygulamaların kişiselleştirildiğini görmekteyiz. Bu özellikler JavaScript’in sunucu ile olan iletişiminin gelişmesi sayesinde mümkün olmuştur.
Asenkron JavaScript
Program içerisindeki komutların sıra ile veya birbirinden bağımsız çalıştırılabilmesi, iki farklı programlama türünün gelişmesine neden olmuştur.
Senkron ve Asenkron Programlama
Senkron programlama, işlemlerin sıralı olarak gerçekleştiği programlama modelidir. Kodlar yukarıdan aşağıya doğru çalıştırılır. Bir sonraki satıra geçmek için mevcut komutun tamamlanması gerekir.
Asenkron yapılarda ise, uzun sürmesi beklenen görevler başlatılır bitmesi beklemeden başka komutlar çalıştırılmaya devam eder. Uzun süren görevin çalışması bittikten sonra sonucu geri döner. Böylelikle program, uzun süren işlemler nedeniyle duraklamaz.
JavaScript Nasıl Çalışır?
JavaScript, tek iş parçacığında çalışan bir dildir ve single thread olarak adlandırılır. Senkron yapıda, kodlar yukarıdan aşağıya doğru adım adım çalıştırılır. Single thread bir dil olmasına rağmen, Modern JavaScript sürümleri ile gerektiği durumlarda asenkron çalıştırılabilmektedir.
JavaScript asenkron yapıda komutları çalıştırırken, komutun sonucunu beklemeye yarayan 3 farklı yönteme sahiptir. Bunlar; callback, promise ve async/await yöntemleridir.
Callback (Geri Arama)
Callback fonksiyonlar, bir fonksiyonun çalışmasını bitirdikten sonra başka bir fonksiyonun çağrılmasını sağlar. Callback fonksiyonlar, kendilerini çağıracak fonksiyonlara argüman olarak verilirler.
Web uygulamalarında, sayfadaki bir dosyanın yüklenmesinin beklendiği veya sunucudan veri transferi yapılacak bölümlerde callback fonksiyonların kullanılmasında fayda vardır.
Promise
JavaScript, asenkron işlemlerde kullanılmak üzere promise nesnesi üretebilir. Promise, çıktıyı üreten ve kullanan arasında bir anlaşmadır denilebilir. Çıktıyı üreten asenkron işlem, hemen bir cevap dönmek yerine, işlem tamamlandıktan sonra bir cevap döneceğine dair söz verir. İşlem tamamlandıktan sonra, başarılı veya başarısız olduğunu belirten sonucu döner. Çıktıyı kullanan kod bloğu gelen cevaba göre yapması gereken işlemleri yapar. Çıktıyı üreten, sunucudan kullanıcıları alan fonksiyon, çıktıyı
kullanan ise sunucudan gelen verileri, tabloya yazdıran fonksiyon olarak düşünülebilir.
Yeni bir promise nesnesi oluşturmak için new anahtar kelimesi kullanılır. Promise nesnesi içerisine başarılı ve başarısız durumlar için geri dönecek resolve() ve reject() argümanları verilir. Geri dönüş argümanlarının içerisine, sonuç ile birlikte döndürülecek verilerde eklenebilir. Veri sunucudan talep edilen verilerde olabilir.
Çıktıyı kullanan kod bloğu, işlem tamamlanana kadar bekler. Sonuç başarılı ise .then() ile yazılan komutlar çalıştırılır. Yapılan işlemde hata varsa .catch() ile yakalanabilir.
Promise nesnesi, PromiseState ve Promiseresult adında iki özelliğe sahip olduğu görülür. PromiseState, promise nesnesinin durumunu gösterir. PromiseResult ise promise durumuna göre cevap döner.
Async/Await
Bir fonksiyonu promise nesnesi dönen yapıya dönüştürmek için async anahtar kelimesi kullanılabilir. Fonksiyon tanımlarken kullanılan function anahtar kelimesinden önce async anahtar kelimesini yazmak, fonksiyonun asenkron bir fonksiyon olacağını ve promise nesnesi döndüreceğini belirtir.
Async ile promise nesnesine dönüştürülen fonksiyonlarda da .then() kullanılabilir. Bazı durumlarda birbiri ardına çalıştırılması gereken asenkron işlemler olabilir. Bunlar iç içe geçmiş .then() komutları ile yapılabilir.
Async fonksiyonlarda kullanılabilen await anahtar kelimesi, promise nesnesi ile kullanılabilen .then() yerine kullanılabilir. Await, async fonksiyon içindeki asenkron komutun tamamlanmasını bekler ve bir sonraki satıra geçmesini engeller.
Call Stack (Çağrı Yığını)
JavaScript, kodların yürütme bağlantılarını yönetmek için Call Stack yapısını kullanır. Call Stack, fonksiyonların yürütülme bağlantılarını tutan bir kutu olarak düşünülebilir. Bir fonksiyon çağrıldığında Call Stack üzerine yazılır. Fonksiyon tamamlanmadan başka bir fonksiyonu çağırıyorsa Javascript bu fonksiyonu da Call Stack’e yazar.
Call stack komutları, LIFO (last in first out-son giren ilk çıkar) ilkesine göre tutar. Fonksiyon tamamlandığında Call Stack’ten kaldırılır bir önceki fonksiyondan devam eder.
HTTP Protokolü
HTTP (Hyper Text Transfer Protocol-Hiper Metin Transfer Protokolü) dosyaları ağ üzerinden transfer ederek görüntülenmesini sağlar. HTTP protokolü dosyaların aktarılması için kural ve yöntemleri gösterir. Tarayıcılar, web sitesine ait alan adının yazılmasından sonra, HTTP protokolünü aktif eder. Sunucu ise bu protokol ile gelen isteğe göre cevap döner.
HTTP Durum Kodları
HTTP durum kodları, tarayıcıdan yapılan isteğe sunucunun verdiği cevabın durumunu gösteren üç basamaklı sayılardır. Yapılan istek başarılı şekilde döndürülürse “200 Success” veya istenilen sayfa mevcut değilse “404 Not found” kodları istek cevabıyla birlikte döndürülür.
HTTP Metotları
HTTP iletişiminde sunucu ve istemci arasındaki bağlantı sağlanırken, yapılacak eylemi belirtmek için HTTP metotları kullanılır. Bu eylem, sunucudan veri talep etme, veri silme veya veri ekleme olabilir. En sık kullanılanlar GET ve POST metotlarıdır. Bunların yanında DELETE, PUT, CONNECT, OPTIONS, HEAD, TRACE ve PATCH metotları da vardır.
GET metodu, sunucudan veri talep etmek için kullanılır. Sunucuya yapılan isteğin sorgu parametreleri URL ile birlikte gönderilir. İstek verisinde gövde alanı yoktur. Yapılan istek tarayıcı tarafından önbelleğe alınabilir. Bu sayede tarayıcının Geri butonu kullanılarak önceki sayfaya geri dönülebilir. İsteğe ait tüm bilgiler URL içerisinde olduğu için kullanıcı tarayıcıya yer imi olarak ekleyebilir. GET kullanırken, güvenlik için dikkat edilmesi gereken konularda vardır. İstek ile ilgili tüm parametreler URL içerisinden okunabildiği için hassas verilerle çalışırken kullanılmamalıdır. Kullanılabilecek URL in uzunluk kısıtlaması vardır. Yalnızca veri talep etmek için kullanılmalıdır. Veri girişi yapmak için kullanılmamalıdır.
POST metodu, sunucuda veri oluşturmak için kullanılır. İstek ile gönderilecek parametreler hem URL’e hem de isteğin gövde kısmına eklenebilir. Tarayıcılar gövde kısmına eklenen verileri önbelleğe almaz. Bu yüzden POST isteği yapan sayfaya, Geri tuşu ile ulaşılmak istenildiğinde, tarayıcı uyarı verecektir. Yine aynı sebepten kullanıcı bu sayfaları yer imlerine ekleyemez. Body kısmına eklenen verilerde, veri uzunluğu için kısıtlama yoktur.
İstemci ve Sunucu İletişimi
Statik web sayfaları, kullanıcıdan farklı bilgiler almak gerektiğinde veya kullanıcıya özel sayfalar gösterilmek istenildiğinde yetersiz kalmaktadır. Dinamik web sayfaları, aynı sayfa düzenini ve tasarımını korurken, kullanıcılara özel içerikleri görüntüler.
API (Application Programming Interface-Uygulama Programlama Arayüzü) olarak adlandırılan metotlar ile kullanıcı ve sunucu arasındaki iletişim sağlanır. API, iki uygulamanın birbiriyle konuşmasını sağlayan bir yazılım aracıdır. Web sayfalarının yanında, sunucuyla iletişim kurması gereken bilgisayar uygulamaları, cep telefonu programları veya IoT cihazlarda kullanılır.
API ile iki uygulama arasında veri taşırken, XML, JSON gibi standartlaşmış veri transfer formatları kullanılır.
XML-Genişletilebilir İşaretleme Dili
XML (Extensible Markup Language-Genişletilebilir İşaretleme Dili) verileri tanımlamak için kullanılır. XML,
W3C tarafından standartlaştırılmıştır. HTML’e benzer ancak önceden tanımlanmış etiketleri yoktur. Temel XML biçimi standartlaştırıldığından, yerel olarak veya internet üzerinden sistemler veya platformlar arasında paylaşır veya iletirseniz, alıcı standartlaştırılmış XML söz dizimi sayesinde verileri yine ayrıştırılabilir.
JSON-JavaScript Obje Gösterimi
JSON, verileri yapılandırmak için minimal ve okunabilir bir formattır. JavaScript’in geliştiricisi ECMA tarafından, XML’e alternatif olarak geliştirilmiştir. Modern Web uygulamalarında, kolay kullanımı, insan gözüyle kolay okunabilmesi ve programlama dilleri tarafından çözümlenirken daha az kaynak kullanımı nedeniyle XML’e göre daha yaygın kullanılmaya başlamıştır.
JSON ile formatlanan veriler anahtar ve değer terimleriyle oluşturulur. Veri bloklarında anahtar adları tekil olmak zorundadır. Birden fazla aynı ada sahip anahtar olamaz. Değerler String, Number, Boolean, Array, Nesne ve Null veri tiplerinden oluşabilir.
Ajax
AJAX, HTML, XMLHttpRequest, JavaScript, DOM (Document Object Model) gibi teknolojileri birleştiren bir tekniktir. Ajax bir programlama dili değil, kullanıcıların tüm sayfayı yeniden yüklemeden verileri değiştirmesine ve görüntülemesine yardımcı olan bir özelliktir. Kullanıcı, sayfayı kullanmaya devam ederken arka planda çalışabilir. Sayfa yenilemeye gerek kalmadan sayfayı güncelleyebilir.
İsminden verileri sadece XML türünde transfer edebileceği anlaşılsa da her türlü veriyi transfer edebilir.
Ajax’ın çalışma süreci web sayfasında bir olayın meydana gelmesi, JavaScript’in bir XMLHttpRequest nesnesi oluşturması, oluşturulan XMLHttpRequest nesnesinin, sunucuya bir istek göndermesi, sunucunun isteğe işleyerek yanıt vermesi, JavaScript’in yanıtı analiz etmesi ve uygun işlemi yapması, web sayfasının, verilerin kaydedilip kaydedilmeyeceğine veya görüntüleneceğine karar vermesi şeklinde gerçekleşir.
Hızlı cevap bant genişliği kullanımı, verilerin sunucudan alınana kadar kullanıcıyı engellenmemesi, sunucuya yalnızca önemli verilerin gönderilmesini sağlaması, uygulamayı etkileşimli ve daha hızlı hâle getirmesi Ajax kullanımının sağladığı avantajlardan bazılarıdır.
Bunun yanı sıra JavaScript’e bağımlılık, güvenlik sorunları ve geliştirme yapılırken hata ayıklamanın zorluğu ise Ajax kullanımının dezavantajlarındandır.
Ajax kullanımının, en çok kullanıldığı yerlerden birisi belki de Google arama motorunun ana sayfasıdır.
XMLHttpRequest Nesnesi
XMLHttpRequest, JavaScript’te HTTP istekleri yapılmasına izin veren yerleşik bir tarayıcı nesnesidir. Adında “XML” kelimesi bulunmasına rağmen her türlü veri formatı ile çalışabilmektedir. XMLHTTPRequest
sayesinde dosyalar yüklenmesi, indirilmesi gibi birçok işlem yapılabilir. Tüm modern tarayıcılar tarafından desteklenir.
XHR’ı kullanmak için ilk olarak bir XHR nesnesi oluşturulur. Callback fonksiyonu ile XHR nesnesinin, yüklemesi tamamlandıktan sonra yapılacak işlemler belirtilir. Callback fonksiyonu tamamlandıktan sonra, open() metodu kullanılarak, istek yaparken kullanılacak HTTP metodu ve URL adresi tanımlanır. send() metodu ile istek gönderilir. Web sayfası yenilenmeden, sadece ilgili alan güncellenecektir.
Fetch API
Günümüzde XMLHttpRequest’in yerini Fetch API aldı denilebilir. Her iki yöntemde ağ istekleri yapmak için kullanılabilse de Fetch API, daha temiz ve kolay bir söz dizimi sağlar. Geliştiricileri Callback’lerden uzak tutmaya yardımcı olan Promise tabanlıdır.
Fetch API, ağ isteklerini gerçekleştirebilmek için fetch() metodunu kullanır. Bu metot, isteğin yanıtını almak için kullanılabilecek bir Promise döndürür. fetch() metodu yapılacak isteğin özelliklerini belirtmek için birçok argüman alır. Bu argümanlardan sadece istek yapılacak URL adresi zorunludur.