IT504 ~~DOM~~ Belge Nesne Modeli II Yrd. Doç. Dr. Yuriy Mishchenko
DOM hierarşi ile çalışma nedir? DOM, bir HTML sayfası ile ilgili işlemleri HTML kodundan tamamen ayırmak ve bu işlemleri DOM nesne hierarşisi üzerinde yapabilmek hedeflemektedir http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi ile çalışma nedir? En temel seviyede, web programcısının DOM ile çalışması sayfadaki HTML elemanlarının özellikleri güncelleştirme ve olay işlemeleri ile ilgilenmektedir Bunun dışında, DOM hierarşisi ile çalışma da önemli olan kısmıdır; bunlar DOM hierarşisinde navigasyon ve DOM taranması ile DOM hierarşisi güncelleştirilmesidir http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM taranması, DOM nodlarının arasında belirli bir alt kümesinin seçilmesi demektir http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşisinde elemanlara erişmek için birkaç temel araç var: document.getElementById, belirli elemana erişmek için document.getElementsByClass, belirli eleman sınıfına erişmek için document.getElementsByName, belirli "name" özelliğine sahip olan form elemanlarına erişmek için document.getElementsByTagName, sayfadaki belirli taglara erişmek için http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Daha ileri durumlarda bu araçlar yeterli değil, aslında birçok durumda gereken sayfanın elemanları bu şekilde kesinleştirilemez Bu durumda, DOM hierarşisinde gereken elemanları direkt olarak aranmasına ihtiyaç oluşabilir Bu tip işlemlere DOM tarama işlemi diyoruz http://www.scinetcentral.com/~mishchenko/MIT504.html
DOMda navigasyon DOM elemanlarının navigasyon metotları element.childNodes – bir elamanın çocuk elemanlarının listesi, array dir element.firstChild – bir elemanın ilk çocuğu element.lastChild – bir elemanın son çocuğu element.nextSibling – sonraki kardeşi element.previousSibling – önceki kardeşi element.parentNode – elemanın babası http://www.scinetcentral.com/~mishchenko/MIT504.html
DOMda navigasyon <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> previousSibling parentNode firstChild, lastChild ... nextSibling http://www.scinetcentral.com/~mishchenko/MIT504.html
DOMda navigasyon DOM hierarşisi taranması gerekliliği var olduğu zaman, DOM hierarşisini geçmek ve gereken eleman alt kümesini elde etmek için DOM navigasyon metotları kullanılmalı http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşisi, yapısı olarak bir ağaç veya bir graftır; bu nedenle DOM hierarşisini incelemek için genel graf tarama çözümleri kullanılabilir DOM hierarşisini taramak için enine ve derinlikle (derine) iki genel graf arama yöntemi kullanılabilir http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Enine arama, DOM hierarşisini katman katman inceler Kökten itibaren, her adımda belirli bir katmandaki elemanları geçirip onların çocukları toplanır Öbür adımda özyineleme anlamında bu çocukları gözden geçirilir, VB http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi enine taranması DOM kökü http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması 1 DOM hierarşi enine taranması DOM kökü http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi enine taranması DOM kökü 2 http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi enine taranması DOM kökü 3 http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi enine taranması DOM kökü 4 http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Örnek – javascript açılan menü http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Neçin hierarşi taranması gerekebilir? Javascript açılan menü, adım 1: listedeki elemanları ekranda yerleştirmek; Javascript kullanarak ul ve li elemanlarının belirli pozisyonlara götürülmesi gerekiyor Bu iş için enine tarama doğal –menünün elemanları katman katman yerleştirilmektedir http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM enine tarama kodu function eninetarama(rootNode,handleFunction) { level=0; var thisLevelNodes = new Array(rootNode); while(thisLevelNodes.length>0) { //handleFunction'in uygulanmasi for(var i=0;i<thisLevelNodes.length;i++) handleFunction(thisLevelNodes[i],level); } //hierarşide ilerleme var nextLevelNodes = new Array(); if(thisLevelNodes[i].hasChildNodes()) for(var k=0;k<thisLevelNodes[i].childNodes.length;k++) nextLevelNodes.push(thisLevelNodes[i].childNodes[k]); thisLevelNodes = nextLevelNodes; level++; http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması ul li ul li li li li ul li ul li li li <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html> ul li ul li li li li ul li ul li li li http://www.scinetcentral.com/~mishchenko/MIT504.html
Menü elemanı yerleştirme fonksiyonu UL elemanları, ilgili babası LI elemanın tam sağda yerleştirilir; if(node.tagName == 'UL') { var top = 0; var left = menuWidth; node.style.position='absolute'; node.style.display='block'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.listStyleType = 'none'; } http://www.scinetcentral.com/~mishchenko/MIT504.html
Menü elemanı yerleştirme fonksiyonu li, menü tipine bağlı olarak sırayla yerleştirilir – burada dikey düzende if(node.tagName == 'LI') { left=0; if(node.previousSibling == null) top = 0; else top+=menuHeight; node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.width = menuWidth + 'px'; node.style.border='solid black 1px'; } http://www.scinetcentral.com/~mishchenko/MIT504.html
http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Derinlikle (derine) arama, DOM hierarşi DOM kökü ile başlayınca, elemanın çocukları varken ilk çocuklarını takip eder http://www.scinetcentral.com/~mishchenko/MIT504.html
Enine tarama kodu (özyineleme) function derinetarama(currentNode,handleFunction,level) { handleFunction(currentNode,level); if(currentNode.hasChildNodes()) { derinetarama(currentNode.firstChild,handleFunction,level+1); } if(currentNode.nextSibling!=null) derinetarama(currentNode.nextSibling,handleFunction,level); http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi derine taranması DOM kökü http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi derine taranması 1 DOM kökü 2 3 4 5 6 7 8 http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Javascript açılan menü elemanlarının ekranda yerleştirilmesi http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Derine taramada, menünün elemanlarının katman sırasında geçirilmesi ellerimizde yok, yerleştirme fonksiyon şu sıradan bağımsız olarak çalışmalı, yani yerleştirmeyi göreli olarak, baba/kardeş elemanına göre yapmamız gerekiyor http://www.scinetcentral.com/~mishchenko/MIT504.html
Menü elemanı yerleştirme fonksiyonu ul, baba li elemanına göre pozisyon alır, if(node.tagName == 'UL') { var top = 0; var left = 0; if(node.parentNode.tagName == 'LI') left = node.parentNode.offsetLeft + node.parentNode.offsetWidth; } node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.listStyleType = 'none'; http://www.scinetcentral.com/~mishchenko/MIT504.html
Menü elemanı yerleştirme fonksiyonu li, sırayla menü tipine göre yerleştirilir – burada dikey düzende if(node.tagName == 'LI') { var top=-1; var left=0; var width=50; var findPreviousLiNode=node.previousSibling; while(findPreviousLiNode.tagName!='LI' && findPreviousLiNode.previousSibling!=null) findPreviousLiNode=findPreviousLiNode.previousSibling; } if(findPreviousLiNode.tagName=='LI') top=findPreviousLiNode.offsetTop + findPreviousLiNode.offsetHeight; node.style.display='block'; node.style.position='absolute'; node.style.top = top + 'px'; node.style.left = left + 'px'; node.style.width = width + 'px'; node.style.border='solid black 1px'; http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Javascript açılan menünün diğer işlemleri: adım 2: altmenünün ul elemanlarının saklanması adım 3: li elemanlarına altmenü açıp kapatan olay işleyicilerinin atanması document.getElementsByTagName kullanarak yapılabilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Enine taranma kodu Altmenüleri sakla: uller=document.getElementById("menu").getElementsByTagName('UL'); for(var i=0;i<uller.length;i++) { uller[i].style.display='none'; } Açıp kapatan olay işlemcileri: liler=document.getElementById("menu").getElementsByTagName('LI'); for(var i=0;i<liler.length;i++) liler[i].addEventListener("mouseover",showhidelistener,false); liler[i].addEventListener("mouseout",showhidelistener,false); http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Javascript açılan menüde olay işleme Javascript açılan menüde altmenüleri açıp kapatan onmouseover/onmouseout olay işleyicisi var olmalı Ancak şu işleyicinin tasarımı basit değil http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Buraya Mevcut sorunlar: Bir LI elemanından fare ayrıldığında fakat bağlı altmenüye girdiğinde, hem altmenünün onmouseover hemde bırakıldığı LI elemanının onmouseout olayları tetiklenir; sonuç olarak, fare altmenüye girdiğine rağmen, onmouseout olayından dolayı LI elemanının kapanması için altemenü de kapanır Söz konusu olaylar yukarı doğru yayılır ve tüm LI elemanlarında işleyicileri tetikler, yani olayların yayılması durdurulması gerekiyor http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Mesela, bu fonksiyon açma kapatma işleyicisi olarak olamaz http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek function hideshowlistener(event) { var target = event.target; altULNode = target.firstChild; if(event.type == 'mouseover') { altULNode.style.display = 'block'; } else if(event.type == 'mouseout') altULNode.style.display = 'none'; http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması İlgili fare olay işlemeleri zor; Fare ayrıldığında bir saklanma talebi oluşturulmalı, bu talep daha sonra (örneğin 100ms sonra) işletilmeli Fare altmenüye girdiğinde, şu talep iptal edilip saklanma işlemi gerçekleşmez Bu açıdan farenin hareketleri incelenmeli ve ayrı ayrı işletilmeli http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek function hidelistener(event) { ... if(event.type == 'mouseout') { //ELEMANI SAKLAMA KUYRUGUNE EKLE queuedHideNode = target; queuedHideDirection = 'all'; setTimeout(hidenode,100); } http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması Hiç saklama altmenüleri sakla <!DOCTYPE html> <html> <body> <ul id="menu"> <li>Menu 1 <ul> <li>Menu 1>1</li> <li>Menu 1>2</li> </ul> </li> <li>Menu 2</li> <li>Menu 3 <li>Menu 3>1 <li>Menu 3>1>1</li> <li>Menu 3>1>2</li> <li>Menu 3>2</li> </body> </html> Hiç saklama altmenüleri sakla altmenüleri ve kendisini sakla Hepsini sakla http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek http://www.scinetcentral.com/~mishchenko/MIT504.html function hidelistener(event) { ... if(event.type == 'mouseover') { //ONMOUSEOUT EMENANININ SAKLANMA IPTALI if(queuedHideNode != null) //AYNI MENU ICINDE HAREKET if(queuedHideNode.parentNode.isSameNode(target.parentNode)) queuedHideDirection = 'down'; } //UST MENUYE HAREKET if(queuedHideNode.parentNode.parentNode.isSameNode(target)) else if(queuedHideNode.parentNode.parentNode.parentNode.isSameNode(target.parentNode)) queuedHideNode = target.parentNode; //ALT MENUYE HAREKET if(queuedHideNode.isSameNode(target.parentNode.parentNode)) queuedHideNode = null; queuedHideDirection = 'none'; http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek function hidelistener(event) { ... if(event.type == 'mouseover') { //ALT-MENU GOSTER findULNode = target.firstChild; while(findULNode.tagName != 'UL' && findULNode.nextSibling != null) findULNode = findULNode.nextSibling; } if(findULNode.tagName == 'UL') findULNode.style.display = 'block'; event.stopPropagation(); http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek function hidenode() { if(queuedHideNode == null) return; hidenodesdown(); if(queuedHideDirection == 'down') return; hidenodesup(); queuedHideNode=null; queuedHideDirection=null; } http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek function hidenodesdown() { //aşağıdakileri sakla uller = queuedHideNode.getElementsByTagName('UL'); for(var i = 0;i<uller.length;i++) { uller[i].style.display='none'; } function hidenodesup() { //yukarıdakileri sakla currentNode=queuedHideNode; while(currentNode.parentNode != null) if(currentNode.tagName == 'UL' && currentNode.parentNode.tagName == 'LI') currentNode.style.display='none'; currentNode=currentNode.parentNode; http://www.scinetcentral.com/~mishchenko/MIT504.html
http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM taranması DOM hierarşi içinde navigasyon (baba, çocuk, önceki, sonraki) DOM hierarşi taranması (enine, derine, aşağı ve yukarı) Javascript açılan menü örneğinde, DOM taranması teknikleri ve ilgili olay işleme http://www.scinetcentral.com/~mishchenko/MIT504.html
http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşisi güncelleştirme Javascript DOM'da, web sayfasını direkt olarak oluşturma ve değiştirmeye imkan var Bu şekilde web sayfası ile çalışma, DOM hierarşisi içinde yeni elemanların eklenme, kaldırılma ve taşınması olarak düşünülmeli http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi güncelleştirme DOM kökü KALDIRMA http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi güncelleştirme DOM kökü EKLEME http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi güncelleştirme DOM kökü KALDIRMA+EKLEME=TAŞIMA http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi güncelleştirme DOM hierarşisi ile işlemleri document.createElement, yeni elemanı oluştur document.createAttribute, elemanın özelliği yap document.createTextNode, elemanın metni yap document.normalize, hierarşiden boş nodlar çıkart document.renameNode, elemanı değiştir http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi güncelleştirme DOM hierarşisi güncelleştirme metotları element.appendChild, yeni eleman ekle element.cloneNode, elemanın kopyası element.insertBefore, yeni elemanı ekle element.removeChild, elemanı kaldır element.replaceChild, elemanı değiştir element.normalize, DOM'dan boş nodları çıkart http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <body> <h1>Hello</h1> <script> var btn=document.createElement("BUTTON"); var txt=document.createTextNode("CLICK ME"); btn.appendChild(txt); document.body.appendChild(btn); </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <body> <img src="klematis.jpg" width="150" height="113" id="rs1"><br/> <script> var nod = document.createAttribute("src"); nod.nodeValue = "klematis2.jpg"; document.getElementById("rs1").attributes.setNamedItem(nod); </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <body> <script> var link=document.createElement("A"); link.href="http://google.com"; var txt=document.createTextNode("CLICK ME"); link.appendChild(txt); var title=document.createAttribute("title"); title.nodeValue="http://yahoo.com"; link.attributes.setNamedItem(title); document.body.appendChild(link); </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek Coffee Tea Milk Water <!DOCTYPE html> <html> <body> <ul id="myList1"><li>Coffee</li><li>Tea</li></ul> <ul id="myList2"><li>Water</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var itm=document.getElementById("myList2").lastChild; var cln=itm.cloneNode(true); document.getElementById("myList1").appendChild(cln); } </script> </body> </html> Coffee Tea Milk Water http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek Milk Coffee Tea Water <!DOCTYPE html> <html> <body> <ul id="myList1"><li>Coffee</li><li>Tea</li></ul> <ul id="myList2"><li>Water</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var node=document.getElementById("myList2").lastChild; var list=document.getElementById("myList1"); var targetNode=list.childNodes[0]; list.insertBefore(node,targetNode); } </script> </body> </html> Milk Coffee Tea Water http://www.scinetcentral.com/~mishchenko/MIT504.html
DOM hierarşi güncelleştirme NOT: DOM appendChild ve insertBefore metotları, aslı DOM hierarşinin nodunu yeni yere yerleştirir, yani eleman gerçekten taşınır; eğer elemanın kopyasının yerleştirilmesi gerekirse, cloneNode metodu kullanılmalı! http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <body> <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var list=document.getElementById("myList"); list.removeChild(list.childNodes[0]); } </script> </body> </html> Coffee Tea Milk http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek Coffee -> Water Tea Milk <!DOCTYPE html> <html> <body> <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var textnode=document.createTextNode("Water"); var item=document.getElementById("myList").childNodes[0]; item.replaceChild(textnode,item.childNodes[0]); } </script> </body> </html> Coffee -> Water Tea Milk http://www.scinetcentral.com/~mishchenko/MIT504.html
Egzersiz-1 Sıralama oynu: İki kutu var, sol kutuda rastgele sırada 1 dan 10 a kadar sayılar yazılır, sağ kutu ise boş Sol kutudaki sayı tıklandığında, o sayı sol kutudan sağ kutunun altına eklenmiş oluyor Amaç: tüm sayıları artış sırasında sağ kutuya yerleştirmek http://www.scinetcentral.com/~mishchenko/MIT504.html
Egzersiz-1 5 2 3 3 2 3 6 4 3 5 8 6 10 8 4 10 http://www.scinetcentral.com/~mishchenko/MIT504.html
Egzersiz-2 Son dersten javascript açılan menüyü düşünün, fakat şimdi açılan menü bir HTML kodu yerinde bir Javascript dizisi olarak belirtilmiş, var menu=[["Menu 1",["Menu 1>1","Menu 1>2"]],"Menu 2",["Menu 3",[["Menu 3>1", ["Menu 3>1>1","Menu 3>1>2"]],"Menu 3>2"]]]; http://www.scinetcentral.com/~mishchenko/MIT504.html
Egzersiz-2 Bu diziyi okuyup Javascript DOM hierarşisi güncelleştirme fonksiyonları kullanarak, açılan menü bir "ul" liste şeklinde oluşturun ve onun üzerinde açılan menüyü tamamlayınız; programınız hiç HTML kodu içermemeli (yani temel html, head, body vb dışında) http://www.scinetcentral.com/~mishchenko/MIT504.html
Egzersiz-2 <!DOCTYPE html> <html> <body> <script> var menu=[["Menu 1",["Menu 1>1","Menu 1>2"]],"Menu 2",["Menu 3",[["Menu 3>1",["Menu 3>1>1","Menu 3>1>2"]],"Menu 3>2"]]]; ... </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
http://www.scinetcentral.com/~mishchenko/MIT504.html
Javascript DOM araçları Web sayfası, DOM hierarşi güncelleştirme metotlarını kullanarak Javascript'ten tamamen oluşturulabilir ve daha sonra nasıl gerekiyorsa güncelleştirilebilir Web sayfasındaki elemanların DOM metotları kullanarak özellikleri tamamen ayarlanabilir Web sayfasının fare hareketleri, tıkları, klavye girişi vb olaylar hakkında DOM metotları kullanarak bilgi elde edilebilir ve tepki verebilir Web sayfasının düzeni ve davranışı ileri şekilde ayarlanabilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Javascript DOM araçları Bunlar, normal masaüstü uygulamalarının temel özellikleri Bu şekilde Javascript DOM, web tarayıcıda direkt olarak ve Javascript ve DOM kullanarak, ileri uygulamaların oluşturulabilmesine yol açar http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet Uygulamaları Tam özellikli, web tarayıcı tabanlı ve Javascript DOM veya benzer bir kullanıcı tarafı teknolojisi (yani Flash veya Java(FX)) kullanan uygulamalara Rich Internet Application, RIA veya Zengin İnternet Uygulamaları denir http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet Uygulamaları http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet Uygulamaları RIA uygulamaları için Javascript DOM yardımcı oluyor, fakat şu anda RIA'ler için bizde önemli bir araç eksiktir Yani, eğer oluşturduğumuz RIA uygulaması herhangi bir amaçla sunucuyla iletişime girmek zorunda olursa, http isteği göndermek için RIA'nin yeniden indirilmesi gerekiyor – HTML/DOM'da sunucuya veri sadece bu şekilde gönderilebilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet Uygulamaları Bu çok büyük bir sorun: Büyük RIA için indirme süresi uzun olabilir Bilgisayarın kaynakları fazla kullanılabilir Kullanıcının normal çalışma düzeni baya bozulur http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet Uygulamaları Bu sorunun üstüne gelmek için, AJAX teknolojisi sunulmuştur http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX nedir? AJAX = Asynchronous JavaScript and XML AJAX, web sayfası tekrar indirmeden sunucuya veri gönderip cevabı elde edebilen bir web teknolojisidir AJAX bir standart değil, ancak yukarıdaki ihtiyaca cevaben Microsoft ve diğer ana tarayıcılar tarafından geliştirilmiş bir mekanizma http://www.scinetcentral.com/~mishchenko/MIT504.html
XMLHttpRequest nesnesi AJAX Temel AJAX süreci: Web sayfasının javascripti Sunucu Http İsteği XMLHttpRequest nesnesi Http Cevabı http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX AJAX işlemleri, Javascript programında XMLHttpRequest nesnesi içinde yasıyor Javascript programı, XMLHttpRequest nesnesine HTTP istek için gereken bilgi veriyor XMLHttpRequest nesnesi ilgili http isteği kendi içerisinde, dış javascripti etkilemeden sunucuya iletiyor XMLHttpRequest nesnesi sunucunun cevabını bekliyor ve o cevabı Javascript programında kullanılabilir hale götürüyor http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX NOT 1: sunucu ile iletişim Javascript'ten saklı olarak XMLHttpRequest nesnesi içinde dir; XMLHttpRequest tarayıcının bir nesnesidir, yani ne DOM nede Javascriptin aslı bir elemanı değil, ayrıca farklı tarayıcılarda farklı şekilde uygulanabilir (IE6 ve IE5) ~~XMLHttpRequest, Javascript dışında olan bir tarayıcının nesnesi dir~~ http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX NOT 2: XMLHttpRequest sunucu ile normal şekilde haberleşiyor, XMLHttpRequest'in http isteği ve normal tarayıcının http isteği arasında hiç fark yok ~~ XMLHttpRequest tarayıcının özel bir HTTP işleyici modülüdür ~~ http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX NOT 3: XMLHttpRequest'in sunucu ile iletişimi ASYNCHRONOUS, yani sunucuya isteği yaparken javascript programı normal olarak devam edebilir, javascript programı sunucudan cevabın geldiğini ek olarak ve daha sonra kontrol etmeli http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }; xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Yeni metin indir</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX XMLHttpRequest HTTP isteği oluşturma: AJAX haberleşmesinin ilk adımı, HTTP isteğin hazırlanması ve sunucya yollandırılmasıdır Bunlar, XMLHttpRequest nesnesinin open ve send metotlarını kullanarak yapılır http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX XMLHttpRequest.open metodu şu şekilde: XMLHttpRequest.open(HTTP_isteği türü ("GET"/"POST"), sunucu_url, asynchronous? (true/false)) XMLHttpRequest.send metodu şu şekilde: XMLHttpRequest.send(string) http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX HTTP GET isteklerinde, sunucuya bir parametre bilgileri gönderilirse, o bilgi url'nin içerisinde gönderilir xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true); GET istekleri daha kolay ve hızlı, aynı zamanda daha çok sinirli ve büyük veriler için kullanılamaz http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <body> <script> function loadAJAX() { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","arabaozelligi.php?marka=ford&yil=2007",true); xmlhttp.send(); } </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX HTTP POST isteklerinde, veriler istek paketinin ayrı bir kısmı olarak gönderilir, bu nedenle... Sunucuya gönderildiği parametreler URL'de gösterilmez ve ... Daha büyük parametreler işletilebilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek: KÖTÜ FİKİR <!DOCTYPE html> <html> <body> <form action="make_login.php" type="GET"> <input type="text" name="user" value=""/><br/> <input type="password" name="password" value=""/> </form> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX POST isteğinde, istek parametreleri URL'den ayrı olarak gönderilir Bu ek veriler AJAX'ta belirtmek için, POST verileri metin olarak XMLHttpRequest.send fonksiyonuna giriş olarak verilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek ... <form> <input type="text" id="user" name="user" value=""/><br/> <input type="password" id="pass" name="password" value=""/> </form> <script> function loadAJAX() { var xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","authorize.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("name="+user+"&pass="+pass); } </script> http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX XMLHttpRequest'in cevabını elde etme: AJAX istekleri genellikle asynchronous olarak yapılır, yani AJAX sunucuya bilgi gönderirken javascript programı çalışmaya devam ediyor AJAX isteğin cevabını elde etmek için, XMLHttpRequest nesnesinin onreadystatechange olayı kullanılmalı, onreadystatechange olay işleyicisi diğer olay işleyicileri gibi ilgili XMLHttpRequest nesnesinin onreadystatechange olayına atanır http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek ... <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }; xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX Onreadystatechange olayı, XMLHttpRequest nesnesinin hali değiştiğinde tetikleniyor ve şu olayı meydana getirdiği XMLHttpRequest nesnesinin hali readyState özelliğinden kontrol edilebilir, XMLHttpRequest nesnesinin... readyState=0, istek başlatılmadı readyState=1, sunucuyla bağlantı kuruldu readyState=2, istek gönderildi readyState=3, cevap bekleniyor readyState=4, cevap elde edildi http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX Ayrıca XMLHttpRequest nesnesinin status diye bir özelliği var, bu özellik sunucu tarafından gönderildiği HTTP statusunu içerir, örneğin status=200, sayfa tamam status=400, yanlış istek status=403, sayfa için izin gereklidir status=404, sayfa bulunamadı status=500, sunucu hatalı durum http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }; ... </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX Sunucudan cevap geldiğinde, sunucunun cevabı XMLHttpRequest nesnesinin metin olarak XMLHttpRequest'in responseText, XML olarak responseXML özelliklerinde bulunmakta http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } ... http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX NOT: daha eski IE tarayıcılarında (IE5 ve IE6), XMLHttpResponse nesnesi yerinde bir ActiveX nesnesi kullanılıyordu Bu nedenle, IE5 ve IE6 tarayıcılarında AJAX kullanmak için XMLHttpRequest farklı şekilde tanımlanmalı (ancak bundan sonra kullanımda fark yok) http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <!DOCTYPE html> <html> <head> <script> function cfunc() { //AJAX cevabı işleyicisi ... function loadXMLDoc(url) { var xmlhttp; if(window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); ... http://www.scinetcentral.com/~mishchenko/MIT504.html
Tamamlanmış bir AJAX Örneği <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> ... ... <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> AJAX http://www.scinetcentral.com/~mishchenko/MIT504.html
XMLHttpRequest nesnesi başlatılması Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> XMLHttpRequest nesnesi başlatılması http://www.scinetcentral.com/~mishchenko/MIT504.html
Sunucu cevabı işletecek fonksiyonu Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu cevabı işletecek fonksiyonu http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> HTTP isteği GET olarak gönderilmesi, istenen kullanıcı bilgi URL metninin bir kısmı olarak gönderilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Sunucu adresi, w3schools.com/getcustomer.asp Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu adresi, w3schools.com/getcustomer.asp http://www.scinetcentral.com/~mishchenko/MIT504.html
Seçilebilir isimleri ve AJAX fonksiyonun seçmede çağrılması Örnek Seçilebilir isimleri ve AJAX fonksiyonun seçmede çağrılması <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> http://www.scinetcentral.com/~mishchenko/MIT504.html
Sunucu tarafından gönderilecek tablonun yeri Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu tarafından gönderilecek tablonun yeri http://www.scinetcentral.com/~mishchenko/MIT504.html
AJAX Çalışma sırası http://www.scinetcentral.com/~mishchenko/MIT504.html
XMLHttpRequest nesnesi başlatılır Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> XMLHttpRequest nesnesi başlatılır http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek HTTP istek gönderilir <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> HTTP istek gönderilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Örnek Cevap bekleniyor <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Cevap bekleniyor http://www.scinetcentral.com/~mishchenko/MIT504.html
Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu cevabı geldiğinde işleyici fonksiyonu çalışır http://www.scinetcentral.com/~mishchenko/MIT504.html
Sunucu gönderdiği tablo div'e yazdırılır Örnek <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="tablo"></div> </body> </html> <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { var xmlhttp; if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("tablo").innerHTML= xmlhttp.responseText; xmlhttp.open("GET","getcustomer.asp?q="+str,true); xmlhttp.send(); </script> </head> Sunucu gönderdiği tablo div'e yazdırılır http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları Web sayfasının yapısı, DOM hierarşisi güncelleştirme metotlarını kullanarak nasıl gerekirse ayarlanabilir Web sayfasındaki fare hareketleri, tıklar, klavye girişi gibi olaylar hakkında DOM kullanarak bilgi elde edilebilir ve tepki gösterilebilir Web sayfasının düzeni ileri şekilde ayarlanabilir Web uygulamaları, arka planında sayfayı yeni indirmeden sunucu ile haberleşebilir http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları Zengin İnternet Uygulamaları (Rich Internet Applications veya RIA), masaüstü yazılımlarının birçok tipik özelliğine sahip olan ancak web tarayıcı, plug-in, sandbox, Java sanal makine (JVM) veya Javascript kullanarak çalışan yazılımlardır RIA platformlar bir çoğunda tarayıcı tabanlı bilgisayar oyunlarda kullanılmakta, ancak son zamanlarda diğer alanlarda hızlı gelişmeye başladı RIA genellikle bir platform (çerçeve) üzerinde çalışmakta; bunlardan en yaygın olan Adobe Flash, Java FX ve Microsoft Silverlight platformlardır; Bu tip RIA'ler için, Flash, Java VM veya Silverlight gibi ilgili yazılımının kullanıcı tarafından indirilmesi gerekmektedir Son zamanlarda, HTML5+Javascript+AJAX tabanlı, özel plugin veya yazılım gerektirmeyen RIA'ler yayılmaya başladı http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları Adobe Flash, RIA için kullanılan platformlardan en ünlü olan biridir Flash, vektörsel ve raster grafiği üzerinde çalışmalar için web tarayıcı bir plugindir; ayrıca animasyon ve kullanıcı ile etkileşim için araçlar da sunmaktadır Flash uygulamaları, özel ActionScript programlama dili kullanarak oluşturulmalı ve web tarayıcı içinde kullanılabilmesi için Flash plugin gerektirmektedir İnternette yaygın şekilde kullanılmış olan Flash'ın önemi, HTML5'te birçok benzer araç sunulduğu için ve Flash'in mobil cihazlarda genellikle desteklenmemesi için azalmaya başladı http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları Java ve JavaFX, Java programlama dili ve Java appletlerine dayalı bir RIA teknolojisidir Java appletler, tamamlanmış ve Java VM kullanarak tarayıcı içinde çalışan Java programlarıdır Java FX, RIA geliştirme için ilgili bir Java platformdır Java uygulamalarının web tarayıcıda kullanılabilmesi için Java Runtime Environment (JRE)'nin kullanıcı bilgisayarında kurulması gereklidir Java uygulamaları bir zaman çök pöpüler olduğuna rağmen, bilgisayarlardan gereksinimleri fazla olduğu için ve diğer nedenlerle yaygın kullanımdan çıkmıştır, şu anda Java RIA'ler az kullanılmakta http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları Silverlight, Microsoft tarafından geliştirilmiş RIA için özel (proprietary) bir platformdır. Bu teknoloji çok yaygın kullanımı göremedi ve birçok mobil cihazlarında da desteklenmez. Silverlight genellikle streaming video için kullanılır, örneğin Silverlight, 2008 ve 2010 Olimpiyat oyunları resmi örganizatörlerinin online video streaming hizmeti ve Netflix online film izleme hizmeti olarak çalışmıştır. http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları HTML5+Javascript+AJAX RIA'ler, tartıştığımız HTML5/CSS3, Javascript DOM ve AJAX araçlarını kullanan uygulamalardır Bunlardan en ünlü örneklerden bazelar, gmail ve google docs uygulamalarıdır http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları HTML5+Javascript+AJAX RIA'ler, Javascript'te programlanmış tam özellikli ve dolayısıyla genellikle büyük yazılımlardır Modern HTML5/Javascript tabanlı RIA'ler, Javascript çerçeveleri kullanarak geliştirilmektedir http://www.scinetcentral.com/~mishchenko/MIT504.html
Zengin İnternet uygulamaları HTML5/Javascript çerçeveleri hızlı geliştiği nedeniyle, sıralanması sürekli değiştiriyor olabilir Erken HTML5/Javascript çerçeveleri, Google Web Kit (GWK), ExtJS, jQuery, DoJo, MooTools, Prototype, vb. idi Şimdi üç önde olan HTML5/Javascript çerçevesi, AngularJS, Ember ve Backbone'dir http://www.scinetcentral.com/~mishchenko/MIT504.html
http://www.scinetcentral.com/~mishchenko/MIT504.html