Objek XMLHttpRequest

Objek XMLHttpRequest menyediakan metode untuk berkomunikasi dengan server setelah halaman diambil.

Apa itu Objek XMLHttpRequest?

Objek XMLHttpRequest adalahImpian para pengembang, karena Anda dapat:

  • Memperbarui halaman tanpa memuat ulang halaman
  • Mengambil data dari server setelah halaman diMuat
  • Menerima data dari server setelah halaman diMuat
  • Mengirim data ke server di latar belakang

Semua browser modern mendukung objek XMLHttpRequest.

Contoh:Membuat komunikasi XML HTTP saat mengetik teks dengan server.

Membuat objek XMLHttpRequest

Dengan baris kode JavaScript sederhana, kita dapat membuat objek XMLHttpRequest.

Pada semua browser modern (termasuk IE 7):

xmlhttp=new XMLHttpRequest()

Pada Internet Explorer 5 dan 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Contoh

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Peramban Anda tidak mendukung XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

TIY

Keterangan:onreadystatechange adalah penanggung jawab peristiwa. Nilainya (state_Change) adalah nama fungsi yang dijalankan saat status objek XMLHttpRequest berubah. Status berubah dari 0 (belum diinisialisasi) hingga 4 (selesai). Hanya saat status 4, kita melaksanakan kode.

Mengapa menggunakan Async=true ?

Contoh kita menggunakan "true" di parameter ketiga method open().

Parameter ini menentukan apakah permintaan akan diproses secara asinkron.

True berarti skrip akan terus berlanjut setelah method send(), tanpa menunggu tanggapan dari server.

Peristiwa onreadystatechange memperkomplekskan kode. Tetapi ini adalah cara paling aman untuk mencegah kode berhenti tanpa menerima tanggapan dari server.

Dengan mengatur parameter ini ke "false", Anda dapat menghindari eksekusi kode onreadystatechange ekstra. Jika eksekusi kode lainnya tidak penting saat permintaan gagal, Anda dapat menggunakan parameter ini.

TIY

Beberapa contoh lain

Memuat berkas textfile ke elemen div melalui XML HTTP

Melakukan permintaan HEAD melalui XML HTTP

Melakukan permintaan HEAD yang ditentukan melalui XML HTTP

Daftar data di berkas XML melalui XML HTTP

XML / ASP

Anda juga dapat membuka dan kirim dokumen XML ke halaman ASP di server, analisis permintaan ini, dan kirim kembali hasilnya.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ kode untuk IE7, Firefox, Opera, dll.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ kode untuk 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("Peramban Anda tidak mendukung XMLHTTP.");
  }
</script>
</body>
</html>

Halaman ASP, ditulis dalam VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
untuk setiap x di xmldoc.documentElement.childNodes
   jika x.NodeName = "to" maka name=x.text
next
response.write(name)
%>

Kirimkan hasil kembali ke klien melalui properti response.write.

TIY

Apakah objek XMLHttpRequest adalah standar W3C?

Tidak ada standar yang diusulkan W3C yang menentukan objek XMLHttpRequest.

Namun, spesifikasi "Load and Save" Level 3 DOM W3C mengandung beberapa fungsi yang serupa, tetapi belum ada peramban yang melaksanakannya.

Lihat

Panduan Referensi DOM XML - Objek XMLHttpRequest