XMLHttpRequest Nesnesi

XMLHttpRequest nesnesi, web sayfası yüklendikten sonra sunucu ile iletişim kurma yöntemleri sağlar.

XMLHttpRequest nesnesi nedir?

XMLHttpRequest nesnesiGeliştiricilerin rüyasıÇünkü:

  • Sayfa yeniden yüklenmeden web sayfasını güncelleme
  • Sayfa yüklendikten sonra sunucudan veri talep etme
  • Sayfa yüklendikten sonra sunucudan veri alma
  • Arka planda sunucuya veri gönderme

Tüm modern tarayıcılar XMLHttpRequest nesnesini destekler.

Örnek:Metin girdiğinizde sunucu ile XML HTTP iletişimi yapar.

XMLHttpRequest nesnesi oluşturma

Bir satır basit JavaScript kodu ile XMLHttpRequest nesnesi oluşturabiliriz.

Tüm modern tarayıcılar (IE 7 dahil):

xmlhttp=new XMLHttpRequest()

Internet Explorer 5 ve 6'da:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Örnek

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// tüm yeni tarayıcılar için kod}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// IE5 ve IE6 için kod}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Tarayıcınız XMLHTTP'yi desteklemiyor.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = İyi}
    // ...buraya kodumuz...
    }
  else
    {
    alert("XML verilerini alırken sorun");
    }
  }
}
</script>

TIY

Yorum:onreadystatechange bir olay yöneticisidir. Değeri (state_Change) bir fonksiyon adıdır ve XMLHttpRequest nesnesinin durumu değiştiğinde bu fonksiyon tetiklenir. Durum 0 (initialized) ile 4 (complete) arasında değişir. Sadece durum 4 olduğunda kodu çalıştırırız.

Neden Async=true kullanmalıyız?

Bizim örneklerimizde open() metodunun üçüncü parametresinde "true" kullandık.

Bu parametre, istemin async olarak mi yoksa asenkron olarak mı işleneceğini belirler.

True, send() yöntemi sonrasında scriptin devam etmesini ve sunucudan yanıt beklemeden çalışmasını sağlar.

onreadystatechange olayı kodu karmaşık hale getirir. Ancak, sunucudan yanıt almadan önce kodun durmasını önlemek için en güvenli yöntemdir.

Bu parametreyi "false" olarak ayarlayarak ekstra onreadystatechange kodunu atlayabilirsiniz. Eğer istek başarısız olduğunda diğer kodların çalışıp çalışmayacağına dair bir önemi yoksa, bu parametreyi kullanabilirsiniz.

TIY

Daha fazla örnek

XML HTTP ile bir textfile'ı bir div elementine yükler

XML HTTP ile HEAD istemi yapar

XML HTTP ile belirli bir HEAD istemi yapar

XML HTTP ile XML dosyasındaki verileri listeler

XML / ASP

Ayrıca XML belgesini açabilir ve sunucudaki ASP sayfasına göndererek bu istemi analiz edebilir ve sonuçları geri gönderebilirsiniz.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ kod için IE7, Firefox, Opera, vb.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ kod için IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Tarayıcınız XMLHTTP'yi desteklemiyor.");
  }
</script>
</body>
</html>

VBScript ile yazılmış ASP sayfası:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
xmldoc.documentElement.childNodes her birinde x
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Sonuçları istemciye döndürmek için response.write özelliğini kullanarak.

TIY

XMLHttpRequest nesnesi W3C standart mı?

Herhangi bir W3C öneri standardı XMLHttpRequest nesnesini belirlememiştir.

Ancak, W3C DOM Level 3'nün "Yükle ve Kaydet" normu bazı benzer işlevsel içerir, ancak henüz hiçbir tarayıcı bunları uygulamamıştır.

Görünüm

XML DOM referans el kitabı: XMLHttpRequest nesnesi