IT504 DOM Belge Nesne Modeli II

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

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

DOM taranması DOM taranması, DOM nodlarının arasında belirli bir alt kümesinin seçilmesi demektir

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

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

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ı

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

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ı

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

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

DOM taranması DOM hierarşi enine taranması DOM kökü

DOM taranması 1 DOM hierarşi enine taranması DOM kökü

DOM taranması DOM hierarşi enine taranması DOM kökü 2

DOM taranması Örnek – javascript açılan menü

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>

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

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++;

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

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'; }

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'; }

DOM taranması Derinlikle (derine) arama, DOM hierarşi DOM kökü ile başlayınca, elemanın çocukları varken ilk çocuklarını takip eder

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);

DOM taranması DOM hierarşi derine taranması DOM kökü

DOM taranması DOM hierarşi derine taranması 1 DOM kökü 2 3 4 5 6 7 8

DOM taranması Javascript açılan menü elemanlarının ekranda yerleştirilmesi

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>

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

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';

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';

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

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);

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

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

DOM taranması Mesela, bu fonksiyon açma kapatma işleyicisi olarak olamaz

Ö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';

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

Örnek function hidelistener(event) { ... if(event.type == 'mouseout') { //ELEMANI SAKLAMA KUYRUGUNE EKLE queuedHideNode = target; queuedHideDirection = 'all'; setTimeout(hidenode,100); }

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

Ö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';

Ö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();

Örnek function hidenode() { if(queuedHideNode == null) return; hidenodesdown(); if(queuedHideDirection == 'down') return; hidenodesup(); queuedHideNode=null; queuedHideDirection=null; }

Ö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;

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

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

DOM hierarşi güncelleştirme
DOM kökü KALDIRMA

DOM kökü EKLEME

DOM kökü KALDIRMA+EKLEME=TAŞIMA

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

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

Ö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>

Ö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>

Örnek <!DOCTYPE html> <html> <body> <script> var link=document.createElement("A"); link.href=" var txt=document.createTextNode("CLICK ME"); link.appendChild(txt); var title=document.createAttribute("title"); title.nodeValue=" link.attributes.setNamedItem(title); document.body.appendChild(link); </script> </body> </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

Ö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

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ı!

Ö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

Ö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

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

Egzersiz-1 5 2 3 3 2 3 6 4 3 5 8 6 10 8 4 10

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"]]];

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)

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>

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

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

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

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

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

Bu sorunun üstüne gelmek için, AJAX teknolojisi sunulmuştur

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

XMLHttpRequest nesnesi
AJAX Temel AJAX süreci: Web sayfasının javascripti Sunucu Http İsteği XMLHttpRequest nesnesi Http Cevabı

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

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~~

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 ~~

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

Ö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>

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

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)

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

Ö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>

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

Ö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>

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

Ö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>

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

Ö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>

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

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

Ö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>

AJAX Sunucudan cevap geldiğinde, sunucunun cevabı XMLHttpRequest nesnesinin metin olarak XMLHttpRequest'in responseText, XML olarak responseXML özelliklerinde bulunmakta

Ö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; } ...

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)

Ö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(); ...

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>

Ö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

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ı

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

Ö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

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

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>

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

AJAX Çalışma sırası

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

Ö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

Ö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

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

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

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

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ı

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ı

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

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.

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

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

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

IT504 DOM Belge Nesne Modeli II

Benzer bir sunumlar

... konulu sunumlar: "IT504 DOM Belge Nesne Modeli II"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

IT504 ~~DOM~~ Belge Nesne Modeli II

Benzer bir sunumlar

... konulu sunumlar: "IT504 ~~DOM~~ Belge Nesne Modeli II"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

IT504 DOM Belge Nesne Modeli II

... konulu sunumlar: "IT504 DOM Belge Nesne Modeli II"— Sunum transkripti: