AJAX ARAŞTIMA RAPORU

Transkript

1 HACETTEPE ÜNİVESİTESİ AJAX ARAŞTIMA RAPORU 2007, Ankara

2 HAZIRLAYANLAR Grup Numara İsim - Soyisim E-Posta Tarih Mehmet İnal Onur Atamer Vahi Arslan Salim ŞAHİN [email protected] Kenan DAĞLI [email protected]

3 İNDEX I. Ajax nedir?... 4 II. Ajax aşağıdaki teknolojilerin bir araya getirilmesiyle oluşmuştur... 5 III. Ajax'ı kimler kullanıyor?... 5 IV. Neden Ajax?... 5 a. Ajax neden gerekli görüldü?... 6 b. Ajax ne işe yarar?... 6 V. Ajax'ın kullanımı için en iyi durumlar neler olabilir?... 6 VI. AJAX ın Çalışma Mantığı... 7 VII. Destekleyen Tarayıcılar (Browser) VIII. AJAX ın Avantajları IX. AJAX ın Dezavantajları X. AJAX ın Hızlı Yayılmasının Nedenleri XI. Yanlışlar, Hatalar ve Dikkat Edilmesi Gerekenler XII. AJAX kodlamaya giriş a. XMLHttpRequest nesnesine giriş b. Nesneyi yaratmak c. Hata ayıklama d. XMLHttpRequest ile istek gönderme i. Sunucu (server) URL sini düzenlemek ii. Request nesnesi açma iii. Request gönderme iv. HTTP hazır olma durumlarının ayrıntıları v. Gizli hazır olma durumları vi. Devam eden isteğin hazır olma durumunun görüntülenmesi vii. Tarayıcı tutarsızlıkları viii. Güvenli verilerin alınması ix. HTTP durum kodlarına yakından bakış x. Hatalar SONUÇ TUTORİAL örnek uygulama Uygulama ortamı Uygulamanın tanımı Uygulamanın gerçekleştirimi İndex.jsp Login.java KAYNAKLAR... 42

4 I. Ajax nedir? Ajax, web uygulamaları için yeni bir yaklaşımdır. Asynchronous JavaScript and XML'in kısaltması olan Ajax; bu yöntemi kullanan topluluklar tarafından verilmiş isimdir. Ajax: XHTML+CSS, XMLHTTPRequest, DOM (Document Object Model), JavaScript teknolojilerini kullanarak, klasik web uygulamalarına karşı bir alternatif olarak sunuluyor. Aslında ajax : bir dil kütüphane bir program veya bir geliştirme ortamı indirilebilir bir şey değildir. Ajax : bir yaklaşımdır. bir kısaltmadır. bir web teknolojileri ve standartları ortak kullanımıdır. etkileşimli zengin web arayüzleri oluşturulmasına imkan sağlar. web geliştirme tekniği ve konseptidir. * Fakat günümüzde AJAX tekniğinin uygulama içinde kullanımını kolaylaştıracak hatta yaygınlaştıracak çatılar (framework) ortaya çıkmıştır. Bunların tümünün sadece javascript kodu yazmayı gereksiz kılan javascript kodlarının yaptığı işleri arkaplanda JSP kodunun içine gömülmüş şekilde TAG kütüphaneleri ile gerçekleştirdiklerini bilmeliyiz. Bu makalenin amacı ise AJAX ı

5 bir konsept olarak sunup ilkelerini herhangi bir çatı kullanmadan olduğu gibi anlatmaktır. Bu çerçevede ne makalenin içinde ne de makalenin sonunda verilen örnek uygulamada herhangi bir framework kullanılmamıştır. Çünkü bizce AJAX tekniğini kavrayabilmiş, javascript yazımını benimsemiş bir web programcısı için mevcut çatılardan kendisi için en uygun olanı seçmesi ve kullanması daha doğru bir yöntemdir. II. Ajax aşağıdaki teknolojilerin bir araya getirilmesiyle oluşmuştur Javascript XHTML ve CSS'in ortak kullanımı Document Object Model kullanarak dinamik sayfa gösterimi ve interaktif kullanıcı arabirimi. XML ve XSLT kullanılarak veri alim/gönderimi ve manipulasyonu XMLHttpRequest kullanılarak yapılan asenkron veri alımı Ayrıca Adobe Flex Mxml, Adobe Flash, Open Lazlo gibi yeni teknolojilerde Ajaxa göz kırpmaktadır.) III. Ajax'ı kimler kullanıyor? Google, Ajax üzerine ciddi yatırım yapıyor. Son zamanlarda çıkan Google uygulamaları Ajax yaklaşımı ile yazılmış. Bunlar Gmail, Orkut, Google Maps, Google Groups, Google Suggest ajax uygulamalarıdır. Google dışında Flickr ve Amazon'un A9.com projelerini sayabiliriz. Google ajax ın en büyük destekçilerinden birisidir. IV. Neden Ajax? Doğru kullanıldığı zaman sunucu (server) tabanlı teknolojilerden çok daha hızlı kullanıcının isteklerine cevap verebilen daha interaktif çözümler, bu yeni yaklaşım sayesinde üretilebilmektedir. Bunun yanında klasik web uygulamalarının sade kullanıcı arayüzü yerine daha canlı ve yetenekli arayüzlerin oluşturulmasını mümkün kılar. Bu özellikleri ile Ajax web uygulamalarında en çok şikayet konusu olan yavaşlık ve arayüzün çirkin ya da masaüstü uygulamaları ile karşılaştırılacak olursa "kullanışsız" olması sorununa iyi

6 bir çözüm olarak durmaktadır. a. Ajax neden gerekli görüldü? Klasik web uygulamalarındaki kullanıcı ile uygulama arasındaki etkileşimi hatırlarsak: Kullanıcı web tarayıcısı aracılığıyla bir istekte bulunur, web uygulaması bu isteğe bir cevap (HTML) oluşturur. Bu esnada kullanıcı sayfanın yüklenmesini bekler. Ajax'da ise kullanıcı isteklerine daha kısa zamanda (neredeyse anında) cevap verilir. Sunucu (server) tabanlı web uygulamalarında sunucu (server) kullanıcı tarafından gönderilen isteklere her kullanıcı bir istek gönderdiğinde cevap vermek zorunda olduğundan, yazılımın cevap verme hızı, web sunucunun (server) hızıyla doğru orantılıydı. Web sunucunun (server) hızlı cevap veremediği zamanlarda da kullanıcının web uygulamalarından aldığı verim büyük oranlarda düşebiliyordu. İşte bu noktada giderilmesi gereken bir sorun vardı ve getirilen çözüm Ajaxtı. b. Ajax ne işe yarar? AJAX kullanımında tarayıcıyla (browser) web sunucu (server) arasındaki veri alışverişi dramatik oranda azaltır ve aynı zamanda da web sunucunun (server) işlem gücü bu tür işlemler için kullanılmamış olur. Ajaxın bu ozelliği çok sık karşılaştığımız bir soruna çözüm olmaktadır. AJAX sayesinde kullanılan web uygulamalarında sunucuya (server) form gönderme ve cevap bekleme kısmı tamamen ortadan kaldırılmıştır. Yukarıda anlatılanları günlük hayattan bir örnek Google Maps'teki yakınlaştırma (zoom) özelliği(sayfa yeniden yükleme (reload) gerektirmiyor), Google Suggest'te siz klavyenizle birşeyler girdikçe sayfayı yenilemeden (refresh) yeni önerilerin size sunulması ve bunun gibi bir çok örnek... V. Ajax'ın kullanımı için en iyi durumlar neler olabilir? Türkçe'sini özetlemek gerekirse ; Derecelendirme, oylama, evet/hayır Giriş alanlarında öneriler Form alanlarının gerçek zamanlı kontrolü Durum bilgisi Otomatik Güncelleme

