SlideShare a Scribd company logo
1 of 14
 Ajax nedir?
 Ajax Mimarisi
 Ajax’ın Tarihçesi
 Ajax Nerelerde Kullanılır?
 Ajax’ a Neden İhtiyaç Vardır?
 Erişilebilirlik
 Avantajları Ve Dezavantajları
İŞLENECEK KONULAR
AJAX NEDİR?
 AJAX İnternet sayfalarında JavaScript ve
XMLHttpRequest kullanımı ile etkileşimli
uygulamalar yaratan tekniktir.
AJAX MİMARİSİ
 Klasik bir istemci-sunucu
uygulamasında kullanıcı
tarafından yapılan her işlem
sunucuya HTTP Request
olarak gönderilir, yorumlanır
ve veriler işletildikten sonra
sonuçlar istemciye
gönderilir. Bu da çok büyük
bir ağ trafiğine neden olur.
AJAX MİMARİSİ
 AJAX kullanıldığında ise istekler HTTP REQUEST
yerine XMLHTTP REQUEST olarak gönderilir.
Burada sunucu ve istemci arasında taşınan veriler
sıkıştırılmış XML formatındadır. Bu sıkıştırılmış yapı
istemci tarafında açılır böylece sunucu ve istemci
arasındaki bant genişliği boş yere işgal edilmemiş
olur.
 AJAX ile sağlanan en büyük özellik de PARÇALI
GÜNCELLEME’ dir. Bu sayede bütün bir sayfanın
istemci ile sunucu arasında gidip gelmesiyle doğan
ağ trafiğinin önüne geçilmiş olur.
AJAX’IN TARİHÇESİ
 AJAX ile Amerika yeniden keşfedilmemiştir. Yıllardır kullanılan
JAVASCRIPT ve XML birleştirilerek yeni bir uygulama deseni
oluşturulmuştur. Bu düşünce önce JSP geliştiricileri tarafından ortaya
atılmış daha sonra da Microsoft tarafından desteklenmiştir.
 Önceleri Microsoft bunu ATLAS olarak adlandırmış daha sonra da
ASP.NET AJAX olarak desteğini sürdürmüştür. Burada Javascript
denilince farklı tarayıcılarda farklı sonuçların ortaya çıkması gibi bir durum
söz konusudur.
AJAX NEREDE KULLANILIR?
 Ajax hemen hemen web’de birçok şey için kullanılır. Bunun bir
örneği ise Google Maps. Kullanıcı sayfadaki haritaya tıklayıp resmi
çektiği an, bütün sayfa yeniden yüklenmeden bilgi anında gösterilir.
 Bütün bunlar Ajax’ın senkron özelliği tarafından yapılmaktadır.
 Ajax aynı zamanda Gmail’de de kullanılmaktadır. Bilginin
yüklenmesi için sayfanın tamamının yeniden yüklenmesi
gerekmemektedir. Yeni posta geldiğinde, hemen otomatik olarak
gelen kutusuna eklenir. Bu kullanıcının yenileme düğmesine sürekli
olarak tıklaması ihtiyacını önler.
 Google Translate'de de Ajax kullanmaktadır. Kullanıcılar bir yazıyı
bir dilden başka bir dile tercüme etmek için yazmaya başladıkları
zaman, Ajax hemen diğer dildeki anlamı aynı sayfada gösterir.
AJAX’A NEDEN İHTİYAÇ VARDIR?
 Günümüzde web standartları sürekli olarak gelişim
göstermektedir. Tasarım çizgilerinden tutun, arka planda yapılan
uygulamalara kadar sürekli bir güncelleme ve yeni trend ile karşı
karşıya kalıyoruz.
 Web 2.0 ile anlık olarak veri erişimine şahit olduk. Kullanıcıların
oluşturduğu büyük içerikli networkler, anlık etkileşim imkânı veren
çeşitli siteler bu trendi oluşturdu. Friendfeed, Facebook, Twitter
bu sistemlere en büyük örnektir.
 Günümüz koşullarında kullanıcı bir network üzerinde, anlık olarak
kullanıcılarla iletişime geçmek, onlarla çeşitli eylemlerde
bulunmak ister. Bunu da AJAX karşılamaktadır.
ERİŞİLEBİLİRLİK
 Web tasarımcıları, web
tarayıcısının bütün sayfayı
renderlemesine gerek kalmaksızın
veri işlemeye olanak tanındığı
durumlarda bazen web sayfasının
sadece belli kısımları için Ajax'ı
kullanabilir.
 Ajax kullanamayanlar ise bütün
