Ajax

1,556
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,556
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax

  1. 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. 2. İçindekiler <ul><li>AJAX Nedir ? </li></ul><ul><li>AJAX, … </li></ul><ul><li>Çalışma Mantığı </li></ul><ul><li>Kullanılan Teknolojiler </li></ul><ul><li>Klasik Uygulamalarla Karşılaştırılması </li></ul><ul><li>Destekleyen Browserlar </li></ul><ul><li>Avantajları </li></ul><ul><li>Dezavantajları </li></ul><ul><li>Hızlı Yayılmasının Nedenleri </li></ul><ul><li>Örnek Kodlar </li></ul><ul><li>Örnek Uygulamalar </li></ul><ul><li>Yanlışlar – Dikkat Edilmesi Gereken Noktalar </li></ul><ul><li>Kullanılabileceği Yerler </li></ul><ul><li>Kullanılmaması Gereken Yerler </li></ul><ul><li>K ütü phaneler </li></ul>
  3. 3. AJAX Nedir? <ul><li>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. </li></ul>
  4. 4. AJAX, <ul><li>bir kısaltmadır. </li></ul><ul><li>bir dil değildir. </li></ul><ul><li>bir program veya bir geliştirme ortamı değildir. </li></ul><ul><li>bir web geliştirme yaklaşımı ve konsept id ir . </li></ul><ul><li>b ir çok web teknoloj isinin beraber ve ortak kullan ımıdı r. </li></ul><ul><li>etkileşimli zengin web arayüzleri oluşturulmasını sağlar. </li></ul><ul><li>Gmail’in veya Google’ın icadı değildir. </li></ul><ul><li>indirilebilir bir şey değildir. </li></ul><ul><li>XMLHTTPREQUEST’in diğer adı değildir. </li></ul><ul><li>XMLHTTPREQUEST ile aynı şey değildir. </li></ul>
  5. 5. Çalışma Mantığı <ul><li>İşlem, s ayfa yüklendiğinde veya kullanıcı tarafından tetiklenir. </li></ul><ul><li>XMLHTTPREQUEST nesnesi olu ş turulur. </li></ul><ul><li>Sunucu taraf ı na arka planda istek g ö nderilir. </li></ul><ul><li>Sunucu tarafl ı i ş lemler yapılır. </li></ul><ul><li>İş lenen veri k ullan ıcı taraf ı na XML veya metin olarak g ö nderilir. </li></ul><ul><li>Veri i ş lenerek sayfaya yerle ş tirilir. </li></ul>
  6. 6. Kullanılan Teknolojiler <ul><li>Bir AJAX uygulamasını tetiklemek için HTML ve JS </li></ul><ul><li>XMLHTTPREQUEST nesnesini oluşturmak için JS </li></ul><ul><li>Arka planda sunucuya asenkron HTTP talebi göndermek için XMLHTTPREQUEST nesnesi </li></ul><ul><li>Sunucu tarafında yapılması istenen işlem için PHP, ASP/.NET, JSP vb. bir dil </li></ul><ul><li>Sunucu tarafında üretilen çıktıyı almak için gene XMLHTTPREQUEST nesnesi </li></ul><ul><li>Elde edilen bu çıktıyı işlemek ve sayfada istenen alana yerleştirmek için DOM , DHTML ve JS </li></ul><ul><li>İşlenmiş çıktının renk, çizgi vb. şekilsel sunumu için de (X)HTML ve CSS kullanılmaktadır. </li></ul>
  7. 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. 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. 9. Destekleyen Browserlar <ul><li>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. </li></ul><ul><li>Mozilla Firefox 1.0 ve üstü </li></ul><ul><li>Netscape 7.1 ve üstü </li></ul><ul><li>Konqueror </li></ul><ul><li>Microsoft Internet Explorer 4.0 ve üstü </li></ul><ul><li>Opera 7.6 ve üstü </li></ul><ul><li>Apple Safari 1.2 ve üstü </li></ul>
  10. 10. Avantajları - 1 <ul><li>HTTP talepleri arka planda gidip geldiği için sayfa yeniden yeniden yüklenmiyor. </li></ul><ul><li>S adece gerekli veriler gidip gelmekte olduğundan hızlı yükleme ve yüksek miktarda bandwith tasarrufu saglar </li></ul><ul><li>Etk ile ş imli web aray ü zleri hazırlanmasına olanak tanır. </li></ul><ul><li>Masa ü st ü uygulama deneyimleri ne heryerden eri ş ilebilirlik avantajını ekler . </li></ul><ul><li>B ir ç ok web cal ışa n ını n bildi ğ i teknolojilerin birarada kullan ı lmas ı nedeniyle öğ renmesi ve uygulamas ı kolay dır. </li></ul><ul><li>H az ı r ve açık kaynak kodlu gelişmiş k ütü phaneler e sahiptir. </li></ul><ul><li>Ö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. </li></ul>
  11. 11. Avantajlar ı - 2 <ul><li>H ı z lı uygulama geli ş tirme imkan ı verir. </li></ul><ul><li>Sorunlu IFRAME ve POPUP kullanımına son ve rmektedir. </li></ul><ul><li>CSS, DOM, XHTML, JS benzeri teknolojilerin kullan ımı na ve geli ş mesine katk ı da bulun maktadır. </li></ul><ul><li>G ü venli olmayan JS denetimleri yerine sunucu tabanl ı basit ve h ızlı girdi denetim mekanizmalar ı </li></ul><ul><li>Kullan ıcı i ç in zaman tasarrufu - sayfa yenilememe </li></ul><ul><li>Back/forward/bookmark butonlar ını n cal ış mamas ı [ dezavantajlar k ısmı nda ayr ı ca bahsedilecek ] </li></ul><ul><li>Anl ı k ve tek seferlik ü retilen i ç eri ğ in arama motorlar ı nca indekslenememesi </li></ul>
  12. 12. Dezavantajları <ul><li>Yüksek miktarlarda işlemci ve bellek kullanan browserların daha da fazla kaynak tüketmesi </li></ul><ul><li>Olmazsa olmaz kabul edilen back, forward ve bookmark fonksiyonlarının işlememesi [ ö r nek : http://wp-plugins.net/] </li></ul><ul><li>Yukar ı daki fonksiyonlar ı /butonlar ı cal ış t ı rmak i ç in ek k ütü phane ler ve kodlar=daha ç ok kaynak t ü ketimi </li></ul><ul><li>İç eri ğ in arama motorlar ı taraf ı ndan taranamamas ı </li></ul><ul><li>XHR, IE’de bir activeX nesnesidir ve activeX baz ı kurumlarda engellendi ğ inden AJAX uygulamalar ı ç al ıştırıla mayabiliyor. </li></ul><ul><li>JS desteklemeyen veya JS destegi kapal ı olan browserlara/kullan ıcı lara y ö nelik ek ç al ış malar yapmak zorunda olmak </li></ul><ul><li>Sayfalar ı n kaydedilememesi, d ü zg ü n çıktı alamama </li></ul><ul><li>Kullan ı c ı lar hakk ı nda, kendi izinleri haricind e olduk ç a fazla bilginin toplanabilmesine olanak saglamas ı </li></ul>
  13. 13. Hızlı Yayılmasının Nedenleri <ul><li>Öğ renmesi kolay , uygulamas ı h ızlı </li></ul><ul><li>Cezbedici çünkü etkile ş imli </li></ul><ul><li>A çı k kaynak JS ve AJAX k ü t ü phaneleri </li></ul><ul><li>Google/Yahoo taraf ı ndan geniş çapta ve ciddi biçimde kullan ı lmas ı [ Gmail / Flickr / Maps ] </li></ul><ul><li>Neredeyse t ü m browserlar taraf ı ndan desteklenmesi </li></ul><ul><li>Y ü ksek h ı z, bw tasarrufu, web geliştiricilerin sorunlar ın a çö z ü m </li></ul><ul><li>Heryerden eri ş ilebilir , masa ü st ü ne benzer web uygulamalar ı ve yaz ılı mlar ı na olanak tan ıması </li></ul>
  14. 14. Ö rnek Kodlar - 1
  15. 15. Ö rnek Kodlar - 2
  16. 16. XHR Nesne Methodlar ı
  17. 17. XHR Nesne Ö zellikleri
  18. 18. Ö rnek Uygulamalar <ul><li>Gmail | Maps -- maps.google.com | gmail.com </li></ul><ul><li>Login </li></ul><ul><ul><li>http ://www.jamesdam.com/ajax_login/login.html </li></ul></ul><ul><li>Backbase </li></ul><ul><ul><li>http ://projects.backbase.com/RUI/shop.html </li></ul></ul><ul><ul><li>http ://www.backbase.com/demos/travel </li></ul></ul><ul><li>Kay ı t Formu </li></ul><ul><ul><li>http://defter.sahillioglu.net/filearea/demos/xmlhttprequest-ajax/php-integration/ </li></ul></ul><ul><li>Whois </li></ul><ul><ul><li>http://defter.sahillioglu.net/filearea/demos/xmlhttprequest-ajax-whois/ </li></ul></ul><ul><li>Kartvizit Uygulamas ı </li></ul><ul><ul><li>http:// www.baekdal.com/x/xmlhttprequest </li></ul></ul><ul><ul><li>http ://www.baekdal.com/articles/Usability/usable-XMLHttpRequest </li></ul></ul><ul><li>İ l - İ l ç e se ç imi </li></ul><ul><ul><li>http://defter.sahillioglu.net/filearea/demos/xmlhttprequest_selects </li></ul></ul><ul><ul><li>http ://pleann.satt.web.tr/sub.php?do=newuser </li></ul></ul><ul><li>Multi Select Box </li></ul><ul><ul><li>http://developer.apple.com/internet/webcontent/XMLHttpRequestExample/example.html </li></ul></ul><ul><li>AJAX ve SOAP ile Amazon’da Ş ar kıcı Arama </li></ul><ul><ul><li>http://defter.sahillioglu.net/filearea/demos/ajax-php-soap-wsdl-pear-amazon/ </li></ul></ul>
  19. 19. - Yanl ış lar - Dikkat Edilmesi Gereken Noktalar <ul><li>AJAX ’ı sadece kullanm ış olmak i ç in kullanmak </li></ul><ul><li>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 ] </li></ul><ul><li>Geribildirimlerde bulunmamak </li></ul><ul><li>Çok uzun, büyük ve kötü ko d lar ( Ö r: XML /DOM i ş lemleri+sunucu i ş lemleri) </li></ul><ul><li>Normal uygulamalardaki h ı z ı verememek </li></ul><ul><li>G ü venlik gerektiren yerlerde kurallar ı ihlal etmek: SSL , md5 vb. </li></ul><ul><li>Yetersiz testler: browser, JS , platform testleri </li></ul><ul><li>Javascript ’ i kapal ı veya JS deste ğ i olmayan browser kullananlar ı unutmak </li></ul><ul><ul><li>Kullanıcıların %11’lik kesimi JS kullanmıyor ! </li></ul></ul><ul><li>Kullan ıcıları yeni birş eyler öğ renmeye zorlamak/b ü t ü nsel de ğ i ş iklikler </li></ul><ul><li>Kullan ıcını n o anki odak noktas ını k ır mak </li></ul><ul><li>Ayn ı anda ç ok fazla HTTP talebi g ö ndermek ve almak </li></ul>
  20. 20. Kullanılabileceği Yerler <ul><li>Formlar: Etkile ş imli ve de ğ i ş en yap ı dak i karma şı k formlar </li></ul><ul><li>Hiyerar ş ik yap ı lar </li></ul><ul><ul><li>S adece ihtiya ç duyulan veri yi ç ekme ve sunucuyu yormama prensibi </li></ul></ul><ul><li>S ü rekli yenileme gerektiren sayfalar </li></ul><ul><li>Oylama uygulamalar ı </li></ul><ul><li>Girdi mekanizmalar ı ve i ç erik filtreleme </li></ul><ul><li>İ pu ç lar ı ve yard ı m metinleri </li></ul>
  21. 21. Kullanılmaması Gereken Yerler <ul><li>B asit formlar </li></ul><ul><li>Aramalar </li></ul><ul><li>Basit men ü ler </li></ul><ul><li>Ç ok b üyük veri g ö nder ilen ve alınan işlemler </li></ul>
  22. 22. K ütü phaneler <ul><ul><li>PHP </li></ul></ul><ul><ul><li>HTML_Ajax </li></ul></ul><ul><ul><li>XOAD </li></ul></ul><ul><ul><li>xajax </li></ul></ul><ul><ul><li>sajax </li></ul></ul><ul><ul><li>pajax </li></ul></ul><ul><ul><li>Class Ajax </li></ul></ul><ul><ul><li>Pajaj </li></ul></ul><ul><ul><li>symfony </li></ul></ul><ul><ul><li>CakePHP </li></ul></ul><ul><ul><li>JAVA </li></ul></ul><ul><ul><li>AjaxAnywhere </li></ul></ul><ul><ul><li>AjaxTags </li></ul></ul><ul><ul><li>DWR </li></ul></ul><ul><ul><li>Echo2 </li></ul></ul><ul><ul><li>Guise </li></ul></ul><ul><ul><li>jsquery </li></ul></ul><ul><ul><li>jWic </li></ul></ul><ul><ul><li>JSON-RPC </li></ul></ul><ul><ul><li>JRP </li></ul></ul><ul><ul><li>ICEfaces </li></ul></ul><ul><ul><li>Pushlets ASP </li></ul></ul><ul><ul><li>Ajax.NET Professional </li></ul></ul><ul><ul><li>Aspects of Ajax </li></ul></ul><ul><ul><li>Atlas (Microsoft ASP.NET 2.0 AJAX platform) </li></ul></ul><ul><ul><li>Bitkraft </li></ul></ul><ul><ul><li>BorgWorX Ajax.NET </li></ul></ul><ul><ul><li>AutoSuggestBox </li></ul></ul><ul><ul><li>PowerWEB LiveControls for ASP.NET </li></ul></ul><ul><ul><li>MonoRail </li></ul></ul><ul><ul><li>ComfortASP.NET </li></ul></ul><ul><ul><li>OutPost </li></ul></ul><ul><ul><li>DotNetRemoting </li></ul></ul>
  23. 23. Eser SAHiLLiOĞLU .tr Alan Adı Yönetimi _______________________ 09 Ş ubat 2006 | AB’06 shl @sahillioglu.net | www.sahillioglu.net Teşekkürler...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×