7 Microlink - detayların tek tıkla erişilebilir olacağı durumlar Live form - bir alanı değiştirince, ilgili ek alanların çıkması Aktif Arama - her harf girişinde arama sonuçlarının gelmesi Verilerin sunulması Haritalar Veri filtreleme Chat (sohbet) VI. AJAX ın Çalışma Mantığı AJAX uygulamalarında temel çalışma mantığı ve işlem sırası aşağıdaki gibidir: Sayfada varolan işlemlerden biri tetiklenince, sayfada hazırda bekleyen javascript fonksiyonlarıyla xmlhttprequest nesnesi oluşturulur. Bu nesne arka planda gönderdiği bir http talebiyle, istenen işlem için sunucu tarafında bulunan ve sunucu tabanlı bir dille yazılmış ilgili dosyadan o işlemin yapılmasını talep eder ve bu dosyanın çıktısını alarak kullanıcı tarafında işlenmesi ve istenen şekilde sunulması için diğer bileşenlere aktarır. Bu işlem akışı sırasında, bir Ajax uygulamasını tetiklemek için HTML ve JS, XMLHTTPREQUEST nesnesini oluşturmak için JS, arkaplanda sunucuya asenkron (eşzamanlı olmayan/gerçek zamanlı) HTTP talebi göndermek için XMLHTTPREQUEST nesnesi, sunucu tarafında yapılması istenen işlem için PHP, ASP/.NET, JSP/JAVA vb. sunucu tabanlı 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, işlenmiş çıktının renk, çizgi vb. şekilsel sunumu için de (X)HTML ve CSS kullanılmaktadır.

8 Şekil 1: Geleneksel web uygulamaları ile AJAX yaklaşımının karşılaştırılması

9 Şekil 2: Klasik web uygulamalarındaki senkron etkileşimle AJAX yaklaşımındaki asenkron etkileşim karşılaştırması

10 VII. Destekleyen Tarayıcılar (Browser) Bir tarayıcı (browser) AJAX uygulamalarını desteklemesi için en temel şart javascript destekliyor olmasıdır. Bundan sonra ikinci şart ise XMLHTTPREQUEST nesnesini destekliyor olmasıdır. Şuanda AJAX uygulamaları belli başlı tüm tarayıcılarda (browser) kullanılabilmektedir. Bir liste olarak vermek gerekirse; 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ü AJAX uygulamalarını çalıştırabilecek tarayıcılardır (browser). VIII. AJAX ın Avantajları Sayfalar tekrar tekrar yüklenmediği için ve sadece gerekli veri alışverişi yapıldığından hem kullanıcı/ziyaretçi için hem de site sunucusu için yüksek miktarda trafik/bandwith tasarrufu sağlar. Talepler kullanıcı farkında olmadan arka planda gönderilip alındığından ve hızlı olduğundan (sadece gerekli veriler gidip gelmekte), kullanıcıya gerçek bir masaüstü yazılımın yaşattığı etkileşimli güzel deneyimleri web üzerinde yaşatmak mümkün olabilmektedir. Yani kullanıcılar masaüstü sorunlarından uzak ancak masaüstü deneyimlere benzer etkileşimli deneyimleriyaşayabilir hale gelmektedirler. Geliştiricilerin Ajax yaklaşımını öğrenmesi ve bu konsepte adapte olması çok kolay ve hızlı şekilde gerçekleşmektedir. Hem yabancı hem yerli web çalışanları ve meraklıları arasında oldukça hızlı şekilde yayılmaktadır. Daha yüksek ve gerçek zamanlı etkileşim sunmakta, daha az kaynak tüketmekte ve uygulama zamanı olarak çok daha az zaman almaktadır.

11 IFRAME ve POPUP pencerelerin Ajax yaklaşımını kullanan uygulamalarda ortadan kalkmasına ve dolayısıyla azalmasına neden olmuştur. DOM, XHTML, JS benzeri teknolojilerin ve standartların yayılmasına ve gelişmesine de katkıda bulunmaktadır. Güvenlik nedeniyle güvenilmeyen kullanıcı tabanlı js denetimleri yerine sunucu tabanlı denetimler hızlıca ve basitçe sayfa yenilenmeden ve böylece kullanıcıya zaman kaybı yaşatmadan yapılabilmektedir. IX. AJAX ın Dezavantajları Tarayıcılar (browser) daha yüksek miktarlarda işlemci ve bellek ihtiyacı duymaktadır. AJAX, web sayfalarında kullanımına oldukça alıştığımız ve bir kullanılabilirlik standardı kabul edilen ve olmazsa olmaz şeklinde tabir edilen tarayıcı (browser) fonksiyonlarından durdur, geri ve ileri (Stop/Back/Forward) butonlarını kullanılamaz hale getirmektedir. Bağlantıların ve sayfa içeriğinin dinamik ve eşzamanlı üretilmesi aynı zamanda bu site içeriklerinin arama motorları tarafından indexlenmemesine neden olmaktadır. Kullanılabilirlik ve erişilebilirlik kurallarına ve standartlarına göre, yapılan uygulamanın hazırlandığı teknolojilerin varolmadığı tarayıcı (browser) türlerinde veya özelliklerinde çalıştırılabilmesi için uyumluluk çalışmaları yapılması gerekmektedir Bazı durumlarda düzgün bir statik sayfa gibi çıktı alamama ve çıktı sorunları yaşatabilmektedir.

12 X. AJAX ın Hızlı Yayılmasının Nedenleri AJAX ın bilinen ve kullanılmakta olan teknolojilerin beraber kullanımından Kaynak kodlu olarak hazırlanan kod kütüphanelerinin artması ve gelişmesi Google ın Gmail, Google Suggest ve Google Maps gibi yeni web hizmetlerinde bu teknolojiyi oldukça sağlam ve neredeyse masaüstü deneyimlerle yarışacak kadar etkileşimli ve kullanıcı dostu bir şekilde kullanması Yahoo nun satın aldığı Flickr ve benzeri çok kullanıcılı siteler de AJAX ın deneyimini kullanıcılarına yaşatması Tüm belli başlı tarayıcıların (browser) standartlara uygun şekilde üretilmesi ve AJAX ta kullanılan teknolojileri ve standartları tam olarak destekliyor olması XI. Yanlışlar, Hatalar ve Dikkat Edilmesi Gerekenler Ajaxı sadece kullanmış olmak için kullanmak veya kendimizi bir tatmin aracı olarak kullanmak yapılabilecek en büyük yanlışlardandır. Projelerimizde AJAX kullanmayı düşünüyorsak AJAX ın kullanılacağı yerlere gerçekten uygun olup olmadığını ve kullanıcılara avantajlarını sunacağından emin olmamız gerekiyor. Kullanılan AJAX uygulamaları dezavantaj sunuyorsa ve kullanıcılara kötü tecrübe yaşatıyorsa AJAX kullanmak bize sadece zarar getirecektir. Kullanıcıların gelenekselleşmiş alışkanlıklarını gözardı etmek yapılacak büyük hatalardan bir başkası olacaktır. Kullanıcıların çok büyük çoğunluğunun çok yoğun ve sık kullandığı İLERİ, GERİ, DURDUR butonları AJAX uygulamalarında arka planda giden ve gelen HTTP talepleri nedeniyle işlevselligini yitirmekte ve örnek olarak geri butonuna basıldığında sayfanın bir önceki adımına değil ilk aşamasına ulaşılmaktadır. Şuanda internet ortamında bu sorunlara çözüm sunan javascript kütüphaneleri ortaya çıkmıştır. Bu sorunların çözülmeden uygulamanın kullanıma sunulması bilin ki ziyaretçilerinizde antipati oluşturacaktır. Bunların yanısıra, print, send to friend, ve bookmark gibi fonksiyonları ve diğer yardımcı uygulamalar için de çözüm üretmeyi unutmamak gerekiyor.

