AJAX ı adım adım öğrenelim

Adım adım AJAX

Giriş

AJAX web gelişimi içerisinde birçok programcıyı heyecanlandıran son ve büyük bir şeydir. Bu başlık AJAX için Microsofta adım adım bakış demektir. Bu özellik Herkules ile dövüşen lliad dan gelmiyor. Fakat web gelişimi içerisindeki en son ve en gelişmiş olanıdır.(hiç olmazsa birkaç taneden birisi). Google web de büyülü bir şekilde genişleyerek büyüdüğünden beri AJAX ile google haritaları yapıldı. Bununla beraber biz genel olarak AJAX’ı yazmak için Microsoft yoluna bakıyoruz. Tıpkı benim önceki öğreticim gibi. Bu kısa tanıtımdan sonra adım adım bütün yollar burada.

Web Uygulama Geliştirme

1992’den beri geliştiriciler merhametsizce çok cazip,çok üretici ve çok interaktif yolları takip ettiler. Düz html kodlarının doğuşunu hemen imaj yerleştirme ve bunu cazip renkler kullanarak stil kağıtları tarafından yapılarak verildi. Fakat kullanıcılara Java Script için ayrılmıştı ve bu nedenle yazı dili altın çağına döndü. Bununla birlikte 2 ana sunucu web alanı paylaşıyordu. Ve kullanıcıların işini görmek için iki dil vardı. (3.olanı ECMA - sonradan geldi) Bu yeterli değildi ve DHTML doğmuştu. Yeni bir dil değildi fakat iyi bir html karıştırıcıdır. CSS ve Java Script kullanıcıları için aşırı caziptir. AJAX sayfayı yenileme ihtiyacı olmadan uzun bir süre cevap veriyir Bunun mümkün olabilmesi için ilk olarak Microsoft’un ActiveX teknolojisi yapıyordu. Şimdi artık XHTML, CSS, JavaScript, XmlHttpRequest, ve XML, ve o DHTML bu yeni teknolojinin içinde yer alıyor. Örnek AJAX daki Garret’s den türer. Örnek AJAX gibi klasik bir çift interaksiyon gösterir. Klasik versiyonunda müşteri bir HTTP(s) davetiyesi gönderir servera,server bunu görür. AJAX modelinde müşteri AJAX a Java Script gönderir ve AJAX webservera XML yapabilen bir davet gönderir WEB/XML sunucusu XML den gelen cevapları yollar.Sonuçları çevirmek için XHTML ve CSS içinden DOM üzeriden yardım alır.

XMLHttpRequest Object ile beraber çalışmak için bir anahtar nesneye ihtiyaç vardır. Bu obje iki kısımdan oluşur. Bu httpRequest tir. Sonra o XML yöntemidir. Bu ActiveX Object gibi Internet Explorer 5 ve Windows için yeterince geliştirilmiş idi.Bu Mozilla 1,0.Apple ve diğer formlar ile birlikte yerine getirilmişti. W3C DOM Level 3 özellikleri için benzer bir standarttır. XML HttpRequest nesnesi oluşturmak Bu kolay bir kısımdır.Mozilla için: var xhr=new XMLHttpRequest(); İnternet Explorer için: var xhr=new ActiveXObject("Microsoft.XMLHTTP"); Bu metodlar kullanıcılar için gizli nesneleri içerir.BU kısa listeyi bütün browser lar paylaşırlar. abort() mevcut isteği sonlandır getAllResponseHeaders() başlık bilgisindeki tüm veriyi alır getResponseHeader ("headerAdi") istenen başlık bilgisinin verisini alır open("method", "URL"[,asyncFlag[,"userName"[,"password"]]]) herhangi bir veriyi atamada kullanılır send(content) Gerekli olucak veriyi yollamak için kullanılır setRequestHeader ("eitket", "deger") başlık bilgisine etiket degeri eklemek için kullanılır URL tamamlanabilir ya da bağlanabilir. 3.parametre ki opsiyonel(yanlış ve doğru) ayarları içerir. Parametreleri takip etmek (bütün serverlar için geçerli) onreadystatechange Durum değişikliğini kontrol eder readState Tam sayı degerleri durum bilgisini belirtir 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete responseText String formatında veriyi yollar responseXML Veriyi DOM formatında yollar status Server ın durumunun sayısal degeri 404: Not found 200: OK statusText Durumla gelen yazı degeri AJAX ile çalışmak sessizdir.Html dosya adı : AjaxTest.html. Özellikle bir XMLHTTP Request Object yaratmaya ihtiyacımız var.Sayfaya geri alındığından beri GET kullanılır.Open ( ) için TRUE methodu kullanılır. var xhr = false; function getPage (url) { xhr = false; //this is the Microsoft browser compatible instantiation xhr = new ActiveXObject("Microsoft.XMLHTTP"); if (!xhr) { alert (’XMLHttpRequest failed to instantiate’); return false; } xhr.onreadystatechange = statusCheck; xhr.open (’GET’, url, true); xhr.send (null); } function statusCheck() { txt1.value="XmlHttpRequest_Status: " + xhr.status;

txt2.value="XmlHttpRequest_readyState: " + xhr.readyState;

TEXTAREA1.value="XmlHttpRequest_getallResponseHeaders(): " + xhr.getAllResponseHeaders(); txt5.value="XmlHttpRequest_statusText: " + xhr.statusText

if (xhr.readyState == 4) { if (xhr.status == 200) { alert(xhr.responseText); document.getElementById("x").innerHTML =(xhr.responseText); } else { alert (’There was a problem with the request.’); } }

} //-->

Eğer DOM API sini kullanırsanız aşağıdaki kodlara göz atınız; AjaxTest.htm sadece belli kontrol özelliklerine sahitptir ve bunun degerleri gosterilir. OnClick olayı işlemin aktif oldugunu göstermektedir. innerHTML özellikleride DIV tagına yazılacaktır.

style="FONT-SIZE: large; COLOR: red">Asynchronous style="FONT-SIZE: large; COLOR: red">Javascript style="FONT-SIZE: large; COLOR: red">And style="FONT-SIZE: large; COLOR: red">XML= style="FONT-SIZE: large; COLOR: blue">AJAX

onclick="getPage (‘ornek.asp’)" value="Get the page by XmlHttpRequest" name=button1>

name=TEXTAREA1 cols=42>

size=50>

Ajax kodlarında belirttiğimiz ornek.asp dosyası: document.write (document.lastModified); Welcome to programming with AJAX")%>Hello

Döküman Arama

Başlık :

Kapat