Transcript Web Uygulamalarinda Yeni Bir Yaklasim: AJAX

Web Uygulamalarında
Yeni Bir Yaklaşım
AJAX
Eser SAHiLLiOĞLU
.tr Alan Adı Yönetimi
_______________________
09 Şubat 2006 | AB’06
[email protected] | www.sahillioglu.net
İç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
2
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
3
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
4
Ç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
5
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.
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
6
Ş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
7
Ş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
8
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
9
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
10
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
11
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
12
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ı
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ı
[ Gmail / Flickr / Maps ]



Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
13
Örnek Kodlar - 1
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
14
Örnek Kodlar - 2
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
15
XHR Nesne Methodları
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
16
XHR Nesne Özellikleri
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
17
Örnek Uygulamalar


Gmail | Maps -- maps.google.com | gmail.com
Login


Backbase





http://defter.sahillioglu.net/filearea/demos/xmlhttprequest_selects
http://pleann.satt.web.tr/sub.php?do=newuser
Multi Select Box


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-ajax-whois/
Kartvizit Uygulaması


http://defter.sahillioglu.net/filearea/demos/xmlhttprequest-ajax/php-integration/
Whois


http://projects.backbase.com/RUI/shop.html
http://www.backbase.com/demos/travel
Kayıt Formu


http://www.jamesdam.com/ajax_login/login.html
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
18
- 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
19
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
20
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
21
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
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
22
Teşekkürler...
Eser SAHiLLiOĞLU
.tr Alan Adı Yönetimi
_______________________
09 Şubat 2006 | AB’06
[email protected] | www.sahillioglu.net
Web Uygulamalarında Yeni Bir Yaklaşım: AJAX
23