13 Sayfa içerikleri AJAX ile çekiliyor ve dinamik olarak sunuluyorsa mutlaka permalink denilen sabit bağlantılarla kullanıcıların bu sayfaları bookmarklarına ekleyebilmeleri ve arama motorlarının da botlarının o sayfalara ulaşabilmesi sağlanmalıdır. Bu gereklilik, dışarıya kapalı, e-ticaret siteleri/alışveriş aşamaları için, anlık ve sürekli değişen türde içerik sağlayan sayfalarla beraber arama botlarınca taranması istenmeyen bölümler için geçerli olmayabilir. Geribildirimlerde bulunmamak: AJAX ile yaptırdığınız işlemler konusunda kullanıcıya bir bilgi veya işaret vermemek bir başka uygulama yanlışıdır. Örnek olarak il seçilince ilçe kutusunun içeriğini AJAX yöntemiyle getiriyorsak, il seçildiğinde mutlaka Lütfen bekleyiniz! İlçeler çekiliyor vb. bir mesaj vermemiz gerekmektedir. Eğer uygulamalarınız için yüksek bant genişliği, sağlam ve sorunsuz çalışan bir hattınız veya hosting iniz yoksa, AJAX kullanmanız kullanıcılarınıza işkence anlamına gelebilir. Normalde bir kaç sayfayı ayrı tab larda veya pencerelerde açarak birisine bakarken diğerlerinin yüklenmesini bekleyebiliyoruz. Eğer uygulamamız AJAX ın temel amaçlarından biri olan bu hız talebini ve beklentisini karşılayamıyor ise uygulamamızı AJAX ile yazmamız doğru bir yol olmayacaktır. Çünkü bir kullanıcıyı web sayfası karşısında bekletmek ona yapılacak en büyük işkencelerden biridir. Güvenliği gerektiren uygulamalarda güvenlik kurallarını ihlal etmek! Uygulamaya bağlı olarak SSL kullanmak, önemli verilerin şifrelenmesi, girdi denetimlerinin yapılması gibi önemli güvenlik kurallarını hiçbir AJAX uygulamamızda ihmal etmememiz gerekmektedir. HTTP taleplerinin arkaplanda gidip geliyor olması riskleri bertaraf etmemektedir. Ajax uygulamaları için yeterli test ve denetimlerin yapılmaması! Uygulamalarımızın her tarayıcıda (browser) ve her platformda aynı şekilde çalıştığının ve aynı sonuçları verdiğininin test edilmesi ve onaylanması gerekmektedir. Bilindiği gibi JS kodları malesef her tarayıcıda (browser) veya her platformda aynı çalışmayabilmektedir. Bu nedenle bu tür uygulamaların her ortamda aynı davranışlara ve sonuçlara sahip olduğunun yeterli biçimde test edilmesi gerekmektedir. Bu, uygulamanın sorunsuz kılınmasını sağlayıp her tür kullanıcının uygulamanıza erişebilmesine ve uygulamayı sorunsuzca kullanabilmesine imkan tanıyacaktır. Ajax ın JS tabanlı bir yaklaşım olmasından dolayı istemci tarafındaki JS kodunun oldukça fazla ve ağır olması, tüm işlemlerin kullanıcı tarafında yapılıyor olması veya çok büyük JS/DOM kütüphanelerin kullanılması bir başka planlama ve tasarım yanlışı olacaktır. Çözüm olarak, bir kütüphanede kullanmayacağınız özelliklerin veya kodların ve yorumların çıkarılarak dosyanın boyutlarının küçültülmesi ile bu dosyaların download süresini kısaltabilirsiniz.

