TBD AJAX seminer slaytlarım. AJAX teknojisini tanıtmak için hazırlanmış slaytlar

1. AJAX
Ahmet Demirelli
ahmetdemirelli@sabanciuniv.edu
SCJP 5.0, SCWCD 1.4
Sabancı Üniversitesi
Bilişim Teknolojileri
Yüksek Lisans Programı
3/20/2007 Sabanci University 1

2. Ajanda
Neden AJAX ihtiyacı
HTML
Javascript
AJAX
AJAX Avantajları
AJAX Dezavantajları
Örnek Ajax Uygulamaları
Demo
3/20/2007 Sabanci University 2

3. Neden AJAX ihtiyacı
Basit bir web uygulaması
Girdi Kontrol Girdi Kontrol
Listele
Urün Ismi Gir
Veritabanı bağlantısı Veritabanı bağlantısı
Ürün seç
Ara
Geridönen sonuçlar Geridönen sonuçlar
Satın Al
Girdi Kontrol
Kredi Kartı Satın Alımın Verilerin Veritabanına
Kredi Kartı Onaylama
Adres Bilgileri Onaylanması Girilmesi ve onay
Veritabanı bağlantısı
Submit
şlem Başarıyla
Gerçekleştirildi
3/20/2007 Sabanci University 3

4. Neden AJAX ihtiyacı
Her işlem için ayrı bir sayfa görüntüleme
Her işlemin sunucuya (submit) gönderilmesi
şlem gerçekleştikten sonra yeni bir sayfaya
yönlendirme
Her yönlendirme sonucunda sayfaların yeniden
yüklenmesi
3/20/2007 Sabanci University 4

5. Neden AJAX ihtiyacı
Urun Listesi
Satın Alma Bileşeni
Hatalar
şlemler
(DIV)
Urun Listesi (DIV)
Kredi Kart
Girdi Kontrol
Bileşeni
Veritabanı işlemleri
Kredikart Formu (DIV)
Hataların bulunması
Fatura Bilgileri
Adres Formu (DIV)
Bileşeni
Arayüz
HTML bunun için yetersiz kalır
3/20/2007 Sabanci University 5

6. HTML
Static içerik
Kullanıcı etkileşimi yetersiz
Yardımcı teknolojiler
CSS
Javascript
Flash
Appletler
.....
3/20/2007 Sabanci University 6

7. Javascript
Lightweight programlama dili
Browser tarafından yorumlanır
Kullanıcı etkileşimini arttırır
Web sayfalarını hareketlendirir.
Fakat gerçekleşen etkileşim sadece istemci
hafızasında kalır (on the fly)
3/20/2007 Sabanci University 7

8. AJAX
AJAX (Asynchronous JavaScript and XML)
Bir web uygulama geliştirme tekniğidir.
Basit olarak; javascript kullanarak sunucuya bilgi
göndermek ve gelen bilgiyi aynı sayfada
göstermektir.
Bu yüzden web sayfalarının masaüstü(desktop)
uygulamalar gibi davranmasını sağlar.
Web uygulamalarına getirdiği yeniliklerden dolayı
Ajax uygulamaları “Web 2.0” uygulamaları olarakta
adlandırılır
3/20/2007 Sabanci University 8

9. Nasıl Çalışır ?
HTTP
HTML
JavaScript
AJAX
CSS XML
DOM
3/20/2007 Sabanci University 9

10. Nasıl Çalışır ?
<script type=“text/javascript”> Bilgi Listele Servlet
XMLHttpRequest bilgileriAlServlet( req, res) {
request bilgilerini al
veritabanından bilgiyi çek
bilgiyi clienta döndür
function sonucIsle() {
}
…sunucudan gelen mesajı al
…mesajın yazılacağı nesneyi al
…mesajı yaz
}
function illeriGoster() {
… yeni request nesnesi (url, parms)
… callback fonksiyonu belirle
(sonucIsle())
Uygulama
… sunucuya gönder
}
Sunucusu
Adana
Adıyaman
A Afyon
.....
3/20/2007 Sabanci University 10

11. XmlHttpRequest
1999 yılında Internet Explorer 5 ile çıktı
Web sunucudan gelen callback ler için geliştirilmiş bir ActiveX
nesnesi
Outlook Web Access (OWA) te kullanılmak için geliştirildi
Firefox, Safari ve diğer browserlar tarafından desteklendi
ActiveX yerine gerçek bir DOM nesnesi olarak geliştirildi
W3C tarafından standart hale getiriliyor
http://www.w3.org/TR/XMLHttpRequest/
Browserların %99 u tarafından desteklenmektedir
AJAX teknolojisinin temelinde yatan nesnedir
3/20/2007 Sabanci University 11

