Hacettepe Üniversitesi Bilgisayar Müh. Bölümü 2005 Güz Dön. Bil 447 Yazılım Müh. Lab. Dersi Araştırma Çalışması. 1. Giriş Ajax nedir?

Transkript

1 Hacettepe Üniversitesi Bilgisayar Müh. Bölümü 2005 Güz Dön. Bil 447 Yazılım Müh. Lab. Dersi Araştırma Çalışması Mehmet İnal Konu: Ajax 1 Giriş Ajax nedir? 1.1 Ajax'ın kullanım alanları 1.2 Avantajlar Dezavantajlar 1.3 Ajax'ın geleneksel yöntemlerle karşılaştırılması 2 Ajax etkileşiminin bir J2EE uygulamasındaki kullanımı 2.1 İstemci olayının oluşması 2.2 XMLHttpRequest nesnesinin yaratılması ve başlatılması 2.3 XMLHttpRequest nesnesinin çağrıda bulunması 2.4 İstemin ValidationServlet tarafından işlenmesi 2.5 ValidationServlet'in XML belgesi döndürmesi 2.6 XMLHttpRequest nesnesinin callback() methodunu çağırarak sonucu işlemesi 2.7 HTML DOM un günlenmesi 3 Sonuçlar 1. Giriş Ajax nedir? Ajax (Asynchronous JavaScript and XML) etkileşimli web uygulamaları yaratmak için kullanılan bir geliştirme tekniğidir. Örneğin Google Maps, Google Suggest ya da Gmail gibi sayfalarda, zengin devingen içerikli web uygulamaları Ajax'la hazırlanmaktadır. Bu uygulamalar klasik web uygulamalarına benzese de pluginlere veya tarayıcıya özel unsurlara gereksinim duymazlar. Geleneksel web uygulamaları, ekrandaki görüntünün ancak bir kısmı değişse bile tüm HTML sayfalarının tekrar yüklenmesini gerektirecek şekilde hazırlanmaktaydı. Ancak son birkaç yılda JavaScript ve CSS gibi teknolojilerin olgunlaşması sayesinde, tüm belli başlı web tarayıcılarında çalışan, yüksek düzeyde devingen özellikli sayfalar ortaya çıkmıştır. Bir HTML sayfası, JavaScript kullanarak sunucusuna asenkron olarak bilgi gönderebilir ve sunucudan XML belgeleri çekebilir. Çekilen XML belgeleri JavaScript tarafından kullanılarak HTML sayfasının Document Object Model (DOM) u değiştirilir veya günlenir. Bu etkileşim modeli son zamanlarda Asenkron JavaScript ve XML yani Ajax olarak adlandırılmaya başlanmıştır, ancak bu model aslında yeni değildir. Bu teknikler daha önce Windows platformunda Internet Explorer içinde (remote scripting terimi kullanılarak) ve Java pluginleri ve appletlerle birlikte uzun süre kullanılmıştı. Ancak performans ve tüm web tarayıcılarında kullanım yani taşınabilirlik açısından, JavaScript in XMLHttpRequest nesnesini getirmesiyle bugünkü Ajax ortaya çıktı diyebiliriz.

