Adim adim AJAX
AJAX web gelisimi içerisinde birçok programciyi heyecanlandiran son ve büyük bir seydir. Bu baslik AJAX için Microsofta adim adim bakis demektir.
Bu özellik Herkules ile dövüsen lliad dan gelmiyor. Fakat web gelisimi içerisindeki en son ve en gelismis olanidir.(hiç olmazsa birkaç taneden birisi). Google web de büyülü bir sekilde genisleyerek büyüdügünden beri AJAX ile google haritalari yapildi. Bununla beraber biz genel olarak AJAX’i yazmak için Microsoft yoluna bakiyoruz. Tipki benim önceki ögreticim gibi. Bu kisa tanitimdan sonra adim adim bütün yollar burada.
Web Uygulama Gelistirme
1992’den beri gelistiriciler merhametsizce çok cazip,çok üretici ve çok interaktif yollari takip ettiler. Düz html kodlarinin dogusunu hemen imaj yerlestirme ve bunu cazip renkler kullanarak stil kagitlari tarafindan yapilarak verildi. Fakat kullanicilara Java Script için ayrilmisti ve bu nedenle yazi dili altin çagina döndü.
Bununla birlikte 2 ana sunucu web alani paylasiyordu. Ve kullanicilarin isini görmek için iki dil vardi. (3.olani ECMA - sonradan geldi) Bu yeterli degildi ve DHTML dogmustu. Yeni bir dil degildi fakat iyi bir html karistiricidir. CSS ve Java Script kullanicilari için asiri caziptir.
AJAX sayfayi yenileme ihtiyaci olmadan uzun bir süre cevap veriyir Bunun mümkün olabilmesi için ilk olarak Microsoft’un ActiveX teknolojisi yapiyordu. Simdi artik XHTML, CSS, JavaScript, XmlHttpRequest, ve XML, ve o DHTML bu yeni teknolojinin içinde yer aliyor.
Örnek AJAX daki Garret’s den türer. Örnek AJAX gibi klasik bir çift interaksiyon gösterir. Klasik versiyonunda müsteri bir HTTP(s) davetiyesi gönderir servera,server bunu görür. AJAX modelinde müsteri AJAX a Java Script gönderir ve AJAX webservera XML yapabilen bir davet gönderir WEB/XML sunucusu XML den gelen cevaplari yollar.Sonuçlari çevirmek için XHTML ve CSS içinden DOM üzeriden yardim alir.
XMLHttpRequest Object ile beraber çalismak için bir anahtar nesneye ihtiyaç vardir. Bu obje iki kisimdan olusur. Bu httpRequest tir. Sonra o XML yöntemidir. Bu ActiveX Object gibi Internet Explorer 5 ve Windows için yeterince gelistirilmis idi.Bu Mozilla 1,0.Apple ve diger formlar ile birlikte yerine getirilmisti. W3C DOM Level 3 özellikleri için benzer bir standarttir.
XML HttpRequest nesnesi olusturmak
Bu kolay bir kisimdir.Mozilla için:
var xhr=new XMLHttpRequest();
Internet Explorer için:
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
Bu metodlar kullanicilar için gizli nesneleri içerir.BU kisa listeyi bütün browser lar paylasirlar.
abort()
mevcut istegi sonlandir
getAllResponseHeaders()
baslik bilgisindeki tüm veriyi alir
getResponseHeader ("headerAdi")
istenen baslik bilgisinin verisini alir
open("method", "URL"[,asyncFlag[,"userName"[,"password"]]])
herhangi bir veriyi atamada kullanilir
send(content)
Gerekli olucak veriyi yollamak için kullanilir
setRequestHeader ("eitket", "deger")
baslik bilgisine etiket degeri eklemek için kullanilir
URL tamamlanabilir ya da baglanabilir. 3.parametre ki opsiyonel(yanlis ve dogru) ayarlari içerir.
Parametreleri takip etmek (bütün serverlar için geçerli)
onreadystatechange
Durum degisikligini kontrol eder
readState
Tam sayi degerleri durum bilgisini belirtir
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
responseText
String formatinda veriyi yollar
responseXML
Veriyi DOM formatinda yollar
status
Server in durumunun sayisal degeri
404: Not found
200: OK
statusText
Durumla gelen yazi degeri
AJAX ile çalismak sessizdir.Html dosya adi : AjaxTest.html. Özellikle bir XMLHTTP Request Object yaratmaya ihtiyacimiz var.Sayfaya geri alindigindan beri GET kullanilir.Open ( ) için TRUE methodu kullanilir.
<SCRIPT 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_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.’);
}
}
}
//-->
</SCRIPT>
Eger DOM API sini kullanirsaniz asagidaki kodlara göz atiniz;
AjaxTest.htm sadece belli kontrol özelliklerine sahitptir ve bunun degerleri gosterilir. OnClick olayi islemin aktif oldugunu göstermektedir. innerHTML özellikleride DIV tagina yazilacaktir.
<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 kodlarinda belirttigimiz ornek.asp dosyasi:
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<script language="javascript">
document.write (document.lastModified);
</script>
</HEAD>
<BODY>
<%Response.Write("<b>Welcome to programming with AJAX</b>")%><br>
<% =Date()%><br>
Hello<br>
</BODY>
</HTML>
Bu doküman Jayaram Krishnaswamy tarafindan hazirlanmis olup Haberci grubu adina Capella tarafindan Türkçe’ye çevirilmistir.