bir sayfayı yenilemeye ve
yüklemeye devam edebilmeli;
geliştiriciler ise Ajax'ı destekleyen
tarayıcılarla daha teknik olanaklar
sunsa da -bütün erişilebilirlik
konuları dâhil olmak üzere- Ajax
içermeyen ortamlardaki
kullanıcıların yeteneklerini
kısıtlamamalıdır.
AJAX’IN AVANTAJ VE DEZAVANTAJLARI
AVANTAJLARI
 AJAX' web sayfalarına kullanım kolaylığı ve etkileşim özelliği
getirmiştir.
 AJAX ile birlikte sayfadaki verinin tamamının sunucuya gidip
gelmesine gerek olmaz, sadece küçük parçalar gidip gelir. Bu
anlamda band genişliğinin daha efektif kullanımını sağlar.
 AJAX programlama dillerinden bağımsız bir teknolojidir;
Java, PHP ya da .NET ortamlarında aynı şekilde kullanılabilir.
 Asenkron çalışma: Yani AJAX sayesinde client, sunucudan
gelen veri akışının bitmesini beklemeksizin işlemlerine devam
edebilir.
DEZAVANTAJLARI
 Browser uyumsuzluğu. AJAX ile yazdığınız kod IE'de çok güzel
çalışırken Firefox'ta tamamen işlevsiz olabiliyor ya da tam tersi Ama
geliştirilen AJAX kütüphanelerini kullanarak (prototype gibi) bu sorunu
belirli bir düzeye indirebilirsiniz.
 Geri tuşu ya da sayfayı imlere ekleme gibi tarayıcı özelliklerini
kullanamamamız.
 URL kopyala, yapıştırma: Genel kullanıcı alışkanlığı site içeriğini URL
olarak saklamak istiyorsa ve site AJAX ile geliştirilmişse bunu yapması
mümkün olamaz.
 Arama motorları web sayfasındaki içeriğe göre indeksleme yapar. Ajax
ile sunduğumuz içerik ise arama motorları tarafından görüntülenemez.
DEZAVANTAJLARI
 AJAX ile geliştirilmiş içerikleri tarayıcıların yazdırması sorun
olabiliyor.
 AJAX uyumlu olmayan browserları kullananlar ya da
Javascripti engellemiş kullanıcılar AJAX ile sunduğunuz
içeriğe ulaşamazlar.
 Sayfanın tepkisiz görünebilmesi. AJAX ile gelen-giden veri
miktarı büyükse yada client-server arası bağlantı hızı yavaş
ise, kullanıcı işlem yapmasına rağmen browser'dan beklediği
tepkiyi alamaz, sayfada hiçbir değişiklik olmadığı için sitenin
kitlendiği izlenimine kapılabilir. Bunu mutlaka uyarı
mesajlarıyla engellemek gerekir.
DERSİMİZ BİTTİ !
TEŞEKKÜRLER

More Related Content

What's hot

ASP.Net MVC ile Web Uygulamaları - 1(Giriş)
ASP.Net MVC ile Web Uygulamaları - 1(Giriş)ASP.Net MVC ile Web Uygulamaları - 1(Giriş)
ASP.Net MVC ile Web Uygulamaları - 1(Giriş)İbrahim ATAY
 
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)İbrahim ATAY
 
ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)İbrahim ATAY
 
ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)
ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)
ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)İbrahim ATAY
 
ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)
ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)
ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)İbrahim ATAY
 
Mvc 4 Eğitim Sunusu
Mvc 4 Eğitim SunusuMvc 4 Eğitim Sunusu
Mvc 4 Eğitim SunusuFatih Coşkun
 
ASP.Net MVC ile Web Uygulamaları -3(Routing)
ASP.Net MVC ile Web Uygulamaları -3(Routing)ASP.Net MVC ile Web Uygulamaları -3(Routing)
ASP.Net MVC ile Web Uygulamaları -3(Routing)İbrahim ATAY
 
ASP.Net MVC 4 ile Web Uygulaması Geliştirmek
ASP.Net MVC 4 ile Web Uygulaması GeliştirmekASP.Net MVC 4 ile Web Uygulaması Geliştirmek
ASP.Net MVC 4 ile Web Uygulaması Geliştirmekİbrahim ATAY
 

What's hot (9)

