web uygulamalarında yeni bir yaklaşım ajax

Web Uygulamalarında Yeni Bir Yaklaşım

AJAXEser 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 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


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.


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.


Ç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.


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.


Ş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]


Ş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]


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ü


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.


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


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ı


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ı


Örnek Kodlar - 1


Örnek Kodlar - 2


XHR Nesne Methodları


XHR Nesne Özellikleri


Ö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/

http://projects.backbase.com/RUI/shop.html

http://projects.backbase.com/RUI/shop.html

http://www.backbase.com/demos/travel

http://www.backbase.com/demos/travel

http://defter.sahillioglu.net/filearea/demos/xmlhttprequest-ajax/php-integration/

http://www.baekdal.com/x/xmlhttprequest

http://www.baekdal.com/x/xmlhttprequest

http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest

http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest

http://defter.sahillioglu.net/filearea/demos/xmlhttprequest_selects


- 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


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


Kullanılmaması Gereken Yerler Basit formlar Aramalar Basit menüler Çok büyük veri gönderilen ve alınan

işlemler


KütüphanelerPHP

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


Eser SAHiLLiOĞLU.tr Alan Adı Yönetimi

_______________________09 Şubat 2006 | AB’06

[email protected] | www.sahillioglu.net

Teşekkürler...

web uygulamalarında yeni bir yaklaşım ajax

Documents