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.
******** LANGUAGE=javascript>
<!--
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_getallResponseHead ers(): " +
xhr.getAllResponseHeaders();
txt5.value="XmlHttpRequest_statusText: " + xhr.statusText
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
********.getElementById("x").innerHTML =(xhr.responseText);
} else {
alert (’There was a problem with the request.’);
}
}
}
//-->
</SCRIPT>
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.
<P><STRONG><SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>synchronous <SPAN
style="FONT-SIZE: large; COLOR: red">J</SPAN>avascript <SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>nd <SPAN
style="FONT-SIZE: large; COLOR: red">X</SPAN>ML= <SPAN
style="FONT-SIZE: large; COLOR: blue">AJAX</SPAN></STRONG></P>
<P>
</P>
<P> </P>
<P><INPUT id=button1 type=button
onclick="getPage (‘ornek.asp’)"
value="Get the page by XmlHttpRequest" name=button1></P>
<P><INPUT id=txt1 style="WIDTH: 396px; HEIGHT: 22px" size=51></P>
<P><INPUT id=txt2 style="WIDTH: 395px; HEIGHT: 22px" size=50></P>
<P><TEXTAREA id=TEXTAREA1 style="WIDTH: 393px; HEIGHT: 72px"
name=TEXTAREA1 cols=42></TEXTAREA></P>
<P><INPUT id=txt5 style="WIDTH: 389px; HEIGHT: 22px"
size=50></P>
<div id="x"></div>
Ajax kodlarında belirttiğimiz ornek.asp dosyası:
<%@ Language=VBScript %>
<HTML>
<HEAD>
****** NAME="GENERATOR" *********"Microsoft Visual Studio 6.0">
******** language="javascript">
********.write (********.lastModified);
</script>
</HEAD>
<BODY>
<%Response.Write("<b>Welcome to programming with AJAX</b>")%><br>
<% =Date()%><br>
Hello<br>
</BODY>
</HTML>
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.
******** LANGUAGE=javascript>
<!--
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_getallResponseHead ers(): " +
xhr.getAllResponseHeaders();
txt5.value="XmlHttpRequest_statusText: " + xhr.statusText
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
********.getElementById("x").innerHTML =(xhr.responseText);
} else {
alert (’There was a problem with the request.’);
}
}
}
//-->
</SCRIPT>
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.
<P><STRONG><SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>synchronous <SPAN
style="FONT-SIZE: large; COLOR: red">J</SPAN>avascript <SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>nd <SPAN
style="FONT-SIZE: large; COLOR: red">X</SPAN>ML= <SPAN
style="FONT-SIZE: large; COLOR: blue">AJAX</SPAN></STRONG></P>
<P>
</P>
<P> </P>
<P><INPUT id=button1 type=button
onclick="getPage (‘ornek.asp’)"
value="Get the page by XmlHttpRequest" name=button1></P>
<P><INPUT id=txt1 style="WIDTH: 396px; HEIGHT: 22px" size=51></P>
<P><INPUT id=txt2 style="WIDTH: 395px; HEIGHT: 22px" size=50></P>
<P><TEXTAREA id=TEXTAREA1 style="WIDTH: 393px; HEIGHT: 72px"
name=TEXTAREA1 cols=42></TEXTAREA></P>
<P><INPUT id=txt5 style="WIDTH: 389px; HEIGHT: 22px"
size=50></P>
<div id="x"></div>
Ajax kodlarında belirttiğimiz ornek.asp dosyası:
<%@ Language=VBScript %>
<HTML>
<HEAD>
****** NAME="GENERATOR" *********"Microsoft Visual Studio 6.0">
******** language="javascript">
********.write (********.lastModified);
</script>
</HEAD>
<BODY>
<%Response.Write("<b>Welcome to programming with AJAX</b>")%><br>
<% =Date()%><br>
Hello<br>
</BODY>
</HTML>