ASP.Net MVC ile Web Uygulamaları - 1(Giriş)
ASP.Net MVC ile Web Uygulamaları - 1(Giriş)ASP.Net MVC ile Web Uygulamaları - 1(Giriş)
ASP.Net MVC ile Web Uygulamaları - 1(Giriş)
 
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
ASP.Net MVC ile Web Uygulamaları -14(Spark ViewEngine)
 
ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)ASP.Net MVC ile Web Uygulamaları -16(JQuery)
ASP.Net MVC ile Web Uygulamaları -16(JQuery)
 
ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)
ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)
ASP.Net MVC ile Web Uygulamaları -12(Test Drive Developmet)
 
ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)
ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)
ASP.Net MVC ile Web Uygulamaları -17(MVCContrib)
 
Mvc 4 Eğitim Sunusu
Mvc 4 Eğitim SunusuMvc 4 Eğitim Sunusu
Mvc 4 Eğitim Sunusu
 
ASP.Net MVC ile Web Uygulamaları -3(Routing)
ASP.Net MVC ile Web Uygulamaları -3(Routing)ASP.Net MVC ile Web Uygulamaları -3(Routing)
ASP.Net MVC ile Web Uygulamaları -3(Routing)
 
ASP.Net MVC 4 ile Web Uygulaması Geliştirmek
ASP.Net MVC 4 ile Web Uygulaması GeliştirmekASP.Net MVC 4 ile Web Uygulaması Geliştirmek
ASP.Net MVC 4 ile Web Uygulaması Geliştirmek
 
Apache Maven
Apache MavenApache Maven
Apache Maven
 

Similar to sunu (Ajax-1)

Internet programcılığı-i
Internet programcılığı-iInternet programcılığı-i
Internet programcılığı-iemre61
 
WEB SERVİCE
WEB SERVİCE WEB SERVİCE
WEB SERVİCE AliMETN
 
Spring Web Service
Spring Web ServiceSpring Web Service
Spring Web Servicedasgin
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web AppHatice Ergon
 
Final project presentation
Final project presentationFinal project presentation
Final project presentationbattleground35
 
Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?Omer Buyukoglu
 
Gelecegin Gelistiricileri Icin PHP Programlama Dili ve Oneriler
Gelecegin Gelistiricileri Icin PHP Programlama Dili ve OnerilerGelecegin Gelistiricileri Icin PHP Programlama Dili ve Oneriler
Gelecegin Gelistiricileri Icin PHP Programlama Dili ve OnerilerMustafa Ileri
 
ASP.NET MVC'den ASP.NET Core MVC'ye Geçiş Süreci
ASP.NET MVC'den ASP.NET Core MVC'ye Geçiş SüreciASP.NET MVC'den ASP.NET Core MVC'ye Geçiş Süreci
ASP.NET MVC'den ASP.NET Core MVC'ye Geçiş SüreciSinan Bozkuş
 
Silverlight ve Sharepoint 2010
Silverlight ve Sharepoint 2010Silverlight ve Sharepoint 2010
Silverlight ve Sharepoint 2010Evren Ayan
 

Similar to sunu (Ajax-1) (20)

Ajax
AjaxAjax
Ajax
 
Internet programcılığı-i
Internet programcılığı-iInternet programcılığı-i
Internet programcılığı-i
 
Ajax
AjaxAjax
Ajax
 
Sunu1
Sunu1Sunu1
Sunu1
 
WEB SERVİCE
WEB SERVİCE WEB SERVİCE
WEB SERVİCE
 
Web Socket
Web SocketWeb Socket
Web Socket
 
Spring Web Service
Spring Web ServiceSpring Web Service
Spring Web Service
 
Uni stay 2017-2018
Uni stay 2017-2018 Uni stay 2017-2018
Uni stay 2017-2018
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Node js giriş (intro)
Node js giriş (intro)Node js giriş (intro)
Node js giriş (intro)
 
Final project presentation
Final project presentationFinal project presentation
Final project presentation
 
Asp.net ajax
Asp.net ajaxAsp.net ajax
Asp.net ajax
 
Web service
Web serviceWeb service
Web service
 
JavaScript Sunumu
JavaScript SunumuJavaScript Sunumu
JavaScript Sunumu
 
Flex blaze ds
Flex blaze dsFlex blaze ds
Flex blaze ds
 
Primeface
PrimefacePrimeface
Primeface
 
Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?Neden Backbone.js'ten AngularJS'e Geçtik?
Neden Backbone.js'ten AngularJS'e Geçtik?
 
Gelecegin Gelistiricileri Icin PHP Programlama Dili ve Oneriler
Gelecegin Gelistiricileri Icin PHP Programlama Dili ve OnerilerGelecegin Gelistiricileri Icin PHP Programlama Dili ve Oneriler
Gelecegin Gelistiricileri Icin PHP Programlama Dili ve Oneriler
 