12. XmlHttpRequest
XMLHttpRequest nesnesi Javascript ile oluşturulur
XMLHttpRequest nesnesi oluşturmanın 3 yolu vardır
Pek çok browser için (IE hariç);
var request = new XMLHttpRequest();
Bazı IE versiyonları için
(Kullandığı MSXML library ne göre değişir)
var request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;);
Diğer IE versiyonları için
var request = new ActiveXObject(quot;Msxml2.XMLHTTPquot;);
Uygulamanın tüm browserlarda çalışması için en
doğrusu hepsini yazmaktır
3/20/2007 Sabanci University 12

13. XmlHttpRequest (kod örneği)
function getXMLHttpRequest {
var request = false;
try { request = new XMLHttpRequest(); }
catch(err1) {
try { var request = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); }
catch(err2) {
try { var request = new ActiveXObject(quot;Msxml2.XMLHTTPquot;); }
catch(err3) {
request = false;
}
}
}
return request;
}
3/20/2007 Sabanci University 13

14. XmlHttpRequest
XMLHttpRequest nesnesi oluşturulduktan sonra, open
metodu ile sunucu isteği hazırlanmalıdır.
request.open(method, URL, asenkron)
method 'GET' veya 'POST‘ olmalıdır
URL bilgilerin nereye gönderileceği
Eğer 'GET‘ kullanılırsa, data URL nin sonuna eklenir
Eğer ‘POST‘ kullanılırsa, data bir sonraki aşamada eklenir
asenkron true, yapılırsa browser sunucudan gelen bilgi
için beklemez (genelde istenilende budur)
request.open(method, URL)
Şeklinde kullanılırsa default asenkron değeri true olur
3/20/2007 Sabanci University 14

15. XmlHttpRequest
XMLHttpRequest nesnesi oluşturulup hazırlandıktan
sonra sunucuya send() methodu ile gönderilir
request.send(null);
Eğer method olarak ‘GET’ seçilmişse kullanılır
request.send(bilgi );
Eğer method olarak ‘POST’ seçilmişse kullanılır
Örnek:
request.send('var1=' +value1+'&var2='+value2);
3/20/2007 Sabanci University 15

16. Response
Sunucudan dönen mesajı almak için öncelikle request
nesnesinin onreadystatechange eventi
gerçekleştiğinde hangi metodun çalışacağını
belirtmeli ve metodu yazmalıyız
request.onreadystatechange = herhangibirFonksiyon;
function herhangibirFonksiyon() {
if(request.readyState == 4){
var response = request.responseText;
// gelen mesajın görüntülenmesi işlemi burada
}
}
readyState in 4 olması demek gönderilen isteğe karşı bir
cevap alınmış demektir
3/20/2007 Sabanci University 16

17. Avantajları
Zengin kullanıcı arayüzü
Formlardaki bilgilerin tamamını her defasında
sunucuya gönderilmesine gerek yoktur
Bu yüzdende network trafiğini azaltır
Sunucu tarafındaki teknolojiden bağımsızdır. (Sunucu
tarafında, java,.NET, php, perl...vs teknolojilerden
herhangibirisi kullanılabilir)
Sayfanın tamamı yerine bir bölümünün yenilenmesini
sağlar (asenkron çalışma)
Sadece submit butonlarıyla sunucuya ulaşmak yerine
daha fazla event kullanma imkanı sağlar
3/20/2007 Sabanci University 17

18. Dezavantajları
Back butonu işlevini kaybeder
Her browser için ayrı kod yazmak gerekir
Çalışılan domain dışındaki bir domaine ulaşılamaz
Eğer javascript disable edilmişse çalışmaz
Debug edilmesi çok zordur
yi bir sunucu taraflı programlamanın yanısıra çok iyi
bir javascript bilgiside gereklidir
3/20/2007 Sabanci University 18

19. Örnek Ajax Uygulamaları
t ocs
ges D
Sug le
oog
e
ogl G
Go
line
n
oO
Kik vim
gle heets ı
ak lamas
o
Go eads T
ygu
Spr U
3/20/2007 Sabanci University 19

20. Örnek Ajax Uygulamaları
Backbase
http://www.backbase.com
http://www.backbase.com/RUI/shop.html
Real Time HTML Editor
http://htmledit.squarefree.com/
Google Maps
GTalk
.....
3/20/2007 Sabanci University 20

21. DEMO
3/20/2007 Sabanci University 21

22. ahmetdemirelli@sabanciuniv.edu
3/20/2007 Sabanci University 22