• 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 Uygulamalar• Yanlışlar – Dikkat Edilmesi Gereken Noktalar• Kullanılabileceği Yerler• Kütüphaneler• Jquery ve Özellikleri• Ajax ve Jquery Arşivi

Üzerinde Durulacak Konular

Ajax Nedir ?

Ajax Nedir ?

• Bir çok web teknolojisinin bir arada kullanıldığı ,• Web dünyasına ‘başka’ bir açıdan bakan ,• Hiç kimseye ait olmayan ,• Standardı olmayan ,• 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.• Google’ın icadı değildir.• indirilebilir bir şey değildir.• * XMLHTTPREQUEST’in diğer adı değildir.• XMLHTTPREQUEST ile aynı şey değildir.

* XMLHttpRequest sayfayı yenilemeye veya başka bir sayfaya gitmeye gerek kalmadan arka planda Client Side diye adlandırılan yani işlemci tarafında çalışır ve sizin isteğiniz doğrultusunda bilgileri gönderir ve geri alır.

Çalışma Mantığı

• Klasik Çalışma Modeli

1. İstemci bir sayfa için istekte bulunur

2. Sunucu istenilen sayfayı gönderir

3. İstemci yeni bir sayfa için istekte bulunur

4. Sunucu yeniden ürettiği sayfayı gönderir

SUNUCU İSTEMCİ

Çalışma Mantığı

• AJAX Çalışma Modeli

1. İstemci bir sayfa için istekte bulunur

2. Sunucu istenilen sayfayı gönderir

3. İstemci sadece sayfanın bir kısmının yenilenmesi için istekte bulunur

4. Sunucu yenilenecek kısmıistemciye gönderir

SUNUCU İSTEMCİ

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

Kullanılan Teknolojiler

• DOM (Document Object Model - Döküman nesne modeli) dökümanın/web sayfasının yapısal bir grup olarak temsilini sağlayarak, JavaScript gibi bir script lisanının web sayfası düğümlerine erişilebileceği ve kullanabileceği yolu tanımlar.

• (X)HTML + JavaScript + DOM + CSS = DHTMLDHTML, sayfayı düzenli, ayrıntılı ve daha etkileyici göstermek için JavaScript dinamizminin geliştirilmiş şeklidir.

Örneğin web sayfalarında sıkça karşılaştığınız menüleri düşünün! Fare ile menünün herhangi bir seçeneği üzerine geldiğinizde kısaca aşağıdaki işlemler gerçekleşir.

JavaScript fare işaretçisini fark eder ve DOM ile CSS özelliklerini değiştirerek seçeneğin görsel olarak belirlenmesini sağlar. Bu işlemlerin hepsi (X)HTML içinde gerçekleşir.

Destekleyen Browserler

• 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ü• Google Chrome

Avantajları - I

• HTTP talepleri arka planda gidip geldiği için sayfa yeniden yüklenmiyor.• Sadece gerekli veriler gidip gelmekte olduğundan hızlı yükleme ve yüksek

miktarda bandwidth tasarrufu sağlar.• Etkileşimli web arayüzleri hazırlanmasına olanak tanır.• Masaüstü uygulama deneyimlerine her yerden erişilebilirlik avantajını

ekler.• Bir çok web çalışanının bildiği teknolojilerin bir arada 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 bandwidth harcatan FLASH ve JAVA yerine daha az kaynak tüketen tasarruflu bir yaklaşımdır.

+++++++

Avantajları - II

• 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 çalış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ı çalış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 desteği 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 sağlaması

--------

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, bandwidth tasarrufu, web geliştiricilerin sorunlarına çözüm• Her yerden erişilebilir, masaüstüne benzer web uygulamaları ve

yazılımlarına olanak tanıması

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

Ext.net ve Crn.com sitelerini ziyaret edelim …

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, 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! (2008)• 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 …

Kütüphaneler

PHP HTML_Ajax XOAD xajax sajax pajax Class Ajax Pajaj symfony CakePHPJAVA

AjaxAnywhere AjaxTags DWR Echo2 Guise

ASP / .NET 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

jquery jWic JSON-RPC JRP ICEfaces Pushlets

JQuery Çılgınlığı‘ Daha az yazın , daha fazlasını yapın ‘

jQuery nedir ve kimler tarafından kullanılıyor?• jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak

kullanılabilen bir framework’dür. 2006′nın Ocak ayında bir javaScript gurusu olan John Resig tarafından duyurulmuş. Lisans konusuna da kısaca değinmek gerekirse, MIT veya GPL lisansının şartlarına uyduğunuz sürece kendi uygulamalarınızda kullanabiliyorsunuz.

• Bu konuda jQuery’nin resmi web sitesi olan www.jquery.com‘dan daha fazla bilgi alabilirsiniz. Hem bu web sitesinden jQuery ile ilgili dokümantasyona, eğitsellere, eklentilere ve sorularınızı yazabileceğiniz foruma da ulaşabilirsiniz.

• jQuery çok geniş bir kullanıcı kitlesine sahiptir. Bunlardan da biraz örnek vermek gerekirse;

• Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress bu örneklerden yalnızca birkaçıdır.

• Daha fazlası için http://docs.jquery.com/Sites_Using_jQuery sayfasına bakabilirsiniz.

JQuery Kullanan Siteler

JQuery’ nin Özellikleri

• Basit kullanım: Gerçekten jQuery’nin son derece basit bir kullanımı var. Yapmak istediğiniz pek çok işlemi çoğu zaman “tek bir satırda” halledebiliyorsunuz. Örneğin web sayfanızdaki bütün div etiketlerini $('div') kodu ile yakalayabiliyorsunuz. Yok ben sadece class özniteliği “baslik” olan div etiketlerini yakalayacağım derseniz $('div.baslik') kodunu kullanmanız yeterlidir.

• Zincirlenebilirlik: jQuery’nin Sihri (The Magic of jQuery) olarak isimlendirilmiş bu özellik sayesinde çok kısa kodlar yazabilirsiniz. jQuery içerisindeki methodları birbirine zincirleyerek tek satırda birden fazla işlemi yapabilirsiniz. Örneğin şöyle bir kod ile web sayfanızdaki tüm linkleri önce yakalarsınız, sonra bir class ataması yaparsınız ve son olarak da onclick olayına bir fonksiyon eklersiniz:

$('a').addClass('deneme').click(fonksiyon);

JQuery’ nin Özellikleri

• Eklentiler: jQuery’nin bir başka mükemmel özelliği de eklentileridir. Eklentileri, belli görevleri yapan ve jQuery kütüphanesi üzerinden geliştirilmiş kod parçacıkları olarak tanımlayabiliriz. Örneğin web sitenizde “sekme (tab) menüler” kullanmak isterseniz Tabs eklentisi, web sayfanıza bir mp3 player yerleştirmek isterseniz jMP3 eklentisi ya da bir dosya yükleme uygulaması sunmak isterseniz jqUploader eklentisi ihtiyacınızı karşılamaya hazırdır. Buna benzer yüzlerce jQuery eklentisi var.

• Uyumluluk: jQuery, şu anda en çok kullanılan web tarayıcılarında çalışabilmektedir. Internet Explorer 6.0+, Firefox 1.5+, Safari 2.0+ ve Opera 9.0+ ile sorunsuzca jQuery kullanabilirsiniz.

Jquery Örnekleri

Dropdown menu

Dynamic auto complete Collapsed Comments

Elastic textareaAutosuggestion search

Jquery Örnekleri

tooltip

Autosuggest

Facebox-popup

An Alternative to Pagination

Ajax Arşivi

• Ajax Rain : http://www.ajaxrain.com/

• Ajax Daddy : http://www.ajaxdaddy.com/

• Mini Ajax : http://miniajax.com/

• Ajax Compilation : http://www.ajaxcompilation.com/

• AppServ Favorites Ajax : http://www.appservnetwork.com/

• AjaxFlakes : http://scripts.ajaxflakes.com/

• BestAjaxScripts : http://www.bestajaxscripts.com/

• W3schools : http://www.w3schools.com/Ajax/

• AjaxExamples.net : http://www.ajaxexamples.net/tr/

JQuery Arşivi

Derlenmiş ve toplanmış bir şekilde ; ( 150+ )

• Cssaddons/jquery : http://www.cssaddons.com/etiket.php?tags=51

• Noupe.com/jquery : http://www.noupe.com/jquery/all-about-jquery-plugins-tutorials-and-resources.html

• Webdesignshock.com/jquery : http://www.webdesignshock.com/showcase/best-jquery-effects/

• Marcofolio.net/jquery : http://demo.marcofolio.net/