ASP.NET MVC'den ASP.NET Core MVC'ye Geçiş Süreci
ASP.NET MVC'den ASP.NET Core MVC'ye Geçiş SüreciASP.NET MVC'den ASP.NET Core MVC'ye Geçiş Süreci
ASP.NET MVC'den ASP.NET Core MVC'ye Geçiş Süreci
 
Silverlight ve Sharepoint 2010
Silverlight ve Sharepoint 2010Silverlight ve Sharepoint 2010
Silverlight ve Sharepoint 2010
 

More from Merve Aydın

More from Merve Aydın (12)

Asp.net 3
Asp.net 3Asp.net 3
Asp.net 3
 
sunu (Asp.net 2
sunu (Asp.net 2sunu (Asp.net 2
sunu (Asp.net 2
 
sunu (Asp-2)
sunu (Asp-2)sunu (Asp-2)
sunu (Asp-2)
 
sunu (Ajax-2)
sunu (Ajax-2)sunu (Ajax-2)
sunu (Ajax-2)
 
sunu (Dreamweaver-2)
sunu (Dreamweaver-2)sunu (Dreamweaver-2)
sunu (Dreamweaver-2)
 
sunu (Asp-1)
sunu (Asp-1)sunu (Asp-1)
sunu (Asp-1)
 
sunu (Dreamweaver-1)
sunu (Dreamweaver-1)sunu (Dreamweaver-1)
sunu (Dreamweaver-1)
 
sunu (Frontpage-2)
sunu (Frontpage-2)sunu (Frontpage-2)
sunu (Frontpage-2)
 
sunu (Frontpage-1)
sunu (Frontpage-1)sunu (Frontpage-1)
sunu (Frontpage-1)
 
sunu (Html-2)
sunu (Html-2)sunu (Html-2)
sunu (Html-2)
 
sunu (Html-1)
sunu (Html-1)sunu (Html-1)
sunu (Html-1)
 
Sunu (Internet)
Sunu (Internet)Sunu (Internet)
Sunu (Internet)
 

sunu (Ajax-1)

  • 1.
  • 2.  Ajax nedir?  Ajax Mimarisi  Ajax’ın Tarihçesi  Ajax Nerelerde Kullanılır?  Ajax’ a Neden İhtiyaç Vardır?  Erişilebilirlik  Avantajları Ve Dezavantajları İŞLENECEK KONULAR
  • 3. AJAX NEDİR?  AJAX İnternet sayfalarında JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan tekniktir.
  • 4. AJAX MİMARİSİ  Klasik bir istemci-sunucu uygulamasında kullanıcı tarafından yapılan her işlem sunucuya HTTP Request olarak gönderilir, yorumlanır ve veriler işletildikten sonra sonuçlar istemciye gönderilir. Bu da çok büyük bir ağ trafiğine neden olur.
  • 5. AJAX MİMARİSİ  AJAX kullanıldığında ise istekler HTTP REQUEST yerine XMLHTTP REQUEST olarak gönderilir. Burada sunucu ve istemci arasında taşınan veriler sıkıştırılmış XML formatındadır. Bu sıkıştırılmış yapı istemci tarafında açılır böylece sunucu ve istemci arasındaki bant genişliği boş yere işgal edilmemiş olur.  AJAX ile sağlanan en büyük özellik de PARÇALI GÜNCELLEME’ dir. Bu sayede bütün bir sayfanın istemci ile sunucu arasında gidip gelmesiyle doğan ağ trafiğinin önüne geçilmiş olur.
  • 6. AJAX’IN TARİHÇESİ  AJAX ile Amerika yeniden keşfedilmemiştir. Yıllardır kullanılan JAVASCRIPT ve XML birleştirilerek yeni bir uygulama deseni oluşturulmuştur. Bu düşünce önce JSP geliştiricileri tarafından ortaya atılmış daha sonra da Microsoft tarafından desteklenmiştir.  Önceleri Microsoft bunu ATLAS olarak adlandırmış daha sonra da ASP.NET AJAX olarak desteğini sürdürmüştür. Burada Javascript denilince farklı tarayıcılarda farklı sonuçların ortaya çıkması gibi bir durum söz konusudur.
  • 7. AJAX NEREDE KULLANILIR?  Ajax hemen hemen web’de birçok şey için kullanılır. Bunun bir örneği ise Google Maps. Kullanıcı sayfadaki haritaya tıklayıp resmi çektiği an, bütün sayfa yeniden yüklenmeden bilgi anında gösterilir.  Bütün bunlar Ajax’ın senkron özelliği tarafından yapılmaktadır.  Ajax aynı zamanda Gmail’de de kullanılmaktadır. Bilginin yüklenmesi için sayfanın tamamının yeniden yüklenmesi gerekmemektedir. Yeni posta geldiğinde, hemen otomatik olarak gelen kutusuna eklenir. Bu kullanıcının yenileme düğmesine sürekli olarak tıklaması ihtiyacını önler.  Google Translate'de de Ajax kullanmaktadır. Kullanıcılar bir yazıyı bir dilden başka bir dile tercüme etmek için yazmaya başladıkları zaman, Ajax hemen diğer dildeki anlamı aynı sayfada gösterir.
  • 8. AJAX’A NEDEN İHTİYAÇ VARDIR?  Günümüzde web standartları sürekli olarak gelişim göstermektedir. Tasarım çizgilerinden tutun, arka planda yapılan uygulamalara kadar sürekli bir güncelleme ve yeni trend ile karşı karşıya kalıyoruz.  Web 2.0 ile anlık olarak veri erişimine şahit olduk. Kullanıcıların oluşturduğu büyük içerikli networkler, anlık etkileşim imkânı veren çeşitli siteler bu trendi oluşturdu. Friendfeed, Facebook, Twitter bu sistemlere en büyük örnektir.  Günümüz koşullarında kullanıcı bir network üzerinde, anlık olarak kullanıcılarla iletişime geçmek, onlarla çeşitli eylemlerde bulunmak ister. Bunu da AJAX karşılamaktadır.
  • 9. ERİŞİLEBİLİRLİK  Web tasarımcıları, web tarayıcısının bütün sayfayı renderlemesine gerek kalmaksızın veri işlemeye olanak tanındığı durumlarda bazen web sayfasının sadece belli kısımları için Ajax'ı kullanabilir.  Ajax kullanamayanlar ise bütün bir sayfayı yenilemeye ve yüklemeye devam edebilmeli; geliştiriciler ise Ajax'ı destekleyen tarayıcılarla daha teknik olanaklar sunsa da -bütün erişilebilirlik konuları dâhil olmak üzere- Ajax içermeyen ortamlardaki kullanıcıların yeteneklerini kısıtlamamalıdır.
  • 10. AJAX’IN AVANTAJ VE DEZAVANTAJLARI
  • 11. AVANTAJLARI  AJAX' web sayfalarına kullanım kolaylığı ve etkileşim özelliği getirmiştir.  AJAX ile birlikte sayfadaki verinin tamamının sunucuya gidip gelmesine gerek olmaz, sadece küçük parçalar gidip gelir. Bu anlamda band genişliğinin daha efektif kullanımını sağlar.  AJAX programlama dillerinden bağımsız bir teknolojidir; Java, PHP ya da .NET ortamlarında aynı şekilde kullanılabilir.  Asenkron çalışma: Yani AJAX sayesinde client, sunucudan gelen veri akışının bitmesini beklemeksizin işlemlerine devam edebilir.
  • 12. DEZAVANTAJLARI  Browser uyumsuzluğu. AJAX ile yazdığınız kod IE'de çok güzel çalışırken Firefox'ta tamamen işlevsiz olabiliyor ya da tam tersi Ama geliştirilen AJAX kütüphanelerini kullanarak (prototype gibi) bu sorunu belirli bir düzeye indirebilirsiniz.  Geri tuşu ya da sayfayı imlere ekleme gibi tarayıcı özelliklerini kullanamamamız.  URL kopyala, yapıştırma: Genel kullanıcı alışkanlığı site içeriğini URL olarak saklamak istiyorsa ve site AJAX ile geliştirilmişse bunu yapması mümkün olamaz.  Arama motorları web sayfasındaki içeriğe göre indeksleme yapar. Ajax ile sunduğumuz içerik ise arama motorları tarafından görüntülenemez.
  • 13. DEZAVANTAJLARI  AJAX ile geliştirilmiş içerikleri tarayıcıların yazdırması sorun olabiliyor.  AJAX uyumlu olmayan browserları kullananlar ya da Javascripti engellemiş kullanıcılar AJAX ile sunduğunuz içeriğe ulaşamazlar.  Sayfanın tepkisiz görünebilmesi. AJAX ile gelen-giden veri miktarı büyükse yada client-server arası bağlantı hızı yavaş ise, kullanıcı işlem yapmasına rağmen browser'dan beklediği tepkiyi alamaz, sayfada hiçbir değişiklik olmadığı için sitenin kitlendiği izlenimine kapılabilir. Bunu mutlaka uyarı mesajlarıyla engellemek gerekir.