Web Arayüz Programlama — Ünite 7 Soru-Cevap

Senkron yapıda programlama, işlemlerin sıralı olarak gerçekleştiği programlama modelidir. Kodlar yukarıdan aşağıya doğru, adım adım çalıştırılır. Bir sonraki satıra geçmek için mevcut komutun tamamlanması gerekir. Senkron programlamada uzun süren bir komut olduğu zaman, diğer komutlar işletilemeyecek, kullanıcıya cevap veremeyecektir.

Asenkron yapılarda ise, uzun sürmesi beklenen görevler başlatılır ve bitmesi beklemeden başka komutlar çalıştırılmaya devam eder. Uzun zaman alacak görevler tamamlandıktan sonra sonucu döner ve program onucu işler. Böylelikle program, uzun süren işlemler nedeniyle duraklamaz.

JavaScript single thread olarak adlandırılan, tek iş parçacığında çalışan bir dildir

JavaScript kodları senkron yapıda, yukarıdan aşağıya doğru adım adım çalıştırır. Single thread dil olsa da Modern JavaScript sürümleri ile gerektiği durumlarda asenkron çalıştırılabimektedir. 

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.

Programlama dillerinde, callback fonksiyonlar, bir fonksiyonun çalışmasını bitirdikten sonra başka bir fonksiyonun çağrılmasını sağlar. Türkçesi geri arama olan 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, çıktıyı üreten ve kullanan arasında bir anlaşmadır diyebiliriz. Çı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.

Promise nesnesi içerisine başarılı ve başarısız durumlar için geri dönecek resolve() ve reject() argümanları verilir.

Çı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. 

Çıktıyı kullanan kod bloğu, işlem tamamlanana kadar bekler.  Yapılan işlemde hata varsa .catch() ile yakalanabilir. 

Promise nesnesi incelendiğinde PromiseState, promise nesnesinin durumunu gösterir.

Promise nesnesi incelendiğinde, PromiseResult promise durumuna göre cevap döner.

JavaScript ile Promise yapısının kullanımını kolaylaştırmak için ES8 ile duyurulan async/await yapısı kullanılabilir.

Bir fonksiyonu promise nesnesi dönen yapıya dönüştürmek için async anahtar kelimesi kullanılabilir.

JavaScript, kodların yürütme bağlantılarını yönetmek için Call Stack yapısını kullanır.

Call stack komutları, LIFO (last in first out- son giren ilk çıkar) ilkesine göre tutar.

Hyper Text Transfer Protocol (Hiper Metin Transfer Protokolü) dosyaları ağ üzerinden transfer ederek görüntülenmesini sağlar.

HTTP durum kodları, tarayıcıdan yapılan isteğe sunucunun verdiği cevabın durumunu gösteren üç basamaklı sayılardır. Bu sayılar sunucu ve tarayıcı arasındaki iletişimin sonucunu gösteren kodlardır.

HTTP iletişiminde sunucu ve istemci arasındaki bağlantı sağlanırken, yapılacak eylemi belirtmek için HTTP metotları kullanılır.

En sık kullanılanlar GET ve POST metotlarıdır. 

GET metodu sunucudan veri talep etmek için kullanılır.

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.

Sunucuda veri oluşturmak için POST metodu kullanılır.

Kullanıcı ve sunucu arasındaki iletişim API (Application Programming Interface - Uygulama Programlama Arayüzü) olarak adlandırılan metotlar aracılığıyla sağlanır.

API, iki uygulamanın birbiriyle konuşmasını sağlayan bir yazılım aracıdır.

API 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, JSON, XML gibi standartlaşmış veri transfer formatları kullanılır.

Verileri tanımlamak için XML(Extensible Markup Language-Genişletilebilir İşaretleme Dili) kullanılır.

JSON, verileri yapılandırmak için minimal ve okunabilir bir formattır. İngilizce JavaScript Object Notation kelimelerinin kısaltmasıdır.

JSON 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.

AJAX, HTML, XMLHttpRequest, JavaScript, Document Object Model (DOM) gibi teknolojileri birleştiren bir tekniktir. “Asynchronous JavaScript and XML” kelimelerinin baş harflerinden oluşur.

Ajax kullanıcıların tüm sayfayı yeniden yükleme zahmetine girmeden verileri değiştirmesine ve görüntülemesine yardımcı olan bir özelliktir.

Ajax’ın çalışma süreci aşağıdaki gibidir;
• Web sayfasında bir olay meydana gelir. (Örneğin, herhangi bir bilgi güncellenir veya bir düğmeye
tıklanır.)
• JavaScript, bir XMLHttpRequest nesnesi oluşturur.
• Oluşturulan XMLHttpRequest nesnesi, sunucuya bir istek gönderir.
• Sunucu, isteğe işleyerek yanıt verir.
• JavaScript yanıtı analiz eder ve uygun işlem yapılır. Web sayfası, verilerin kaydedilip kaydedilmeyeceğine veya görüntüleneceğine karar verir.

Web sayfalarında Ajax kullanmanın sağladığı bazı avantajlar aşağıdaki gibidir;
• Hızlı cevap bant genişliği kullanımı
• Veriler sunucudan alınana kadar kullanıcı engellenmez.
• Sunucuya yalnızca önemli verileri göndermemizi sağlar.
• Uygulamayı etkileşimli ve daha hızlı hâle getirir.

Ajax’ın web sayfalarında sağladığı avantajların yanında aşağıdakiler gibi dezavantajları JavaScript’e bağımlılığı, güvenlik sorunları ve geliştirme yapılırken hata ayıklama zorluğudur. 

XMLHttpRequest, JavaScript’te HTTP istekleri yapılmasına izin veren yerleşik bir tarayıcı nesnesidir.

XMLHTTPRequest sayesinde dosyalar yüklenmesi, indirilmesi gibi birçok işlem yapılabilir.

XHR nesnesinin open() ve send() metotlarını kullanarak sunucuya istek gönderilebilir.

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.

Fetch API, ağ isteklerini gerçekleştirebilmek için fetch() metodunu kullanır.