Web Uygulamalarında Yeni Bir Yaklaşım AJAX

1. Web Uygulamalarında Yeni Bir YaklaşımAJAX Eser SAHiLLiOĞLU.tr Alan Adı Yönetimi_______________________09 Şubat 2006 | AB’06shl@sahillioglu.net | www.sahillioglu.net

2. İçindekiler • AJAX Nedir? • AJAX, … • Çalışma Mantığı • Kullanılan Teknolojiler • Klasik Uygulamalarla Karşılaştırılması • Destekleyen Browserlar • Avantajları • Dezavantajları • Hızlı Yayılmasının Nedenleri • Örnek Kodlar • Örnek Uygulamalar • Yanlışlar – Dikkat Edilmesi Gereken Noktalar • Kullanılabileceği Yerler • Kullanılmaması Gereken Yerler • Kütüphaneler Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

3. AJAX Nedir? • Asynchronous JavaScript and XML sözcüklerinin baş harflerinden oluşan AJAX, HTML/XHTML, XML, CSS, DOM, JS ve XMLHTTPREQUEST nesnesi ve sunucu taraflı dillerden birisinin (PHP,ASP, JSP vb.) beraber kullanılarak masaüstü yazılımlara benzer etkileşimli web arayüzleri/uygulamaları hazırlamak için kullanılmakta olan bir web geliştirme yaklaşımıdır. Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

4. AJAX, • bir kısaltmadır. • bir dil değildir. • bir program veya bir geliştirme ortamı değildir. • bir web geliştirme yaklaşımı ve konseptidir. • bir çok web teknolojisinin beraber ve ortak kullanımıdır. • etkileşimli zengin web arayüzleri oluşturulmasını sağlar. • Gmail’in veya Google’ın icadı değildir. • indirilebilir bir şey değildir. • XMLHTTPREQUEST’in diğer adı değildir. • XMLHTTPREQUEST ile aynı şey değildir. Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

5. Çalışma Mantığı • İşlem, sayfa yüklendiğinde veya kullanıcı tarafından tetiklenir. • XMLHTTPREQUEST nesnesi oluşturulur. • Sunucu tarafına arka planda istek gönderilir. • Sunucu taraflı işlemler yapılır. • İşlenen veri kullanıcı tarafına XML veya metin olarak gönderilir. • Veri işlenerek sayfaya yerleştirilir. Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

6. Kullanılan Teknolojiler • Bir AJAX uygulamasını tetiklemek için HTML ve JS • XMLHTTPREQUEST nesnesini oluşturmak için JS • Arkaplanda sunucuya asenkron HTTP talebi göndermek için XMLHTTPREQUEST nesnesi • Sunucu tarafında yapılması istenen işlem için PHP, ASP/.NET, JSP vb. bir dil • Sunucu tarafında üretilen çıktıyı almak için gene XMLHTTPREQUEST nesnesi • Elde edilen bu çıktıyı işlemek ve sayfada istenen alana yerleştirmek için DOM, DHTML ve JS • İşlenmiş çıktının renk, çizgi vb. şekilsel sunumu için de (X)HTML ve CSS kullanılmaktadır. Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

