AJAX İle Öneri

AJAX Öneri Örneği

Aşağıdaki ajax örneğinde, bir kullanıcı standart bir HTML formuna
veri girerken web sayfasının sunucu ile nasıl iletişim kurabileceğini
göreceğiz.

Bir isim girin

Öneriler:

Örneğin açıklaması - HTML Formu

Yukarıdaki form aşağıdaki HTML koduyla oluşturulmuştur:

<form> 
İsim:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Öneriler: <span id="txtHint"></span></p>

Gördüğünüz gibi bu "txt1" adında bir giriş alanı içeren basit bir HTML formudur.

Giriş alanı için tanımlanan olay niteliği onkeyup olayı (basılı olan
bir tuş bırakıldığında) tarafından tetiklenmek üzere bir işlev tanımlar.

Formun altındaki paragraf imi "txtHint" adında bir span imi içerir.
Bu im sunucudan gelen veri için bir yer tutucu olarak kullanılmaktadır.

Kullanıcı veri girişi yaptığında "showHint()" adında bir işlev
çalıştırılır. Bu işlevin çalıştırılması "onkeyup" olayı tarafından
tetiklenir. Başka bir deyişle: Kullanıcı giriş alanındayken klavyedeki
bir tuştan parmağını her kaldırdığında showHint işlevine çağrı yapılır.

Örneğin açıklaması - showHint() İşlevi

showHint() , sayfanın <head> bölümünde tanımlanmış çok basit bir Javascript işlevidir.

İşlev aşağıdaki kodu içerir:

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
} 
var url="gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

Bu işlev giriş alanına her karakter girildiğinde çalışır.

Eğer metin alanında herhangi bir giriş varsa (str.length > 0) işlev aşağıdakileri yapar:

Sunucuya göndermek üzere url 'yi (dosya adını) tanımlar
Url 'ye giriş alanının değerini içeren bir parametre (q) ekler
Sunucunun önbelleğe alınmış bir sayfayı kullanmasını önlemek için rastgele bir sayı ekler
Bir XMLHTTP nesnesi oluşturur ve nesneye, herhangi bir değişiklik
tetiklendiğinde stateChanged adındaki bir işlevi çalıştırmasını söyler.
Verilen url ile XMLHTTP nesnesini açar.
Sunucuya bir HTTP isteği gönderir

Eğer giriş alanı boşsa, işlev txtHint alanının içeriğini temizler.

Örneğin açıklaması - GetXmlHttpObject() İşlevi

Yukarıdaki örnek GetXmlHttpObject() adında bir işlevi çağırır.

İşlevin amacı farklı tarayıcılar için farklı XMLHTTP nesneleri oluşturma problemini çözmektir.

İşlev aşağıda gösterilmektedir:

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

Örneğin açıklaması - stateChanged() İşlevi

stateChanged() işlevi aşağıdaki kodu içerir:

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

XMLHTTP nesnesinin durumunun her değişmesinde stateChanged() işlevi çalışır.

Durum 4 ("işlem tamam") olduğunda txtHint yer tutucusunun içeriği responseText ile doldurulur.

Eğitim ajax getxmlhttpobject showhint statechanged

Hancı Eğitim