2 Ajax aşağıdaki teknolojilerden bir veya birkaçını kullanır: Web sayfalarını görüntülemek için HTML (ya da XHTML). JavaScript tarafından yönetilen, devingen görüntü elde etmek ve gösterilen bilgiyle etkileşimi sağlamak için kullanılan Document Object Model Web sunucusuyla asenkron olarak veri alışverişi sağlamak için XMLHttpRequest nesnesi. Alışveriş için genellikle XML kullanılmasına rağmen HTML veya diğer formatlar da kullanılabilir. Sonuçta Ajax bir teknoloji değildir, ancak yukardaki teknolojileri kullanan bir web uygulaması tekniğidir, yani bir web uygulaması mimarisidir. Bu araştırmada Ajax'ın genel tanımı, kullanım alanları, avantaj ve dezavantajları, eski yöntemlerle karşılaştırılması verilecek ve daha sonra J2EE temel alınarak bir örnek üzerinde nasıl çalıştığı anlatılacaktır Ajax'ın kullanım alanları Ajax'ın kullanım alanlarından bazıları aşağıda verilmiştir: Gerçek zamanlı olarak form verisi geçerlik denetimi: Bir formdaki kullanıcı idleri, seri numaraları, posta kodları gibi alanlarda, sunucu tarafından daha form teslim edilmeden geçerlik denetimi yapılması. Otomatik tamamlama: adresi, ad soyad, şehir gibi bazı form alanlarının, kullanıcı giriş yaptığı esnada otomatik olarak tamamlanması. Master detail formları: Bir istemci HTML sayfasında, kullanıcı master verileri seçtiğinde detay kısmının sayfa baştan yüklenmeden görünmesi örneğin bir ürün kategorisine tıklandığında o kategoriye ait ürünlerin, sayfa tazelenmeden ekrana yazılması. Kullanıcı arabirimi için sofistike kontroller: Ağaç yapıları, menüler, progress bar gibi kontrollerin tüm sayfa yeniden yüklenmeden kullanılabilmesi. Sayfa üzerinde veri tazelenmesi: Maç skorları, borsa bültenleri, hava durumu gibi sürekli değişen bilgiler için HTML sayfasının sunucuyu sürekli sorgulayarak değişiklikleri ekrana getirmesi. Sunucu tarafı bildirimleri: İstemciyi bir mesajla uyarma, sayfa bilgilerini tazeleme veya bir istemciyi başka bir sayfaya yönlendirme gibi işlemler için HTML sayfasının sunucudan olay bildirimi istemesi. Başka kullanım alanları da olmasına karşın, bu liste, Ajax sayesinde etkileşimli web uygulamalarının eskiye göre daha çok şey yapabildiğini göstermektedir Avantajlar Dezavantajlar Ajax kullanmanın getirdiği en büyük avantaj tüm bilgilerin tarayıcı sayfasında baştan yüklenmemesidir. Bu sayede web uygulaması çok sayıda kullanıcı etkileşimine daha hızlı yanıt verir ve değişmeyen bilgilerin ağ üzerinden gereksiz olarak sürekli ileri geri aktarılmaları engellenmiş olur. Ajax'ın kullandığı teknolojiler herkese açık olduğundan, tüm JavaScript kullanabilen tarayıcılar tarafından, işletim sistemi farkı gözetmeksizin desteklenirler (Macromedia Shockwave gibi önde gelen yazılımların pluginleri Linux'ta ancak son zamanlarda kullanılmaya başlanmıştır)

3 Tarayıcı için plugin gerekmemesine karşın, Ajax kullanıcıların tarayıcı ayarlarında JavaScript'in seçili olmasını zorunlu kulmaktadır. Geliştirilen Ajax uygulamaları farklı tarayıcıların ve platformların garipliklerine karşı titizlikle test edilmelidir. Ajax için geliştirilen bir dizi kütüphane sayesinde bu iş eskiye göre daha kolaylaşmıştır. Aynı şekilde hata toleranslı uygulamalar geliştirmek için ve JavaScript kullanamayan kullanıcılar için alternatif işlevsellik sunmak için de teknikler geliştirilmiştir. Ajax'a yönelik önemli bir eleştiri, bir uygulamada "geri" (back) tuşunun normal davranışını bozacağı şeklindeydi. Bir Ajax uygulamasında bir önceki konuma dönmek, sayfa dinamik olarak günlendiği için mümkün olmayabilir, zira tarayıcılar daha önceki sayfalar (history) listesinde sadece ziyaret edilen statik sayfaları tutarlar. Bütün olarak yüklenen statik bir sayfayla, dinamik olarak değiştirilen bir sayfa arasındaki ayrım ince olabilir; kullanıcılar genellikle bir web sayfasında geri tuşuna bastıkları zaman en son yaptıkları değişikliğin geri alınacağını umarlar. Ancak Ajax uygulamalarında bu böyle olmayabilir. Uygulama geliştiricileri bu soruna yönelik bir dizi çözüm üretmişlerdir. Bunların çoğu sayfa üzerinde görünmeyen bir IFRAME (bir HTML sayfasında diğer bir sayfaya ait nesnelerin görünmesi için kullanılan çerçeve nesnesi) kullanarak, daha önceki sayfalar listesini doldurmaya dayanır. Örneğin Google Maps, geri tuşuna basıldığında, görünmeyen bir IFRAME i arar ve sonucu ekrandaki Ajax elemanı üzerine geçirir. Bununla bağlantılı bir başka sorun da devingen web sayfalarını günlerken bir kullanıcının uygulamanın belli bir konumununa bookmark koymak istemesi durumunda çıkmaktadır. Bu sorun için de çözümler ortaya çıkmaya başlamıştır. Bu çözümlerin çoğu URL fragman belirteci (URL fragment identifier) ya da başka deyişle çapa (anchor) kullanırlar. Çapa sayesinde (URL in # den sonraki kısmı) uygulamanın belli bir durumu kaydedilir ve kullanıcıların bir duruma geri dönmeleri sağlanır. Bir çok web tarayıcısı JavaScript skriptlerinin çapaları dinamik olarak günlemelerine olanak sağlar. Böylece Ajax uygulaması görüntü içeriğine koşut olarak çapaları da günler. Yukarıda anlatılan çözümler geri tuşuyla ilgili olan bir çok mesele için de bir yaklaşım sağlarlar. Ağ gecikmesi (network latency) ya da kullanıcı istemiyle sunucu yanıtı arasında geçen süre bir Ajax uygulaması geliştirirken dikkatli bir biçimde değerlendirilmelidir. Kullanıcılara neden beklediklerinin açık bir şekilde bildirilmesi, verilerin akıllı bir biçimde önceden yüklenmeleri, XMLHttpRequest nesnesinin uygun biçimde kullanımı gibi konulara dikkat edilmezse kullanıcılar uygulama arayüzünde zaman kaybederler ve bunun nedenini tahmin edemezler. Kullanıcılara arka plan aktivitesi hakkında görsel geri bildirim aktarımı ve/veya verilerin ön yüklenmeleri ağ gecikmesi sorununa sıkça önerilen çözümlerdir. Bunların dışında şu dezavantajlardan sözetmek mümkündür: Karmaşıklık: Sunucu tarafındaki geliştiriciler açısından, sunum mantığı (presentation logic) bilgisi HTML istemci sayfalarında gerekliyken, sunucu tarafında istemciye XML içeriği gönderilmesi esnasında da gereklidir. HTML sayfası geliştiricilerinin JavaScript yeteneklerine sahip olmaları gereklidir. Zaman içinde yeni framework lerin geliştirilmesi ve var olanların evrimleşmesiyle etkileşim modeli desteklenecek ve Ajax uygulamaları daha kolay hazırlanabilecektir. XMLHttpRequest nesnesinin standartlaştırılması: XMLHttpRequest nesnesi henüz JavaScript spesifikasyonunda yer almamaktadır, bu yüzden nesnenin davranışları istemciye göre değişebilmektedir. Hata Ayıklama (debugging): Ajax uygulamalarını debug etmek zordur, çünkü işlem mantığı hem istemci hem de sunucu tarafında gömülüdür.

4 Görünebilir Kod: İstemci tarafındaki JavaScript kodları Ajax'ı destekleyen bir HTML sayfası açıldığında kolayca görünebilir. Zayıf tasarlanmış bir Ajax tabanlı uygulama hackerlara ve kopya çekmek isteyenlere açık olabilir. Sonuç olarak Ajax etkileşim modeli kullanan geliştiricilerin daha çok tecrübe kazanmasıyla, Ajax mimarisi için yeni framework ve örüntülerin (patterns) ortaya çıkması beklenmektedir. Her duruma uygun ("one size fits all") bir Ajax etkileşim framework ortaya çıkmasını ummak için henüz erkendir Ajax'ın geleneksel yöntemlerle karşılaştırılması Bu kısımda Ajax'ın nasıl çalıştığını daha iyi anlamak için geleneksel yöntemlerle arasındaki farklar anlatılacaktır. Ajax uygulamaları Internet üzerinden bir sunucuda çalışmak yerine nerdeyse kullanıcının makinasında yer alırmış gibi gözükürler. Bunun nedeni şudur: sayfalar günlenirler, ancak tamamen yenilenmezler. Bir HTTP istemi oluşturan her kullanıcı davranışı, Ajax motoruna (Ajax engine) bir JavaScript mesajı şeklindedir. Her kullanıcı istemine karşı gelen yanıt örneğin basit veri denetimi, bellekteki verileri değiştirme vs, sunucuya geri dönen bir yolculuk şeklinde olmaz. Ajax motoru bunları kendi başına halleder. Eğer motor sunucunun yanıt vermesini gerektiren bir şeye ihtiyaç duyarsa işlenmek üzere bilgi teslim edilmesi, ekstra arayüz kodu yüklenmesi veya sunucudan yeni veri çekilmesi motor bu istemleri asenkron olarak, genellikle XML kullanarak yerine getirir. Bu esnada kullanıcının uygulamayla etkileşimi aksamaya uğramaz. Geleneksel web uygulamaları temel olarak kullanıcı tarafından tamamlanmış formları sunucuya teslim ederler. Sunucu yeni bir sayfa göndererek yanıt verir. Sunucu her seferinde yeni bir sayfa yolladığından, bu uygulamalar yerel kopyalara göre daha yavaş çalışırlar. Öte yandan Ajax uygulamaları, web sunucusuna istemlerini sadece gerekli olan verileri elde etmek için gönderirler. Bu gönderim esnasında genellikle XML tabanlı web servisleri kullanılır. İstemci tarafında, JavaScript sunucu yanıtlarını işleme koyar. Sonuç ise sunucu tarafına daha verimli yanıt veren bir arayüz olacaktır, zira web tarayıcısı ve sunucu arasında yapılan veri alışverişi büyük ölçüde azaltılmıştır. Web sunucusunun işlem zamanından da büyük ölçüde tasarruf edilmiş olur, çünkü bu işlemlerin çoğunu istemci yapmaktadır. Klasik web uygulaması ile JavaScript ve XML kullanan Ajax uygulaması arasındaki fark şağıdaki çizimde gösterilmiştir:

5 Bir Ajax uygulaması web üzerindeki etkileşimin sürekli kesintiye uğrayıp yeniden başlaması durumunu, ara düzeyde bir katman oluşturarak önler. Bu katman istemci ve sunucu arasındaki Ajax motorudur. Araya bir katman koymak uygulamanın daha yavaş olacağını düşündürebilir, ancak bu durumda tersi doğrudur. Bir web sayfasını yüklemek yerine, tarayıcı JavaScript olarak yazılmış Ajax motorunu yükler. Bu motor hem kullanıcının gördüğü arayüzün çalıştırılmasından, hem de kullanıcının yerine sunucuyla haberleşmekten sorumludur. Ajax motoru kullanıcının uygulamayla olan etkileşimini zamanuyumsuz olarak, yani sunucuyla bağlantıdan bağımsız olarak gerçekleşmesini sağlar. Sonuçta kullanıcı hiçbir zaman bomboş bir tarayıcı ekranını başlatmaz ve bir kumsaati ikonuyla (hourglass icon) karşılaşmaz, yani sunucunun bir şeyler yapmasını beklemek zorunda kalmaz. Geleneksel uygulamaların zamanuyumlu iletişim örüntüsüyle, Ajax'ın zamanuyumsuz örüntüsü arasındaki karşılaştırma aşağıdaki şekilde verilmiştir:

6

7 2. Ajax etkileşiminin bir J2EE uygulamasındaki kullanımı Bundan önceki bölümde Ajax'ın ne olduğu, artıları ve eksileri, geleneksel uygulamalardan farkları anlatılmıştı. Bu bölümde ise daha önce anlatılanların uygulaması niteliğinde, Ajax'ın bir J2EE uygulamasında nasıl yer aldığı örnek olarak gösterilecektir. Verilecek örnekte, bir web uygulamasının statik bir HTML sayfası veya JSP teknolojisi kullanılarak hazırlanmış sayfanın bir HTML formu içerdiği ve sunucu mantığı gerektirdiği durumda, form verilerinin geçerlik denetiminin yapılması gerektiği var sayılmıştır. Örnekte sunucu tabanlı web bileşeni(servlet) olarak ValidateServlet isimli nesne kullanılmıştır. ValidateServlet geçerlik denetimi mantığını sağlayacaktır. Aşağıdaki şekilde bu örnekteki Ajax etkileşiminin detayları çizilmiştir:

8 Bu örnekteki Ajax etkileşimi aşağıdaki adımlardan oluşmaktadır: 1. İstemci olayının oluşması 2. XMLHttpRequest nesnesinin yaratılması ve başlatılması 3. XMLHttpRequest nesnesinin çağrıda bulunması 4. İstemin ValidationServlet tarafından işlenmesi 5. ValidationServlet'in XML belgesi döndürmesi 6. XMLHttpRequest nesnesinin callback() methodunu çağırarak sonucu işlemesi 7. HTML DOM un günlenmesi Aşağıda her adım detaylarıyla incelenecektir İstemci olayının oluşması JavaScript fonksiyonları bir olayın sonucu olarak çağrılırlar. validate() fonksiyonu bir bir form bileşeni üzerindeki onkeyup olayına map edilir. <input type="text" size="20" id="userid" name="id" onkeyup="validate();"> Yukarıdaki form elemanı, form alanı üzerinde bir tuşa her basıldığında validate() i çağırır XMLHttpRequest nesnesinin yaratılması ve başlatılması Bir XMLHttpRequest nesnesi başlatılır ve konfıgüre edilir. var req; function validate() { var idfield = document.getelementbyid("idfield"); var url = "validate?id=" + escape(idfield.value); if (window.xmlhttprequest) { req = new XMLHttpRequest(); else if (window.activexobject) { req = new ActiveXObject("Microsoft.XMLHTTP"); req.open("get", url, true); req.onreadystatechange = callback; req.send(null); Burada validate() fonksiyonu XMLHttpRequest nesnesinin open metodunu başlatır. open metodu üç argüman alır. GET veya POST içeren bir URL string (HTTP metodunu belirtmek için), hedef URL belirtmek için bir string ve çağrının asenkron yapılıp yapılmayacağını belirten bir mantıksal değişken. Bir

9 etkileşim için bu mantıksal değişken true değerini taşıyorsa, bir geri çağırım (callback) fonksiyonu belirtilmelidir. Callback fonksiyonu bu örnekte req.onreadystatechange =callback; deyimi ile belirtilmiştir XMLHttpRequest nesnesinin çağrıda bulunması req.send(null); deyimine erişildiğinde, çağrı yapılır. GET kullanılması durumunda null kullanılabilir veya burası boş bırakılabilir. Bu fonksiyon XMLHttpRequest nesnesi üzerinde çağrıldığı zaman, nesne başlatıldığı zamanki URL üzerine bir çağrı yapılır. Bu örnekte gönderilen veri (id), bir URL parametresi olarak dahil edilir. HTTP GET, iki aynı istem aynı sonuçları döndüreceği zaman kullanılmalıdır. HTTP GET metodu kullanılırken, URL in uzunluğu bazı tarayıcılar tarafından ve sunucu taraflı web container lar tarafından kısıtlandırılabilir. HTTP POST metodu, veri gönderiminin sunucu tarafındaki uygulama durumunu etkileyeceği zamanlarda kullanılmalıdır. Bir HTTP POST, XMLHttpRequest nesnesi üzerindeki Contenttype başlığına değer aktarımı gereğini duyar: req.setrequestheader("content Type", "application/x www formurlencoded"); req.send("id=" + escape(idtextfield.value)); Form değerleri JavaScript üzerinden gönderileceği zaman, alan değerlerinin hangi encodingde olacağına dikkat edilmelidir. JavaScript de escape() adlı bir fonksiyon, yerel değerlerin doğru kodlandığından ve özel karakterlerin doğru biçimde belirtildiğinden emin olmak için kullanılır İstemin ValidationServlet tarafından işlenmesi "validate" adlı bir URI ye maplenmiş olan servlet, kullanıcı id sinin veritabanında bulunup bulunmadığını kontrol eder. Servlet XMLHttpRequest i herhangi bir HTTP istemi gibi işleme koyar. Aşağıdaki örnekte bir sunucunun id parametresini istem youyla alması ve geçerlik denetiminin yapılması gösterilmektedir: public class ValidationServlet extends HttpServlet { private ServletContext context; private HashMap users = new HashMap(); public void init(servletconfig config) throws ServletException { this.context = config.getservletcontext(); users.put("greg","account data"); users.put("duke","account data"); public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException {

10 String targetid = request.getparameter("id"); if ((targetid!= null) &&!users.containskey(targetid.trim())) { response.setcontenttype("text/xml"); response.setheader("cache Control", "no cache"); response.getwriter().write("valid"); else { response.setcontenttype("text/xml"); response.setheader("cache Control", "no cache"); response.getwriter().write("invalid"); Bu örnekte kullanıcı bilgilerini tutmak için basit bir HashMap kullanılmıştır. Örnekte "duke" kullanıcı id sinin girildiği varsayılmıştır ValidationServlet'in XML belgesi döndürmesi Girilmiş olan "duke" kullanıcı id si, kullanıcıları tutan "users" Hashmap inde bulunmamaktadır. ValidationServlet, bir XML belgesini "message" elemanının değeri "invalid" olacak şekilde yanıt olarak gönderir. Daha karmaşık kullanımlarda DOM, XSLT ya da diğer API ler kullanılarak bir yanıt oluşturulur. response.setcontenttype("text/xml"); response.setheader("cache Control", "no cache"); response.getwriter().write("invalid"); Burada dikkat edilmesi gereken Content Type a "text/xml" ve Cache Control a "no cache" değerlerinin verildiğidir. XMLHttpRequest nesnesi sadece "text/xml" değerli Content Type içeren istemleri değerlendirecektir. Cache Control un "no cache" değerine sahip olması ise tarayıcıların yerel olarak yanıtları saklamasına engel olacaktır. Bu sayede aynı URL (ve URL parametreleri) ile farklı yanıtlar alınması önlenecektir XMLHttpRequest nesnesinin callback() methodunu çağırarak sonucu işlemesi XMLHttpRequest nesnesi daha önce, nesnedeki readystate adlı durumda değişiklik olduğu zaman callback() fonksiyonunu çağırmak üzere ayarlanmıştı. Varsayalım ki ValidationServlet e bir çağrı oldu ve readystate "4" durumundaydı, yani XMLHttpRequest çağrısı tamamlanmış durumdaydı. HTTP nin "200" durum kodu başarılı bir HTTP etkileşimini belirtmektedir: function callback() { if (req.readystate == 4) { if (req.status == 200) { // update the HTML DOM based on whether or not message is valid

11 Tarayıcılar belgelerin nesnesel bir temsilini tutarlar, bu temsil Document Object Model (DOM) Belge nesne modeli olarak adlandırılır. Bir HTML sayfasında JavaScript ın DOM a erişmesi gereklidir ve sayfa yüklendikten sonra JavaScript in DOM u değiştirmesi için API ler mevcuttur. Başarılı bir istemin ardından JavaScript kodu HTML sayfasının DOM unu değiştirme hakkına sahiptir. XML belgesinin nesnesel temsili ValidationServlet den alındıktan sonra JavaScript kodu req.responsexml deyimini kullanarak bu temsili kullanır (req bir XMLHttpRequest nesnesidir). DOM API leri yardımıyla JavaScript, XML belgesinin içeriğini kullanarak, HTML sayfasının DOM unu değiştirir. DOM API lerinin JavaScript te nasıl kullanıldığını anlamak için ValidateServlet tarafından döndürülen aşağıdaki XML belgesine bakabiliriz: <message> valid </message> Yukardaki örnek message elemanının değerini "valid" ya da "invalid" stringi olarak içeren basit bir XML fragmanıdır. Daha ileri bir örnek birden fazla mesaj ve kullanıcıya sunulacak geçerli isimler içerebilir. function parsemessage() { var message = req.responsexml.getelementsbytagname("message")[0]; setmessage(message.childnodes[0].nodevalue); parsemessage() fonksiyonu ValidationServlet den alınan XML belgesini işlemek için kullanılır. Bu fonksiyon setmessage() fonksiyonunu message elemanı ile çağırarak HTML DOM un günlenmesini sağlar HTML DOM un günlenmesi JavaScript HTML DOM un herhangi bir elemanına, bir dizi API kullanarak erişebilir. Bunun için önerilen yol document.getelementbyid("useridmessage") çağrısıdır. Burada "useridmessage" HTML belgesinde gözüken elemanın id özniteliğidir. Bu elemana yapılan bir referansla JavaScript bir elemanın özniteliklerini, stil özelliklerini değiştirebilir, ekleme yada silme yapabilir, çocuk elemanları (child elements) değiştirebilir. Bir elemanın gövde içeriğini (body content) değiştirmek için kullanılan yaygın bir metod, elemanın innerhtml özelliğine aşağıdaki örnekteki gibi bir değer atamaktır : <script type="text/javascript"> function setmessage(message) { var usermessageelement = document.getelementbyid("useridmessage"); usermessageelement.innerhtml = "<font color=\"red\">" + message + " </font>"; </script> <body> <div id="useridmessage"></div> </body>

12 HTML sayfasının etkilenecek bölümleri, innerhtml e değer atamasından hemen sonra yenilenirler. innerhtml özelliği <image> ya da <iframe> gibi elemanları içerebilir. Bu elemanlar tarafından belirtilen içerik de aynı şekilde bulunur ve yenilenir. Bu yaklaşımın temel dezavantajı, JavaScript kodunun yukarıda görüldüğü gibi string lerle karıştırılması sonucu okunabilirliğin azalmasıdır. HTML DOM u değiştirmenin başka bir yolu da devingen olarak yeni elemanlar yaratılması ve bu elemanların çocuk olarak bazı hedef elemanların altına yapıştırılmasıdır. Alltaki örnekte bu yaklaşım gösterilmiştir: <script type="text/javascript"> function setmessage(message) { var usermessageelement = document.getelementbyid("useridmessage"); var useridmessagefont = document.getelementbyid ("useridmessagefont"); var messageelement = document.createtextnode(message); if (usermessageelement.childnodes[0]) { // update the elements useridmessagefont.replacechild(messageelement, else { // create the new elements useridmessagefont.childnodes[0]); var fontelement = document.createtextnode("font"); fontelement.setatribute("id", "useridmessagefont"); fontelement.setatribute("color", "red"); usermessageelement.appendchild(fontelement); fontelement.appendchild(messageelement); </script> <body> <div id="useridmessage"></div> </body> Yukardaki kodda görüldüğü üzere JavaScript DOM API leri bir eleman yaratmak için veya programlamayla bir elemanı değiştirmek için kullanılabilirler. JavaScript in DOM API lerinin farklı tarayıcılarda desteklenmeleri farklı olabileceğinden uygulama geliştirirken dikkatli olunması gereklidir.

13 3. Sonuçlar Bu çalışmada görüldüğü gibi, Ajax uygulamaları geliştirmedeki sorunların çoğu teknik sorunlar değildir. Ajax'ın kullandığı teknolojiler ve metodlar yeterince olgun düzeyde, kararlı ve kolay anlaşılabilir niteliktedir. Ajax'la çalışan uygulama tasarımcılarına Ajax tekniklerinin geliştirilmesinde büyük sorumluluk düşmektedir. Ajax etkileşimlerinin çözebileceği bir çok olası problem vardır. J2EE teknolojisi HTTP işlemleri, veritabanı, web servisleri, XML işleme ve iş nesneleri için sunduğu API lerle Ajax tabanlı uygulamalar geliştirmek için ideal bir ortam oluşturmaktadır. Bu etkileşim modelinin daha iyi anlaşılmasıyla birlikte, günümüz web uygulamaları daha etkileşimli hale gelebilir ve bu sayede kullanıcılara web ortamında daha iyi sunumlu uygulamalar hazırlanabilir. Referanslar: Ajax Kullanan bazı Siteler adresinde Ajax kullanan belli başlı sitelerin bir listesi yer almaktadır. Fikir vermesi açısından bu sitelere göz atılabilir.