7. Şekil 1: Klasik web uygulamaları ile AJAX yaklaşımının karşılaştırılması [http://www.adaptivepath.com/publications/essays/archives/000385.php] Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

8. Şekil 2: Klasik web uygulamalarındaki senkron etkileşimle AJAX yaklaşımındaki asenkron etkileşim[http://www.adaptivepath.com/publications/essays/archives/000385.php] Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

9. Destekleyen Browserlar Bir browserın AJAX uygulamalarını desteklemesi için en temel şart javascript destekliyor olmasıdır. Bundan sonra ikinci şart ise XMLHTTPREQUEST nesnesini desteklemesidir. • Mozilla Firefox 1.0 ve üstü • Netscape 7.1 ve üstü • Konqueror • Microsoft Internet Explorer 4.0 ve üstü • Opera 7.6 ve üstü • Apple Safari 1.2 ve üstü Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

10. Avantajları - 1 • HTTP talepleri arka planda gidip geldiği için sayfa yeniden yeniden yüklenmiyor. • Sadece gerekli veriler gidip gelmekte olduğundan hızlı yükleme ve yüksek miktarda bandwith tasarrufu saglar • Etkileşimli web arayüzleri hazırlanmasına olanak tanır. • Masaüstü uygulama deneyimlerine heryerden erişilebilirlik avantajını ekler. • Bir çok web calışanının bildiği teknolojilerin birarada kullanılması nedeniyle öğrenmesi ve uygulaması kolaydır. • Hazır ve açık kaynak kodlu gelişmiş kütüphanelere sahiptir. • Özellikle etkileşim amaçlı kullanılan ancak her yerde standart olmayan ve ek olarak gereksiz bw harcatan FLASH ve JAVA yerine daha az kaynak tüketen tasarruflu bir yaklaşımdır. Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

11. Avantajları - 2 • Hızlı uygulama geliştirme imkanı verir. • Sorunlu IFRAME ve POPUP kullanımına son vermektedir. • CSS, DOM, XHTML, JS benzeri teknolojilerin kullanımına ve gelişmesine katkıda bulunmaktadır. • Güvenli olmayan JS denetimleri yerine sunucu tabanlı basit ve hızlı girdi denetim mekanizmaları • Kullanıcı için zaman tasarrufu - sayfa yenilememe • Back/forward/bookmark butonlarının calışmaması [dezavantajlar kısmında ayrıca bahsedilecek] • Anlık ve tek seferlik üretilen içeriğin arama motorlarınca indekslenememesi Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

12. Dezavantajları • Yüksek miktarlarda işlemci ve bellek kullanan browserların daha da fazla kaynak tüketmesi • Olmazsa olmaz kabul edilen back, forward ve bookmark fonksiyonlarının işlememesi[örnek:http://wp-plugins.net/] • Yukarıdaki fonksiyonları/butonları calıştırmak için ek kütüphaneler ve kodlar=daha çok kaynak tüketimi • İçeriğin arama motorları tarafından taranamaması • XHR, IE’de bir activeX nesnesidir ve activeX bazı kurumlarda engellendiğinden AJAX uygulamalarıçalıştırılamayabiliyor. • JS desteklemeyen veya JS destegi kapalı olan browserlara/kullanıcılara yönelik ek çalışmalar yapmak zorunda olmak • Sayfaların kaydedilememesi, düzgün çıktı alamama • Kullanıcılar hakkında, kendi izinleri haricinde oldukça fazla bilginin toplanabilmesine olanak saglaması Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

13. Hızlı Yayılmasının Nedenleri • Öğrenmesi kolay, uygulaması hızlı • Cezbedici çünkü etkileşimli • Açık kaynak JS ve AJAX kütüphaneleri • Google/Yahoo tarafından geniş çapta ve ciddi biçimde kullanılması [ Gmail/Flickr/Maps ] • Neredeyse tüm browserlar tarafından desteklenmesi • Yüksek hız, bw tasarrufu, web geliştiricilerin sorunlarına çözüm • Heryerden erişilebilir, masaüstüne benzer web uygulamaları ve yazılımlarına olanak tanıması Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

14. Örnek Kodlar - 1 Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

15. Örnek Kodlar - 2 Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

16. XHR Nesne Methodları Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

17. XHR Nesne Özellikleri Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

18. Örnek Uygulamalar • Gmail | Maps -- maps.google.com | gmail.com • Login • http://www.jamesdam.com/ajax_login/login.html • Backbase • http://projects.backbase.com/RUI/shop.html • http://www.backbase.com/demos/travel • Kayıt Formu • http://defter.sahillioglu.net/filearea/demos/xmlhttprequest-ajax/php-integration/ • Whois • http://defter.sahillioglu.net/filearea/demos/xmlhttprequest-ajax-whois/ • Kartvizit Uygulaması • http://www.baekdal.com/x/xmlhttprequest • http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest • İl - İlçe seçimi • http://defter.sahillioglu.net/filearea/demos/xmlhttprequest_selects • http://pleann.satt.web.tr/sub.php?do=newuser • Multi Select Box • http://developer.apple.com/internet/webcontent/XMLHttpRequestExample/example.html • AJAX ve SOAP ile Amazon’da Şarkıcı Arama • http://defter.sahillioglu.net/filearea/demos/ajax-php-soap-wsdl-pear-amazon/ Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

19. -Yanlışlar-Dikkat Edilmesi Gereken Noktalar • AJAX’ı sadece kullanmış olmak için kullanmak • Kullanıcı alışkanlıklarını gözardı etmek(bookmark,back, forward, print, send to friend vb.) [http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps] • Geribildirimlerde bulunmamak • Çok uzun, büyük ve kötü kodlar (Ör: XML/DOM işlemleri+sunucu işlemleri) • Normal uygulamalardaki hızı verememek • Güvenlik gerektiren yerlerde kuralları ihlal etmek: SSL, md5 vb. • Yetersiz testler: browser, JS, platform testleri • Javascript’i kapalı veya JS desteği olmayan browser kullananları unutmak • Kullanıcıların %11’lik kesimi JS kullanmıyor! • Kullanıcılarıyeni birşeyler öğrenmeye zorlamak/bütünsel değişiklikler • Kullanıcının o anki odak noktasını kırmak • Aynı anda çok fazla HTTP talebi göndermek ve almak Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

20. Kullanılabileceği Yerler • Formlar: Etkileşimli ve değişen yapıdaki karmaşık formlar • Hiyerarşik yapılar • Sadece ihtiyaç duyulan veriyiçekme ve sunucuyu yormama prensibi • Sürekli yenileme gerektiren sayfalar • Oylama uygulamaları • Girdi mekanizmaları ve içerik filtreleme • İpuçları ve yardım metinleri Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

21. Kullanılmaması Gereken Yerler • Basit formlar • Aramalar • Basit menüler • Çok büyük veri gönderilen ve alınan işlemler Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

22. Kütüphaneler JAVA • AjaxAnywhere • AjaxTags • DWR • Echo2 • Guise • jsquery • jWic • JSON-RPC • JRP • ICEfaces • PushletsASP • Ajax.NET Professional • Aspects of Ajax • Atlas (Microsoft ASP.NET 2.0 AJAX platform) • Bitkraft • BorgWorX Ajax.NET • AutoSuggestBox • PowerWEB LiveControls for ASP.NET • MonoRail • ComfortASP.NET • OutPost • DotNetRemoting PHP • HTML_Ajax • XOAD • xajax • sajax • pajax • Class Ajax • Pajaj • symfony • CakePHP Web Uygulamalarında Yeni Bir Yaklaşım: AJAX

23. Teşekkürler... Eser SAHiLLiOĞLU.tr Alan Adı Yönetimi_______________________09 Şubat 2006 | AB’06shl@sahillioglu.net | www.sahillioglu.net Web Uygulamalarında Yeni Bir Yaklaşım: AJAX