1. Web Uygulamalarında Yeni Bir Yaklaşım AJAX Eser SAHiLLiOĞLU .tr Alan Adı Yönetimi _______________________ 09 Ş ubat 2006 | AB’06 shl @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
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.
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 konsept id ir . b ir çok web teknoloj isinin 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.
5. Çalışma Mantığı İşlem, s ayfa 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 k ullan ıcı taraf ı na XML veya metin olarak g ö nderilir. Veri i ş lenerek sayfaya yerle ş tirilir.
6. Kullanılan Teknolojiler Bir AJAX uygulamasını tetiklemek için HTML ve JS XMLHTTPREQUEST nesnesini oluşturmak için JS Arka planda 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.
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.p hp]
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]
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 destekl emesidir. 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ü
10. Avantajları - 1 HTTP talepleri arka planda gidip geldiği için sayfa yeniden yeniden yüklenmiyor. S adece gerekli veriler gidip gelmekte olduğundan hızlı yükleme ve yüksek miktarda bandwith tasarrufu saglar Etk ile ş imli web aray ü zleri hazırlanmasına olanak tanır. Masa ü st ü uygulama deneyimleri ne heryerden eri ş ilebilirlik avantajını ekler . B ir ç ok web cal ışa n ını n bildi ğ i teknolojilerin birarada kullan ı lmas ı nedeniyle öğ renmesi ve uygulamas ı kolay dır. H az ı r ve açık kaynak kodlu gelişmiş k ütü phaneler e sahiptir. Özellikle e tkile ş 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 şı m dır.
11. Avantajlar ı - 2 H ı z lı uygulama geli ş tirme imkan ı verir. Sorunlu IFRAME ve POPUP kullanımına son ve rmektedir. CSS, DOM, XHTML, JS benzeri teknolojilerin kullan ımı na ve geli ş mesine katk ı da bulun maktadı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
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 [ ö r nek : http://wp-plugins.net/] Yukar ı daki fonksiyonlar ı /butonlar ı cal ış t ı rmak i ç in ek k ütü phane ler 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ıla mayabiliyor. 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 haricind e olduk ç a fazla bilginin toplanabilmesine olanak saglamas ı
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 ın a çö z ü m Heryerden eri ş ilebilir , masa ü st ü ne benzer web uygulamalar ı ve yaz ılı mlar ı na olanak tan ıması
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 Ş ar kıcı Arama http://defter.sahillioglu.net/filearea/demos/ajax-php-soap-wsdl-pear-amazon/
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ü ko d lar ( Ö 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 ır mak Ayn ı anda ç ok fazla HTTP talebi g ö ndermek ve almak
20. Kullanılabileceği Yerler Formlar: Etkile ş imli ve de ğ i ş en yap ı dak i karma şı k formlar Hiyerar ş ik yap ı lar S adece ihtiya ç duyulan veri yi ç ekme ve sunucuyu yormama prensibi S ü rekli yenileme gerektiren sayfalar Oylama uygulamalar ı Girdi mekanizmalar ı ve i ç erik filtreleme İ pu ç lar ı ve yard ı m metinleri
21. Kullanılmaması Gereken Yerler B asit formlar Aramalar Basit men ü ler Ç ok b üyük veri g ö nder ilen ve alınan işlemler
22. K ütü phaneler PHP HTML_Ajax XOAD xajax sajax pajax Class Ajax Pajaj symfony CakePHP JAVA AjaxAnywhere AjaxTags DWR Echo2 Guise jsquery jWic JSON-RPC JRP ICEfaces Pushlets ASP 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
23. Eser SAHiLLiOĞLU .tr Alan Adı Yönetimi _______________________ 09 Ş ubat 2006 | AB’06 shl @sahillioglu.net | www.sahillioglu.net Teşekkürler...
![Şekil 1: Klasik web uygulamaları ile AJAX yaklaşımının karşılaştırılması [ http://www.adaptivepath.com/publications/essays/archives/000385.p hp]](https://image.slidesharecdn.com/ajax416/85/Ajax-7-320.jpg)
![Ş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]](https://image.slidesharecdn.com/ajax416/85/Ajax-8-320.jpg)
![Avantajlar ı - 2 H ı z lı uygulama geli ş tirme imkan ı verir. Sorunlu IFRAME ve POPUP kullanımına son ve rmektedir. CSS, DOM, XHTML, JS benzeri teknolojilerin kullan ımı na ve geli ş mesine katk ı da bulun maktadı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](https://image.slidesharecdn.com/ajax416/85/Ajax-11-320.jpg)
![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 [ ö r nek : http://wp-plugins.net/] Yukar ı daki fonksiyonlar ı /butonlar ı cal ış t ı rmak i ç in ek k ütü phane ler 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ıla mayabiliyor. 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 haricind e olduk ç a fazla bilginin toplanabilmesine olanak saglamas ı](https://image.slidesharecdn.com/ajax416/85/Ajax-12-320.jpg)
![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 ın a çö z ü m Heryerden eri ş ilebilir , masa ü st ü ne benzer web uygulamalar ı ve yaz ılı mlar ı na olanak tan ıması](https://image.slidesharecdn.com/ajax416/85/Ajax-13-320.jpg)
![- 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ü ko d lar ( Ö 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 ır mak Ayn ı anda ç ok fazla HTTP talebi g ö ndermek ve almak](https://image.slidesharecdn.com/ajax416/85/Ajax-19-320.jpg)
