Asp"De Ajax Kullanımı

09/Şub/08 18:21

Kısayol

Şikayet

Özel Mesaj

angels_demos

Kayıt Tarihi: 03/Haziran/2006

ASP ile ajax kullanımı hakkında basit bir işlem yapacağız. XMLHttpRequest nesnesi oluşturup formdaki bir bilgiyi nasıl post edeceğiz öğreneceğiz.Öncelikle AJAx hakkında bilgi edinmenizi, nedir, neye yarar gibi soruların yanıtını bulmanız gerekmektedir.Örn. Ajax Tr , Ajaxian gibi sitelere bakabilirsiniz.
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 başka dökümanlara sevk edim.Örn wikide var (Link : http://tr.wikipedia.org/wiki/XMLHttpRequest )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>'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.

Örneği indirim diye rapidshare'a attm link : http://rapidshare.com/files/90433727/ajaxornangelsdemos.rar.html