08 December 2016

XMLHttpRequest Nedir ve Örnekler

XMLHttpRequest bir HTTP isteği göndermek için istemci koduna (örneğin bir Web sayfasındaki JavaScript) yol sağlar. Web uygulamalarında AJAX birimi bir JavaScript nesnesi olan XMLHttpRequest nesnesi aracılığı ile oluşturulur. Daha sonra oluşturulan bu nesne aracılığıyla çeşitli yordamlar kullanılarak bilgiler gönderilir ve gelen sonuçlar da bu nesnenin değişimi takip edilerek işlenir.

XMLHttpRequest kullanmaya başlayalım. Öncelikle kodlarımızı </head> öncesi script taglerinin içine almamız gerektiğini bilmeliyiz:

<script type="text/javascript">  </script>

XMLHttpRequest nesnesi tanımlamaları:

  • open(“yöntem”, “adres”, “eşzamanlılık”, “kullanıcı adı”, “şifre”) – Sorgu gönderilmeden önce, sorgunun gönderileceği adresi, gönderi metodunu ve diğer seçime bağlı nitelikleri belirler.
  • setRequestHeader(“etiket”, “değer”) – Gönderilen sorguya bir etiket/değer başlığını iliştirir.
  • send(“içerik”) – Sorguyu gönderir. Seçime bağlı olarak gönderilebilen verileri ve DOM(Document Object Model) ile yaratılmış verileri de gönderebilir.
  • getResponseHeader(“başlıkEtiketi”) – Verilen başlık etiketinin taşıdığı değeri “string” olarak elde eder.
  • getAllResponseHeaders() – Tüm karşılık başlık etiketlerini ve değerlerini “string” olarak elde eder.
  • abort() – Geçerli isteği iptal eder.

XMLHttpRequest nesnesi özellikleri:

onreadystatechange – Durum değişikliğini kontrol eder.
readState – Tam sayı değerleri durum bilgisini belirtir:

  • 0 = uninitialized (başlatılmadı)
  • 1 = loading (yükleniyor)
  • 2 = loaded (yüklendi)
  • 3 = interactive (etkileşimli)
  • 4 = complete (tamamlandı)

responseText – Veriyi “string” biçiminde yollar.
responseXML – Veriyi XML olarak yollar.
status – Sunucunun durumunun sayısal değerini belirtir:

  • 404: Not found (Bulunamadı)
  • 200: OK (Tamam)

statusText – Durumla gelen yazı değerini belirtir.

XMLHttpRequest nesnesinin oluşturulmasını basit bir ürün gönderme işlemi ile inceleyelim.

 <div>
 <input id="Text1" type="text" /><br />
 <input id="Button1" type="button" value="Ürün Ekle" onclick="Ekle()"/>
 </div>

Forma bir adet text ve buton ekleyelim. Ürün ismi girilip “Ürün ekle” butonuna basıldığında veritabanına giriş yapılsın.

Fonksiyonumuzu </head> öncesi oluşturalım:

<script type="text/javascript">
 function XmlHttpObj()
 {
 var xhr = null;
// Tarayıcımızın ActiveXObject desteği olup olmadığını kontrol ediyoruz.
 // İnternet Explorer'da gerçekleştirmek için Microsoft.XMLHTTP
try
 {
 xhr=new ActiveXObject("MsXml2.XMLHTTP");
 }
 catch (e)
 {
try
 {
 xhr=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch(e)
 {
 if(typeof XMLHttpRequest!="undefined")
 {
 xhr=new XMLHttpRequest();
 }
 }
 }
 return xhr;
 }
var talep=XmlHttpObj();
 function Listen()
 {
 if(talep.readyState==4 && talep.status==200)
 {
 var sonuc=talep.responseText;
 if(sonuc!=null)
 {
 alert("Kayıt Eklendi");
 }
 else
 {
 alert("Hata Meydana Geldi");
 }
 }
 }
 //veritabanına ürün ekleme yapacağımız fonksiyon
 //onreadystatechange ile durum değişikliği kontrolü yaptık.
 function Ekle()
 {
 talep.open("POST","Webform1.aspx");
 talep.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 talep.onreadystatechange=Listen;
 talep.send("mail="+document.all.Text1.value);
}
</script>

Kodlarımızı aşağıdaki şekilde yazalım:

protected void Page_Load(object sender, EventArgs e)
 {
 if (!string.IsNullOrEmpty(Request.Form["mail"]))
 {
 try
 {
 SqlConnection sqlcon = new SqlConnection("server=.;database=northwind;trusted_connection=true");
 SqlCommand sqlcmd = new SqlCommand("insert into products (productname) values (@ad)", sqlcon);
 sqlcmd.Parameters.AddWithValue("@ad", Request.Form["mail"]);
 sqlcon.Open();
 sqlcmd.ExecuteNonQuery();
 sqlcon.Close();
 }
 catch (Exception)
 {
throw;
 }
}

 

Sayfayı çalıştırdığımızda ürün ismini girip veritabanına gönderebiliriz.

Comments

  1. Hocam bide ben böyle deniyorum ama olmuyor

    //veritabanına ürün ekleme yapacağımız fonksiyon
    //onreadystatechange ile durum değişikliği kontrolü yaptık.
    function add() {
    var request;
    try {
    request = new XMLHttpRequest();
    request.open(“POST”, “Webform1.aspx”);
    request.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
    request.onreadystatechange = function () {
    if (request.readystate == 4) {
    request.send(“mail=” + document.all.Text1.value);
    }
    }
    } catch (e) {
    }
    }

  2. Hocam kaç saatir bakıyorum da bu mail ne onu anlamadım kontrol olması gerekiyor ama kodda bu isimde bir kontrol yok