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



İsim:


Ö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.



  • Hanci.org
  • 4.770

Ara

Eğitim


Konular

Tags

Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.