AJAX ile Öneri

Ajax Temel

Ajax Gelişmiş

AJAX ile Öneri

AJAX Öneri Kaynak Kodu

AJAX Veritabanı

AJAX XML dosyası

AJAX ResponseXML

Kişisel Blog (iletişim)

AJAX ile Öneri

< Önceki Sonraki >

Ajax 'ın daha etkileşimli uygulamalar oluşturmak için kullanılabileceğini gördük.

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.

Aşağıdaki kutuya 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.

< Önceki Sonraki >