Basit bir web uygulaması

Transkript

1 AJAX Ahmet Demirelli 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ı AJAX HTML Javascript AJAX Avantajları AJAX Dezavantajları Örnek Ajax Uygulamaları Demo 3/20/2007 Sabanci University 2

3 Neden AJAX ihtiyacı Basit bir web uygulaması Urün Ismi Gir Ara Girdi Kontrol Veritabanı bağlantısı Geridönen sonuçlar Listele Ürün seç Satın Al Girdi Kontrol Veritabanı bağlantısı Geridönen sonuçlar Kredi Kartı Adres Bilgileri Submit Girdi Kontrol Kredi Kartı Onaylama Veritabanı bağlantısı Satın Alımın Onaylanması Verilerin Veritabanına Girilmesi ve onay İş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ı Satın Alma Urun Listesi (DIV) Kredikart Formu (DIV) Hatalar (DIV) İşlemler Girdi Kontrol Veritabanı işlemleri Urun Listesi Bileşeni Kredi Kart Bileşeni Adres Formu (DIV) Hataların bulunması Arayüz Fatura Bilgileri Bileşeni 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 JavaScript HTML AJAX CSS XML DOM 3/20/2007 Sabanci University 9

10 Nasıl Çalışır? <script type= text/javascript > XMLHttpRequest function sonucisle() { sunucudan gelen mesajı al mesajın yazılacağı nesneyi al mesajı yaz } Bilgi Listele Servlet bilgilerialservlet( req, res) { request bilgilerini al veritabanından bilgiyi çek bilgiyi clienta döndür } function illerigoster() { yeni request nesnesi (url, parms) callback fonksiyonu belirle (sonucisle()) sunucuya gönder } A Adana Adıyaman Afyon... Uygulama Sunucusu 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 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("Microsoft.XMLHTTP"); Diğer IE versiyonları için var request = new ActiveXObject("Msxml2.XMLHTTP"); 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("Microsoft.XMLHTTP"); } catch(err2) { try { var request = new ActiveXObject("Msxml2.XMLHTTP"); } 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ı Google Suggest Google Docs Google Spreadsheets Kiko Online Takvim Uygulaması 3/20/2007 Sabanci University 19

20 Örnek Ajax Uygulamaları Backbase Real Time HTML Editor Google Maps GTalk... 3/20/2007 Sabanci University 20

21 DEMO 3/20/2007 Sabanci University 21

22 3/20/2007 Sabanci University 22