14 Bunun yanısıra, sunucu tarafından alacağınız veri cinsine göre çıktıyı XML veya metin formatında sunucu tarafında işlenmiş olarak alabilirsiniz. Verinin sunucu tarafında Web Uygulamalarında işlenmesi ve istemci tarafına hazır gelmesi hem kullanıcı tarafındaki kodu hafifleterek gerekli kaynak tüketimini azaltacak ve hem de güçlü sunucularda çok daha hızlı işleneceği için ek hız avantajı sağlayacaktır. Ek olarak, kodların en kısa ve en doğru şekilde yazılmış olduğundan emin olun. Zira kötü yazılmış basit bir loop, tarayıcının (browser) tıkanmasına veya kilitlenmesine neden bile olabilmektedir. JS kodu ne kadar kötü veya uzunsa ziyaretçinin bilgisayarında tarayıcı (browser) bir kadar fazla kaynak tüketeceğini ve böylece uygulamanızın kötü bir deneyim yaşatacağını unutmayın. Unutmayın herkesin hızlı ve güçlü bir bilgisayarı olmayabilir. JS desteği olmayan veya JS kullanmak istemeyen kullanıcıları gözardı ederek erişilebilirlik kurallarını ve standartları hiçe saymak! Halen bir çok kurumsal web sitesinde Text Version/Metin Versiyonu şeklinde sadece metin tabanlı site sürümleri bulunmaktadır. Aynı şekilde AJAX uygulamanızın da normal ve klasik yollarla çalışan sürümlerini barındırmak ve hazırda tutmak hem standartlara uymuş olmayı hem de %11 e ( yaklaşan bu kullanıcı kitlesini yoksaymamış olmanızı sağlayacaktır. Örnek olarak, sonradan eklemiş olsa da, Google Gmail e klasik HTML sürümünü ekleyerek Gmail i klasik yollarla kullanmak isteyen kullanıcıları kaybetmemeyi garanti altına almış oldu. Klasik sürüm hazırlanmazsa bile mutlaka bu kullanıcılara uygulamanızın neden JS gerektirdiğini ve uygulamanızın güvenilir olduğunu uygun ve anlaşılır bir dille anlatmanız gerekmektedir. Kullanıcıların sahip olduğu alışkanlıklarının dışına çıkmak veya kullanıcıların yeni bir şeyler öğrenmesini zorunlu kılmak! Günümüzde web kullanıcıları hergün yeni birşeyler öğrenmek istemiyor. Herkes genellikle alıştığı ve kendisine kolay gelen ve kendisini anlayan web sayfalarını ve uygulamalarını kullanıyor ve seviyor. Bu nedenle bu klasikleşmiş alışkanlıkları takip edin. Uygulamalarınızda AJAX ı, bu alışkanlıkları tamamen yoketmeden ufak çaplı ve keskin olmamak şartıyla kullanın. Kullanıcının odak noktasını kırmak! Uygulamalarınızın kullanıcının odaklandığı alan dışında başka alanları değiştirmemesi gerekmektedir. Kullanıcının odaklandığı noktanın kırılması veya birden fazla yerdeki değişikliği görememesi ve algılayamaması uygulamanızla kullanıcı arasındaki etkileşimi bozabilir. Bu değişikliklerin uygun efektlerle ve insanın takip edebileceği ve farkedebileceği bir biçimde yapılması hem uygulamanın güzelleşmesini hem de etkileşimin bozulmamasını sağlayacaktır. Aynı anda birden fazla işlem için HTTP talebi göndermek ve işlemek! Çok mecbur kalmadıkça belli aralıklarla işlemleri topluca göndermek ve topluca

15 işlemek daha mantıklı bir yol olacaktır. Arka arkaya gönderilen HTTP talepleri sayfada sıkça değişikliklere neden olacağı için bu durum kullanıcının o anda yaptığı veya yeni geçtiği işlemin bölünmesi anlamına gelecektir. Uygulamada yanlış tasarım ve planlama! Bir teknoloji, dil veya yaklaşım ne kadar güçlü, yetenekli ve potansiyel bir kapasiteye sahipse o kadar da dikkatli uygulama ve planlama gerektirecektir. AJAX böyle bir özelliğe sahiptir ve bu nedenle oldukça dikkatli bir kullanım ve iyi planlamayla doğru bir tasarım gerektirmektedir. XII. AJAX kodlamaya giriş Ajaxın temelinde XMLHttpRequest nesnesi yer alır. Ajax uygulamalarına takılan "Masaüstü web uygulamaları" lakabının sırrı da, bu nesnede gizlidir. XMLHttpRequest nesnesi bize, kendisiyle gönderilen sorguları, başka bir fonksiyon içerisinde yorumlama imkanı sağlar. Bu demektir ki XMLHttpRequest ile bir dosyaya bir sorgu gönderilir, alınan sonuç başka bir sayfa içerisine yüklenme ihtiyacı hissetmeden kullanılır. Bu yüzden ajax uygulamalrı geliştireek kişilerin, XMLHttpRequest nesnesini anlaması son derece önemlidir. a. XMLHttpRequest nesnesine giriş XMLHttpRequest nesnesini yaratmadan önce bu nesenenin bazı metodlarını tanıyalım. Metod abort() Açıklama Geçerli isteği iptal eder. getallresponseheaders() getresponseheader("başlıketiketi") Tüm karşılık başlık etiketilerini ve değerlerini string olarak elde eder. Verilen başlık etiketinin taşıdığı değeri string olarak elde eder.

16 open("metod", "Adres"[, asyncflag[,"username"[, "password"]]]) Sorgu gönderilmeden önce, sorgunun gönderileceği adresi, gönderi metodunu ve diğer seçime bağlı netilkleri belirler. send(içerik) setrequestheader("etiket", "değer") Sorguyu gönderir. Seçime bağlı olarak gönderilebilen verileri ve DOM ile yaratılmış verileri de gönderebilir. Gönderilen sorguya bir etiket/değer başlığını iliştirir. Tabloda gösterilen "metod" verileri çekmekte kullanacağımız HTTP metodunu ifade etmektedir. Bildiğiniz gibi HTML ile dosyalara sorgu gönderirken iki ayrı yöntem izliyoruz. Bunlardan birincisi doğrudan sayfa adını çağırıken kullandığımız test.html?id= , diğeri ise form verilerini göndermek için kullandığımız GET ve POST metodları. XMLHttpRequest nesnesi ile dosyalarımıza sorgu gönderirken de yine GET VE POST metodlarından istediğimiz bir tanesini kullanmak durumundayız. GET genellikle dosyalara doğrudan sorgulama maksadıyla kullanılır. Örneğin bir blog uygulamasında makaleler.asp?id=123 şeklindeki sorguyu GET kullanarak gönderebiliriz. Fakat sunucuya veri göndereceğimiz ve gönderdiğimiz verilerin toplam boyutunun 512 byte'dan fazla olduğu zamanlarda POST metodu bizim için daha uygun olacaktır. POST metodunda da sayfa adresine, GET kullanırkenki gibi fazladan bir sorgu ekleyebiliriz. Sorgunun gönderime hazırlanması durumunu -open(...)- belirten metodun üçüncü özelliği, yani asyncflag gönderilen işin eş zamanlı olmayışını belirler. Bu özelliğin değeri boolean, yani ya true, ya da false olarak belirlenir. Geçerli değeri de olan true seçilirse yapılan iş eş zamansız olarak yürütülür. Eğer bu değer false olarak belirlenirse; betik, gönderdiği sorgunun sunucu tarafından yorumlanmasını ve bir karşılık verilmesini bekler, doğal olarak ta yapılan hareketin, mutlaka istekcevap şekline dönüştürülmesi sağlanır. Bu mantıkta herhangi bir problem görülmemesine rağmen istemci istek gönderir, sunucu cevap verir, istemci de işlemine devam edebilmek için sunucunun cevabını bekler- bu metodun kullanılması şebeke veya sunucu hataları oluşumundaki risk payını arttırmaktadır. Bu nedenle yapılan işin eş zamanlı olmaması ve istem nesnesinin onreadystatechange -halihazırdaki durum değiştiğinde...- hareketi ile kontrol edilmesi daha güvenlidir.

17 b. Nesneyi yaratmak En basit şekilde XMLHttpRequest nesnesi şu şekilde yaratılır. liste 1. Yeni bir XMLHttpRequest nesnesi yarat <script language="javascript" type="text/javascript"> var request = new XMLHttpRequest(); </script> Farkedebildiğiniz üzere şekil 1 ve şekil 2 arasındaki fark; yaratılan request nesnesinin veri tipi üzerindedir. Temel java şekil 2 daha doğru gibi gelebilir. Ama aslında şekil 1 tercih edilen yaklaşımdır. liste 2. XMLHttpRequest nesnesini yaratmak için psuedo kod örneği XMLHttpRequest request = new XMLHttpRequest(); c. Hata ayıklama Hala XMLHttpRequest nesnesini desteklemeyen eski sürüm tarayıcıları (browser) kullanan insanlar olabilir. Bu tür bir durumun ele alınması gerekir. Liste 3 te böyle bir durumda ortaya çıkacak hatayı ele alan bir kod örneği bulunmaktadır. Liste 3. <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); catch (failed) { request = false; if (!request) alert("error initializing XMLHttpRequest!"); </script>

18 Kodun içerdiği adımları daha yakından incelersek: 1. Request adında,ilk durumu false olan bir nesne yarat. Ilk durumunu false olarak belirlenmesinin anlamı hala XMLHttpRequest nesnesini yaratılmamış olduğunu göstermek amacıyladır. 2. Try / catch bloğu koy 1. Try içinde hala XMLHttpRequest nesnesini yarat 2. Eğer hala XMLHttpRequest nesnesi yaratılamamışsa catch ile yakala 3. Request nesnesinin hala false olup olmadığını kontrol et. 4.Eğer bir problem varsa, yani request nesnesinin değeri hala hata mesajı ver. false ise Eğer bu kodu çalıştırırsanız şöyle bir çıktı ile karşılaşırsınız:

19 Başka bir aykırı durum ise internet explorerın sürüm farklarından kaynaklanabilecek hatalardır. Örneğin yeni sürümlerde yaratılan nesne Msxml2.XMLHTTP olarak adlandırılmaktadır.; eski sürümlerde ise Internet Explorer Microsoft.XMLHTTP nesnesini kullanır. İyi bir uygulama geliştirmek için bu durumu ele almalısınız. Bu durumu ele alan kod örneği aşağıdadır.

20 Liste 4. eski ve yeni sürüm explorerları destekleyen kod örneği <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); catch (failed) { request = false; if (!request) alert("error initializing XMLHttpRequest!"); </script> Kodun içerdiği adımları daha yakından incelersek: Request adında, ilk durumu false olan bir nesne yarat. İlk durumunu false olarak belirlenmesinin anlamı hala XMLHttpRequest nesnesini yaratılmamış olduğunu göstermek amacıyladır. 1.Try / catch bloğu koy: i. XMLHttpRequest nesnesini yarat. ii. Nesne yaratılma işlemini kontrol et (catch (trymicrosoft)): 1. Yeni sürüm internet explorerlarda kullanılan (Msxml2.XMLHTTP) nesnesini yarat.

21 2. Eğer yeni sürüm (Msxml2.XMLHTTP) yaratılamazsa(catch (othermicrosoft)), eski sürümlerde kullanılan (Microsoft.XMLHTTP) nesnesini yarat. iii. Eğer hiçbir nesne yaratılmazsa (catch (failed)), request nesnesine false değerini ver. 2.Eğer bir problem varsa, yani request nesnesinin değeri hala false ise hata mesajı ver. Statik yaklaşım dinamik yaklaşıma karşı Yukarıda verilen kod örnekleri script taglarla gerçekleştirilmiştir. Eğer kod kısımları bir metod veya fonksiyonun içine yerleştirilmeden doğrudan kullanılıyosa bu yaklaşıma statik yaklaşım denir. Bunun anlamı; kod kullanıcaya gösterilmeden önce çaılştırılıyor demektir. Dinamik yaklaşım için kodu bir metodun içine koymakla sağlanabilir. Bu daha iyi bir yaklaşımdır. Liste 5. XMLHttpRequest nesnesini yaratan kodu metod içine koyma <script language="javascript" type="text/javascript"> var request; function createrequest() { try { request = new XMLHttpRequest(); catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); catch (failed) { request = false; if (!request) alert("error initializing XMLHttpRequest!"); </script>

22 Bu şekilde bir ajax uygulamsı geliştiriken, herhangi bir ajax çalışmasından önce bu fonksiyonu çağırmalısınız. Bunu kodla göstermek gerekirse; Liste 6. XMLHttpRequest nesnesi yaratan methodun kullanımı <script language="javascript" type="text/javascript"> var request; function createrequest() { try { request = new XMLHttpRequest(); catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); catch (failed) { request = false; if (!request) alert("error initializing XMLHttpRequest!"); function getcustomerinfo() { createrequest(); // Do something with the request variable </script> Bu kodu, yani metod yaklaşımını, çoğu Ajax kullanıcısını benimsememesinin nedeni bu yaklaşımın hata ayıklama olayını geciktirmesidir. Örneğin 15 kadar alanı olan karmaşık bir formunuz olduğunu düşünün; eğer siz 14. text alanını Ajax kodları ile desteklemiş iseniz, kullanıcı 14. alanı kullandığı zaman getcustomerinfo() metodu çalışır. Bu durumda XMLHttpRequest nesnesi çalışır

23 fakat bir hata ortaya çıkabilir ve ekrana bir hata mesajı yansıtılır. Böylece kullanıcı ilk 13 alanı boşuboşuna doldurmuş olur. Bunun için uygalama geliştirirken ne zaman statik yaklaşımın ne zaman dinamik yaklaşımın kulanılacağını iyi bir şekilde analiz etmek gerekir. d. XMLHttpRequest ile istek gönderme i. Sunucu (server) URL sini düzenlemek Yapılacak ilk iş sunucuya (server) bağlanılacak URL yi belirlemektir. Bu işlemi yapacak kod örneği aşağıdadır. Bu kod telefon alanından bir değeri yakalar ve bu değeri kullanarak URL yi yapılandırır. Liste 7. request URL yi yapılandıran kod örneği <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); catch (failed) { request = false; if (!request) alert("error initializing XMLHttpRequest!"); function getcustomerinfo() { </script> var phone = document.getelementbyid("phone").value; var url = "/cgi-local/lookupcustomer.php?phone=" + escape(phone);

24 Burada farklı olarak phone adlı bir değişken tanımlanıyor ve phone adlı form alanından değeri günleniyor. Aşağıdaki kod kısmı fhone alanını ve phone alanının id özelliğini göstermektedir. Liste 8. Break Neck Pizza formu <body> <p><img src="breakneck-logo_4c.gif" alt="break Neck Pizza" /></p> <form action="post"> <p>enter your phone number: <input type="text" size="14" name="phone" id="phone" onchange="getcustomerinfo();" /> </p> <p>your order will be delivered to:</p> <div id="address"></div> <p>type your order in here:</p> <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p> <p><input type="submit" value="order Pizza" id="submit" /></p> </form> </body> ii. Request nesnesi açma URL bağlantısını elde ettikten sonra request nesnesini yapılandırabiliriz. Bunun için kullanılan open() methodudur. Bu method şu parametreleri alabilir: request-type: İstek gönderme için bir türdür. Tipik değerleri GETveya POST olabilir. Ama HEAD de kullanılmaktadır. url: bağlanılan URL dir.. asynch: Asenkron olarak istek gönderilecekse true, senkron olarak gönderilecekse false değerini alan bir parametredir. İlk değeri true olan bir parametredir.

25 username: Kullanıcı ismini bu parametre ile gönderebilirsiniz. Opsiyonel bir parametredir ve ilk değeri yoktur. password: Parolayı bu parametre ile aktarabilirsiniz. Opsiyonel bir parametredir ve ilk değeri yoktur. Liste 9. İstek açma function getcustomerinfo() { var phone = document.getelementbyid("phone").value; var url = "/cgi-local/lookupcustomer.php?phone=" + escape(phone); request.open("get", url, true); iii. Request gönderme Open() komutuyla yapılandırdığımız request nesnesi artık request göndermek için hazır demektir. Bu işlem send() komutula gerçekleştirilir. Send() komutu sadece bir tane parametre alır. Send() işleminin gösterimi aşağıda ki kod parçacığında gösterilmiştir. var url = "/cgi-local/lookupcustomer.php? phone=" + escape(phone); Eğer veri göndermek istirorsanız bunu yapmanın en iyi yolu Get requesti kullanmaktır. Eğer bir veri göndermeye ihtiyaç duymuyorsanız send() komutunu null olarak gönderebilirsiniz. Listing 10. Request gönderen kod parçacığı function getcustomerinfo() { var phone = document.getelementbyid("phone").value; var url = "/cgi-local/lookupcustomer.php?phone=" + escape(phone); request.open("get", url, true); request.send(null);

26 iv. HTTP hazır olma durumlarının ayrıntıları XMLHttpRequest nesnesinin readystate adlı bir özelliğinin olduğunu hatırlarsınız. Bu özellik, sunucunun bir isteği tamamladığından emin olmanızı sağlar ve genellikle, bir geri çağrı işlevi, sunucudan alınan verileri bir Web formunu ya da sayfasını güncellemek için kullanır. Liste 1'de bunun basit bir örneği gösterilmektedir. Liste 1. Geri çağrı işlevinde bir sunucunun yanıtıyla çalışma function updatepage() { if (request.readystate == 4) { if (request.status == 200) { var response = request.responsetext.split(" "); document.getelementbyid("order").value = response[0]; document.getelementbyid("address").innerhtml = response[1].replace(/\n/g, "<br />"); else alert("status is " + request.status); Hazır olma durumlarının en yaygın (ve en basit) kullanımı kesinlikle budur. "4" rakamından da tahmin edebileceğiniz gibi birkaç tane hazır olma durumu söz konusudur. 0: İstek başlatılmadı (open() çağrılmadan önce). 1: İstek ayarlandı, ancak henüz gönderilmedi (send() çağrılmadan önce). 2: İstek gönderildi ve işleniyor (bu noktada genellikle yanıtın içerik üstbilgilerini alabilirsiniz). 3: İstek işleniyor; yanıttan bazı kısmi verileri alabilirsiniz, ancak sunucu yanıt vermeyi tamamlamamıştır. 4: Yanıt tamamlandı; sunucunun yanıtını alabilir ve kullanabilirsiniz. Ajax programlamasının temel unsurlarının ötesine geçmek istiyorsanız, yalnızca bu durumları bilmeniz yeterli değildir, ne zaman ortaya çıktıklarını ve bunları nasıl kullanabileceğinizi de bilmeniz gerekir. Birincisi ve en önemlisi, her bir hazır olma durumunda, bir isteğin hangi durumunda karşılaşacağınızı öğrenmelisiniz. Ne yazık ki, kolay anlaşılır bir şey değildir ve birkaç özel durumu da içerir.

27 v. Gizli hazır olma durumları ReadyState özelliği 0 (readystate == 0) ile gösterilen birinci hazırolma durumu, başlatılmamış bir isteği belirtir. İstek nesnenizde open() işlevini çağırır çağırmaz, bu özellik 1 değerini alır. Hemen hemen her zaman isteğinizi başlattığınızda open() işlevini çağırdığınız için readystate == 0 değerinin görülmesi çok nadiren olay bir şeydir. Ayrıca, başlatılmamış hazır olma durumu, pratik uygulamalarda kullanışsız bir bilgidir. Yine de eksiksiz bilgi verebilmek açısından, Liste 2'de hazır olma durumunun nasıl 0 değerine ayarlanacağı gösterilmektedir. Liste 2. 0 hazır durumunun alınması function getsalesdata() { // Create a request object createrequest(); alert("ready state is: " + request.readystate); // Setup (initialize) the request var url = "/boards/servlet/updateboardsales"; request.open("get", url, true); request.onreadystatechange = updatepage; request.send(null); Bu basit örnekte, Web sayfanız bir isteği başlatmak için getsalesdata() işlevini çağırır (örneğin bir düğme tıklatıldığında). Hazır olma durumunu open() çağrılmadan önce denetlemeniz gerektiğini unutmayın. Açıkçası, bunun size fazla bir yararı olmaz; çoğu zaman open() işlevinin çağrılmadığından emin olmak isteyeceğiniz durumlar ender görülür. Neredeyse gerçek dünyaya benzeyen Ajax programlamasında bu hazır olma durumu, yalnızca birden çok işlevde aynı XMLHttpRequest nesnesini kullanarak birden çok istekte bulunulursa kullanılır. Bu durumda (çok nadiren de olsa), yeni isteklerde bulunmadan önce bir istek nesnesinin başlatılmamış durumda (readystate == 0) olduğundan emin olmak isteyebilirsiniz. Bu esas olarak, başka bir işlevin nesneyi aynı anda kullanmamasını sağlar.

28 vi. Devam eden isteğin hazır olma durumunun görüntülenmesi 0 hazır olma durumunun dışında, istek nesnenizin tipik bir istek ve yanıt sürecinde diğer hazır olma durumlarının her birinden geçmesi ve son olarak 4 numaralı hazır olma durumunda işlemi bitirmesi gerekir. İşte bu noktada, çoğu geri çağrı işlevinde gördüğünüz if (request.readystate == 4) satırı devreye girer; sunucunun işlemi tamamladığından ve Web sayfasını güncellemenin ya da sunucudan alınan verilere dayalı bir işlem yapmanın güvenli olduğundan emin olmanızı sağlar. Gerçekleşirken bu işlemi gerçekten görmek önemsiz bir görevdir. Hazır olma durumu 4 değerindeyse, geri çağrınızda yalnızca kodu çalıştırmak yerine, geri çağrınızın her çağrılışında hazır olma durumunu çıkarın. Bunu yapan koda ilişkin bir örnek görmek için Liste 3'e bakın. Liste 3. Hazır olma durumunun denetlenmesi function updatepage() { // Output the current ready state alert("updatepage() called with ready state of " + request.readystate); Bunu nasıl çalıştıracağınızdan tam olarak emin değilseniz, Web sayfanızdan çağrılacak bir işlev yaratmanız ve bunun, sunucu tarafındaki bileşene bir istek göndermesini sağlamanız gerekir (böyle bir işlev Liste 2'de ve bu dizinin birinci ve ikinci makalesindeki örneklerde gösterilmiştir). İsteğinizi oluştururken, geri çağrı işlevini updatepage() işlevine ayarlamadığınızdan emin olun; bunu yapmak için istek nesnenizin onreadystatechange özelliğini updatepage() işlevine ayarlayın. Bu kod, onreadystatechange özelliğinin tam olarak ne anlama geldiğini gösteren güzel bir örnektir -- isteğin hazır olma durumunun her değişmesinde, updatepage() çağrılır ve bir uyarı görüntülenir.

29 vii. Tarayıcı tutarsızlıkları Bu işlemin temel mantığını kavradıktan sonra, Web sayfanıza farklı tarayıcılardan erişmeyi deneyin. Bu hazır olma durumlarının işlenmesiyle ilgili bazı tutarsızlıkları fark etmeniz gerekir. Örneğin, Firefox 1.5'te aşağıdaki hazır olma durumlarını görürsünüz: Burada her bir istek aşaması gösterildiği için bu sizi şaşırtmamalıdır. Ancak, aynı uygulamaya Safari üzerinden erişirseniz, ilginç bir şeyle karşılaşırsınız -- daha doğrusu karşılaşmazsınız. Safari 2.0.1'de göreceğiniz durumlar şunlardır: Safari, birinci hazır olma durumunu dışarıda bırakır ve bunun anlamlı bir açıklaması yoktur; Safari'nin çalışma yöntemi böyledir. Bu önemli bir noktayı da gösterir: Sunucudan alınan verileri kullanmadan önce isteğin 4 numaralı hazır olma durumunda olup olmadığından emin olmak iyi bir fikir olsa da, her bir geçici hazır olma durumuna dayalı kod yazma farklı tarayıcılarda farklı sonuçlar almanızı sağlar. Örneğin, Opera 8.5 kullanırken işler, görüntülenen hazır olma durumları açısından daha da kötüdür: 3 4 Son olarak, Internet Explorer aşağıdaki durumlarla yanıt verir: Bir istekle ilgili sorun yaşıyorsanız, sorunları aramanız gereken ilk yer burası olmalıdır. Kodun düzgün çalıştığından emin olabilmeniz için isteğin hazır olma durumunu size gösterecek bir uyarı ekleyin. Kodunuzu Internet Explorer ve Firefox üzerinde deneyin -- dört hazır olma durumunu da alabilecek ve isteğin her bir aşamasını denetleyebileceksiniz.

30 viii. Güvenli verilerin alınması Tüm belgeler ve belirtimler, yalnızca 4 numaralı hazır olma durumunda verilerin kullanım açısından güvenli olduğu konusunda ısrarlıdır. ResponseText özelliği 3 numaralı hazır olma durumundayken verilerin alınamayacağı durumlar çok azdır. Ancak, uygulamanızda buna güvenmek kötü bir fikirdir -- 3 numaralı hazır olma durumundaki tamamlanmış verilere dayalı bir kod yazdığınızda, verilerin tamamlanmamış olması neredeyse kesindir. 3 numaralı hazır olma durumunda kullanıcıya, bir yanıtın gelmek üzere olduğu belirten bir geri bildirim sağlamak daha iyi bir fikirdir. alert() gibi bir işlev kullanmak kötü bir fikirdir -- Ajax kullanmak ve daha sonra, kullanıcıyı bir uyarı iletişim kutusuyla engellemek çok da mantıklı değildir -- bunun yerine formunuzdaki ya da sayfanızdaki bir alanı hazır olma durumu değiştikçe güncelleyebilirsiniz. Örneğin, 1 numaralı hazır olma durumu için bir aşama göstergesinin %25'lik, 2 numaralı hazır olma durumu için %50'lik, 3 numaralı hazır olma durumu için %75'lik ve 4 numaralı hazır olma durumu için %100'lük (tamamlanmış) kısmına ilerleyen bir görünüm hazırlamayı deneyebilirsiniz. Gördüğünüz gibi bu yaklaşım akıllıca, ancak tarayıcıya bağlı olacaktır. Örneğin Opera'da ilk iki hazır olma durumunu hiç almazsınız ya da Safari'de birinci durum (1) atlanır. ix. HTTP durum kodlarına yakından bakış Hazır olma durumlarını ve sunucunun yanıtını, Ajax programlama teknikleri çantanıza koydunuzda, Ajax uygulamalarıyla ilgili başka bir geliştirme düzeyine -- HTTP durum kodlarıyla çalışma -- geçmeye hazır olursunuz. Bu kodlar, Ajax için yeni kavramlar değildir. Bunlar, Web'in ortaya çıkışından bu yana var olan kavramlardır. Büyük olasılıkla Web tarayıcınızda bunlardan birkaçını görmüşsünüzdür: 401: Yetkisiz 403: Yasak 404: Bulunamadı Ajax uygulamalarınıza başka bir denetim ve yanıt verebilirlik düzeyi (ve özellikle daha güçlü hata işleme özelliği) eklemek için bir istekteki ve yanıttaki durum kodlarını doğru biçimde denetlemeniz gerekir. 200: Her şey yolunda Birçok Ajax uygulamasında, Liste 6'daki gibi hazır olma durumunu denetleyen ve daha sonra, sunucu yanıtındaki verilerle çalışmaya devam eden bir geri çağrı işlevi görürsünüz.

31 Liste 6. Durum kodunu yoksayan geri çağrı işlevi function updatepage() { if (request.readystate == 4) { var response = request.responsetext.split(" "); document.getelementbyid("order").value = response[0]; document.getelementbyid("address").innerhtml = response[1].replace(/\n/g, "<br />"); Bu, Ajax programlaması için dar görüşlü ve hataya eğilimli bir yaklaşımdır. Bir komut dosyası, kimlik doğrulaması gerektirirse ve isteğiniz geçerli kimlik bilgilerini sağlayamazsa, sunucu 403 ya da 401 gibi bir hata kodu döndürür. Ancak, sunucu isteğe yanıt verdiği için hazır olma durumu 4 değerine gelir (istediğiniz ya da istek için beklediğiniz yanıtı alamayabilirsiniz). Sonuç olarak, kullanıcı geçerli verileri alamaz ve JavaScript var olmayan sunucu verilerini kullanmayı denediğinde kötü bir hata bile alabilir. Sunucunun istekle ilgili işlemi bitirdiğinden ve "Her şey yolunda" durum kodunu gönderdiğinden emin olmak için çok az bir çaba göstermeniz yeterli olacaktır. Bu kod "200"'dür ve XMLHttpRequest nesnesinin status özelliğiyle birlikte raporlanır. Sunucunun yalnızca istekle işini bitirdiğinden değil, aynı zamanda olumlu bir durum da bildirdiğinden emin olmak için geri çağrı işlevinize Liste 7'de gösterilen denetimi ekleyin. Liste 7. Geçerli durum kodunun denetlenmesi function updatepage() { if (request.readystate == 4) { if (request.status == 200) { var response = request.responsetext.split(" "); document.getelementbyid("order").value = response[0]; document.getelementbyid("address").innerhtml = else response[1].replace(/\n/g, "<br />"); alert("status is " + request.status);

32 Birkaç satırlık kod eklemesiyle, bir şeyler yanlış giderse, kullanıcıların, herhangi bir açıklaması olmayan karışık verilerin bulunduğu bir sayfa yerine (şüpheli de olsa) yararlı bir hata iletisi alacaklarından emin olabilirsiniz. Yeniden yöneltme ya da yeniden yönlendirme Hatalarla ilgili konunun derinliklerine dalmadan önce, Ajax kullanırken endişelenmenizi gerektirmeyecek bir şeyden söz edebiliriz -- yeniden yöneltmeler. HTTP durum kodlarında bunlar, 300 durum kodu ailesiyle bildirilir: 301: Kalıcı olarak taşındı 302: Bulunamadı (istek başka bir URL/URI'ya yeniden yöneltildi) 305: Yedek Sunucu Kullanın (isteğin, istekte bulunulan kaynağa erişebilmesi için bir yedek sunucu kullanması gerekir) Ajax programcıları iki nedenle yeniden yöneltmeler konusunda endişelenmezler: Birincisi, Ajax uygulamaları neredeyse her zaman özel bir sunucu tarafı komut dosyası, sunucu uygulaması ya da uygulama için yazılır. Bu bileşenin Ajax programcısının haberi olmadan ortadan kaybolması ve başka bir yere taşınması çok ender görülen bir olaydır. Genellikle bir kaynağın taşındığını (kendiniz taşıdığınız ya da taşıttığınız için) bildiğinizden, isteğinizdeki URL'yi değiştirir ve hiçbir zaman bu tür bir sonuçla karşılaşmazsınız. Konu ile daha ilgili bir neden de Ajax uygulamalarının ve isteklerin kum havuzu yöntemini kullanmasıdır. Bu, Ajax isteklerinin gönderildiği Web sayfasına hizmet veren etki alanının, bu isteklere yanıt vermesi gereken etki alanı olduğu anlamına gelir. Bu nedenle, ebay.com etki alanından hizmet alan bir Web sayfası, amazon.com üzerinde çalışan bir komut dosyasına Ajax stili bir istekte bulunamaz; ibm.com üzerindeki Ajax uygulamaları netbeans.org üzerinde çalışan sunucu uygulamalarına isteklerde bulunamaz. Sonuç olarak, istekleriniz, bir güvenlik hatası oluşturulmadan başka bir sunucuya yeniden yöneltilemez. Böyle durumlarda, hiçbir durum kodu alamazsınız. Genellikle hata ayıklama konsolunda bir JavaScript hatası bulunur. Birçok durum kodu üzerinde düşünürken, yeniden yöneltme kodlarının tamamını göz ardı edebilirsiniz.

33 x. Hatalar 200 durum koduyla ilgilendikten ve 300 durum kodu ailesini büyük oranda dikkate almayabileceğinizi fark ettikten sonra, endişelenmeniz gereken diğer tek kod grubu 400 ailesidir. Bunlar, çeşitli hata tiplerini belirtir. Liste 7 'ye bakın ve hatalar işlenirken, kullanıcıya yalnızca çok soysal bir hata iletisinin bildirildiğine dikkat edin. Bu, doğru yönde bir adım olsa da kullanıcıya ya da uygulama üzerinde çalışan bir programcıya aslında neyin yanlış gittiğini açıklama açısından biraz yararsız bir iletidir. Öncelikle, eksik sayfalar için destek ekleyin. Bu durumla, üretim sistemlerinde gerçekten de sık karşılaşılmaz, ancak sınama amacıyla komut dosyasının taşınması ya da bir programcının yanlış bir URL girmesi yaygın bir uygulamadır. 404 hatalarını güzel bir şekilde raporlayabilirseniz, kafası karışan kullanıcılara ve programcılara yardım etmek için çok daha fazlasını sağlayabilirsiniz. Kullanıcı, sorunun kimlik doğrulamasından mı, eksik bir komut dosyasından mı (buradaki neden budur), kullanıcı hatasından mı, yoksa kod içindeki bir hatadan mı kaynaklandığını anlayamaz. Bazı basit kod eklemeleri, bu hatanın çok daha kesin olmasını sağlayabilir. Kimlik doğrulama hatalarının yanı sıra eksik komut dosyalarını kesin bir iletiyle işleyen Liste 8'e bakın. Liste 8. Geçerli durum kodunun denetlenmesi function updatepage() { if (request.readystate == 4) { if (request.status == 200) { var response = request.responsetext.split(" "); document.getelementbyid("order").value = response[0]; document.getelementbyid("address").innerhtml = response[1].replace(/\n/g, "<br />"); else if (request.status == 404) { alert ("Requested URL is not found."); else if (request.status == 403) { alert("access denied."); else alert("status is " + request.status);

34 Kendi uygulamalarınızda, kimlik doğrulama nedeniyle bir hata oluştuğunda, kullanıcı adını ve parolayı temizleyip ekrana bir hata iletisi eklemeyi düşünebilirsiniz. Eksik komut dosyalarını ya da diğer 400 tipi hatalarını (izin verilmeyen bir HEAD isteği göndermek gibi kabul edilemez bir istek yönetimi için 405 ya da yedek sunucu kimlik doğrulamasının gerektiği bir 407 kodu gibi) daha güzel işlemek için benzer yaklaşımlar uygulanabilir. Yaptığınız seçim ne olursa olsun, sunucudan dönen durum kodunun işlenmesiyle başlar. SONUÇ Birçok Ajax ve Web programcısı için bu makalede anlatılan bilgiler ileri düzey görünebilir. HEAD isteği oluşturmanın yararı nedir? Hangi durumda JavaScript'inizde açık olarak yeniden yöneltme durum kodunu işlemeniz gerekir? Bunlar güzel sorular; basit uygulamalarda yanıt, bu gelişmiş tekniklerin pek değerinin olmadığıdır. Ancak, Web artık basit uygulamalara tolerans gösterilen bir yer değil; kullanıcılar daha ileri düzeyli oldular, müşteriler daha güçlü uygulamalar ve gelişmiş hata raporlaması istiyorlar ve bir uygulama, toplam sürenin %1'inde çalışmadığı için yöneticiler işlerinden çıkarılıyorlar. O zaman, basit bir uygulamanın ötesine geçip XMLHttpRequest nesnesini daha iyi bir şekilde anlamak sizin işiniz. Çeşitli hazır olma durumlarına güvenebilirseniz -- ve tarayıcılar arasındaki farkları anlayabilirseniz -- bir uygulamada hızlı bir şekilde hata ayıklayabilirsiniz. Bir hazır olma durumuna dayalı yaratıcı bir işlevsellik ortaya çıkarabilir ve kullanıcılara ve müşterilere bir isteğin durumuyla ilgili rapor verebilirsiniz. Durum kodlarını kullanabilirseniz, uygulamanızı komut dosyası hatalarıyla, beklenmedik yanıtlarla ve uç durumlarla başa çıkabilecek şekilde ayarlayabilirsiniz. Sonuç olarak, uygulamanız yalnızca her şeyin doğru gittiği durumlarda çalışmak yerine, her zaman çalışır. Buna HEAD istekleri oluşturma yeteneğini, URL varlığını denetlemeyi ve bir dosyanın değiştirilme zamanını öğrenmeyi ekleyin, kullanıcıların kendi bilgileriyle güncellenmiş, geçerli sayfalar almalarını sağlayın ve (en önemlisi) uygulamanızın ne kadar güçlü ve çok yönlü olduğunu göstererek kullanıcıları şaşırtın. Bu makale uygulamalarınızı parıldayan bir uygulama yapmaz, metni sarı spotlarla vurgulamanıza ya da daha çok masaüstüne benzetmenize de yardımcı olmaz. Bunların tümü Ajax'ın güçlü özellikleri olmasına rağmen, bir dereceye kadar kekin üzerindeki krema gibidir. Uygulamanızın hataları ve sorunları uygun bir şekilde işlediği sağlam bir temel oluşturmak için Ajax'ı kullanırsanız, kullanıcılar sitenize ve uygulamanıza geri döneceklerdir. Buna, görsel oyunları eklediğinizde, heyecanlı ve mutlu kullanıcılarınız olacaktır.

35 TUTORİAL örnek uygulama Aşağıda anlatılan örnek uygulamada herhangi bir framework kullanılmamıştır. Çünkü günümüzde kullanılan AJAX çatılarının tümünün sadece javascript kodu yazmayı gereksiz kılan javascript kodlarının yaptığı işleri arkaplanda JSP kodunun içine gömülmüş şekilde TAG kütüphaneleri ile gerçekleştirdiklerini bilmeliyiz. Bu uygulamanın amacı ise AJAX ı bir konsept olarak sunup ilkelerini herhangi bir çatı kullanmadan olduğu gibi anlatmaktır. Çünkü bizce AJAX tekniğini kavrayabilmiş, javascript yazımını benimsemiş bir web programcısı için mevcut çatılardan kendisi için en uygun olanı seçmesi ve kullanması daha doğru bir yöntemdir. Uygulama ortamı Uygulamayı denemek için: Eclipse 3.2 Apache Tomcat Sisteminizde kurulu olmalıdır. Aslında örneğimiz oldukça sade bir örnek olduğu için temelde elinizde herhangi bir jdk ve herhangi bir servlet container olması da yeterlidir. Ancak bundan sonraki anlatımlar Eclipse 3.2 ve tomcat in kurulu olduğu varsayılacaktır. Uygulamanın tanımı Aşağıdaki uygulama forum veya herhangi bir dinamik web portalına girişte karşılaşılan giriş (login) adımını AJAX tekniğini kullanarak gerçekleştirmeye yöneliktir. Bu bağlamda kullanıcıdan portala girmek için gerekli kullanıcı adı ve şifresi index.jsp sayfası aracılığıyla istenir. Formun içindeki alanlardan herhangi biri veya her ikis de eksik girimişse kullanıcı uyarılır. Bilgiler tam girilmişse bu bilgiler Login.java kütüğünde kodu bulunan java servletine iletilir. Servlet kullanıcı adının ali, şifresinin 1234 olup olmadığını kontrol eder. Eğer ad ve şifre doğru ise sayfada Hoş geldin ali yazar. Aksi takdirde kullanıcı adı veya parola hatalı uyarısı görülür. Bütün bu uyarı ve onay mesajları sayfanın yeniden yüklenmesine gerek kalmadan sanki bir masaüstü uygulamasıymışcasına AJAX tekniği kullanılarak kullanıcıya iletilir.

36 Uygulamanın gerçekleştirimi İndex.jsp İndex.jsp retrieveurl() ve processstatechange() fonksiyonlarını içermektedir. retrieveurl() fonksiyonu aracılığıyla bir XMLhttp istemi oluşturulur ve servlete gönderilir.tarayıcının türüne göre ya XMLHttpRequest ya da ActiveXObject("Microsoft.XMLHTTP") nesnesi oluşturulur ve servlete gönderilir.formda değişiklik yapılması durumunda processstatechange işlevi çağrılarak bu değişiklik ele alınır. processstatechange() fonksiyonu form üzerindeki işlemlere anında verilecek cevapların ele alınmasını gerçekleştirir.bu olayın gerçekleşebilmesi için istemin tamamlanıp servlete gönderilmiş olması ve servletten herhangi bir aksaklık olmadan yanıt gelmiş olması gerekmektedir. Her iki fonksiyonda da kullanıcıya gönderilen mesajlar html kodu içine gömülmüş span alanlarına mesaj yazdırılarak yapılmaktadır. Dikkat edilmesi gereken nokta her giriş düğmesine basıldığında span alanlarının içeriklerinin önce silinip sonra yazdırıldığıdır. Bir diğer nokta ise istem gönderiminin post metodu ile yapılmasıdır. Bu sayede aynı kullanıcı adı ve parola ile giriş yapıldığında her seferinde yeni bir cevabın üretilmesi sağlanmıştır. Bir başka deyişle oturumlar arasında oluşacak değişikliklerin yol açacağı hatalar engellenmiştir.

37 page language="java" contenttype="text/html; charset=iso "%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>uye GİRİŞİ</title> <script> var req; var k,p; /* Bu fonksiyon aracılığıyla bir XMLhttp istemi oluşturulur ve servlete gönderilir.tarayıcının türüne göre ya XMLHttpRequest ya da ActiveXObject("Microsoft.XMLHTTP") nesnesi oluşturulur ve servlete gönderilir.formda değişiklik yapılması durumunda processstatechange işlevi çağrılarak bu değişiklik ele alınır. */ function retrieveurl() { if (window.xmlhttprequest) { // Internet explorer değilse req = new XMLHttpRequest(); req.onreadystatechange = processstatechange; try { /* open() metodu ile istek (request)*/ req.open('post','login?username='+ document.getelementbyid('username').value+ '&password='+document.getelementbyid('password').value,true); catch (e) { alert(e); req.send(null); else if (window.activexobject) { // Internet explorer ise req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processstatechange; /* open() metodu ile istek (request)*/ req.open('post','login?username='+ document.getelementbyid('username').value

38 +'&password='+document.getelementbyid('password').value, true); req.send(); /* processstatechange() fonksiyonu form üzerindeki işlemlere anında verilecek cevapların ele alınmasını gerçekleştirir.bu olayın gerçekleşebilmesi için istemin tamamlanıp servlete gönderilmiş olması ve servletten herhangi bir aksaklık olmadan yanıt gelmiş olması gerekmektedir. */ function processstatechange() { if (req.readystate == 4) { // İstem gönderimi tamamlandı if (req.status == 200) { // Geçerli bir yanıt alındı k=document.uyeformu.username.value; p=document.uyeformu.password.value; var cells = document.getelementsbytagname("span"); for (var i = 0; i < cells.length; i++) { cells[i].innerhtml=""; /*bu if kontrolü ile kullanıcı her iki alanı da doldurdu ise girdiği bilgilerin doğru olup olmadığı istemimize servletin yanıt olarak göndermiş olduğu req.responsetext aracılığı ile kontrol edilmektedir. */ if(k!='' && p!=''){ /* req.responsetext 0 değilse kullanıcıya hoşgeldin mesajı verilir. */ if(req.responsetext!=0){ document.getelementbyid('result').style.fontsize="2.0em"; document.getelementbyid('result').style.color="blue"; document.getelementbyid('result').innerhtml ='Hoşgeldin '+k; /* req.responsetext 0 ise kullanıcıya kullanıc adı veya parola hatalı mesajı verilir. */ else if(req.responsetext==0){ document.getelementbyid('result').style.fontsize="1.0em"; document.getelementbyid('result').style.color="red"; document.getelementbyid('result')

39 .innerhtml ='Kullanıcı adı veya parola hatali'; /*kullanıcı adı boş bırakılmışsa ***Bu alan boş bırakılamaz*** mesajı kullannıcıya gönderilir. */ if(k==''){ var info = '***Bu alan boş bırakılamaz***'; document.getelementbyid('user').style.fontsize="0.9em"; document.getelementbyid('user').style.color="red"; document.getelementbyid('user').innerhtml=info; /*parola boş bırakılmışsa ***Bu alan boş bırakılamaz*** mesajı kullannıcıya gönderilir. */ if(p==''){ var info = '***Bu alan boş bırakılamaz***'; document.getelementbyid('pass').style.fontsize="0.9em"; document.getelementbyid('pass').style.color="red"; document.getelementbyid('pass').innerhtml=info; else { alert("problem: " + req.statustext); </script> </head> <body> <h2>giriş</h2> <span id="result"></span>

40 <! - Burada form action değeri aşağıdaki şekilde verilerek formun ilk elden java script tarafından ele alınacağı bildirilir. onsubmit="retrieveurl(); satırı ile GİRİŞ butonuna basılması ile kontrolün java scripte geçeceği bildirilir. --> <form action="javascript:void%200" method="post" name="uyeformu" onsubmit="retrieveurl();"> <table width="80%" border="1"> <tr> <td><b>kullanıcı adı:</b></td> <td><input type="text" name="username"><span id="user"></span></td> </tr> <tr> <td><b>parola:</b></td> <td><input type="password" name="password"><span id="pass"></span></td> </tr> <tr> <td colspan="1"><input type="submit" value="giriş"></td> </tr> </table> </form> </body> </html>

41 Login.java import java.io.ioexception; import java.io.printwriter; import javax.servlet.servletexception; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; /** * Servlet implementation class for Servlet: Login * */ public class Login extends javax.servlet.http.httpservlet implements javax.servlet.servlet { private static final long serialversionuid = 1L; protected void dopost(httpservletrequest req, HttpServletResponse response) throws ServletException, IOException { response.setcontenttype("text/html"); PrintWriter out = response.getwriter(); String username = req.getparameter("username"); String password = req.getparameter("password"); /*kullanıcı adı ali ve parolası da 1234 ise JSP ye yanıt olarak 1 gönderilir. Değilse de 0 gönderilir. */ if(username.equals("ali") && password.equals("1234")){ out.println(1); out.flush(); else { out.println(0); out.flush();

42 KAYNAKLAR "Introduction to Ajax: Understanding Ajax, a productive approach to building Web sites, and how it works" "Make asynchronous requests with JavaScript and Ajax: Use XMLHttpRequest for Web requests" "Ajax for Java developers: Build dynamic Java applications" Google GMail: Web'in çalışma şeklini değiştiren Ajax tabanlı bu harika uygulamayı inceleyin. Google Maps, başka bir Google tabanlı Web 2.0 uygulamasıdır. "Ajax: A New Approach to Web Applications": HTTP durum kodları: Head Rush Ajax, Brett McLauglin,, O'Reilly Media Java and XML, İkinci Basım, Brett McLaughlin (Ağustos 2001, O'Reilly Media, Inc.) Ajax Hacks,Bruce Perry, O'Reilly Media Ajax what is it good for?, Edward Traversa Ajax using XMLHttpRequest and Struts, Frank W. Zametti