Öncelikle
AJAX hakkında bilgi edinmenizi, nedir, neye yarar gibi soruların yanıtını bulmanız gerekmektedir.
Ajax fonksiyonlarını vererek kodlarda gerekli açıklamaları yaparak konuyu anlatıyorum.
function yeni_nesne(){
var nesneyarat;
/*@cc_on @*/
/*@if (@_jscript_version >= 5) try { nesneyarat = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
try { nesneyarat = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (E) { nesneyarat = false; }
}@end @*/
if (!nesneyarat && typeof XMLHttpRequest!='undefined') {
try {
nesneyarat= new XMLHttpRequest();
} catch (e) {
nesneyarat=false;
}
}
return nesneyarat;
}
function AoL(id,cikti,hedef) {
var aktifform = document.getElementById(id);
var ekranayaz = document.getElementById(cikti);
var ciktiver = new String("");
var name, value;
for(var C = 0; C < aktifform.elements.length; C++){
name = aktifform.elements[C>.name;
value = aktifform.elements[C>.value;
ciktiver += escape(name) +'='+ encodeURIComponent(value) +'&';
}
var nesneiste = new yeni_nesne();
nesneiste.open("post", hedef, true);
nesneiste.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=iso-8859-9");
nesneiste.send(ciktiver);
nesneiste.onreadystatechange = function() {
if (nesneiste.readyState == 4 && nesneiste.status == 200) {
ekranayaz.innerHTML = nesneiste.responseText;
}
else { ekranayaz.innerHTML = ''; }
}
return false;
}
2 adet fonksiyonumuz mevcut. Birisi XMLHttpRequest nesnesi oluşturuyor, diğeri form bilgilerini post ediyor. XMLHttpRequest nesnesini burada anlatmak çok uzun olacağından sizi
WIKI'deki kısa dökümanla başbaşa bırakıyorum. Farklı kullanımları mevcut, fakat ben genelde bu kullanımı tercih ediyorum.
2. fonksiyonumuzda
ciktiver adında bir fonksiyon gözünüze çarpıyordur. Bunun amacı Türkçe karakterleri ve post esnasında tanınmayan karakterleri bozmadan gönderip, çıktı alabilmek içindir.
Herkes Turkçe karakter sorunundan yakınır. Eğer sayfanızın işaretleme tipi ile, setRequestHeader'i birbiriyle uyumlu hale getirir ve son olarakta ajax yordam sayfanıza bir charset belirtirseniz hiçbir sorun yaşamazsınız.
Form bilgilerimiz ise şöyle olacak,
<form id="form" onsubmit="return AoL(this.id,'sonuc','ajax.asp')">
<label for="adsoyad">Adınız Soyadınız</label><br />
<input type="text" name="adsoyad" id="adsoyad" />
<input type="submit" value="Gönder" />
</form>
<div id="sonuc"></div>
Burada onsubmit yordamında (sizler değiştirebilirsiniz) 3 olay gerçekleşmekte. Formun id bilgisini gönderiyoruz, gelen sonucun
sonuc adlı id'li elementte işlenmesini belirtiyoruz ve son olarak bu bilgiler
ajax.asp adlı dosyada işleneceğini bidiriyoruz.
Ajax için elementlerin ID bilgileri çok önemlidir. Post edebilmek içinde form bilgilerine birer name eklememiz gerekir. Aynı olmak zorunluluğu yoktur.
şimdi ise ajax.asp adlı sayfamızı oluşturalım,
<%
response.charset = "iso-8859-9"
ad = request.form("adsoyad")
If Len(ad) < 1 then
response.write "Adsoyad alanını boş bıraktınız"
Else
response.write "Forma yazılan bilgi <strong><u>"&ad&"</u></strong&g t;'dır"
End If
%>
Bu sayfada pek yabancı işlem yapılmamış. Bir charset atanmış ve post ile gönderdiğimizden aynı şekilde verimizi alıp sınamışız.
Bu örneği sizlere birşeyler çağırıştırması açısından hazırladım. Ajax bu kadar basit mi? Hayır kesinlikle, ve yapılabilir en basit işlem budur. Javascript bilginizi zorlayarak bu mini modülü geliştirebilir daha esnek bir form işlemi hazırlayabilirsiniz.