Objek XMLHttpRequest

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

Apakah Objek XMLHttpRequest?

Objek XMLHttpRequest adalahMimpi para pengembang, karena Anda dapat:

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

Semua pelayar modern mendukung objek XMLHttpRequest.

Contoh:Berhubungan dengan server melalui XML HTTP ketika mengetik teks.

Membuat objek XMLHttpRequest

Dengan baris kode JavaScript yang sederhana, kami dapat membuat objek XMLHttpRequest.

Dalam semua pelayar modern (termasuk IE 7):

xmlhttp=new XMLHttpRequest()

Dalam 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)
  {// kod untuk semua pelayar baru}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// kod untuk IE5 dan IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...kod kami di sini...
    }
  else
    {
    alert("Masalah mengambil data XML");
    }
  }
}
</script>

TIY

Komentar:onreadystatechange ialah seorang penanggung jawab acara. Nama nilai (state_Change) ialah nama fungsi, yang akan diaktifkan ketika objek XMLHttpRequest keadaan berubah. Status berubah dari 0 (belum diinisialisasi) hingga 4 (selesai). Hanya saat status 4, kami akan menjalankan kode.

Mengapa gunakan Async=true ?

Contoh kami menggunakan "true" dalam parameter ketiga method open().

Parameter ini menentukan sama ada permintaan adalah diproses secara asynchronus.

Benar bermakna skrip akan terus dijalankan selepas method send(), tanpa menunggu tanggapan daripada pelayan.

Peristiwa onreadystatechange mempersendikan kod. Tetapi ini adalah cara paling selamat untuk mencegah kod berhenti tanpa menerima tanggapan daripada pelayan.

Dengan mengatur parameter ini ke "false", anda boleh mengelakkan kod onreadystatechange ekstra. Jika penggunaan kod lain setelah kegagalan permintaan adalah tidak penting, anda boleh gunakan parameter ini.

TIY

Contoh Lainnya

Muat fail teks ke elemen div melalui XML HTTP

Lakukan permintaan HEAD melalui XML HTTP

Lakukan permintaan HEAD terhadap fail XML melalui XML HTTP

Daftar data dalam fail XML melalui XML HTTP

XML / ASP

Anda juga boleh buka dan hantar dokumen XML ke halaman ASP di pelayan, analisis permintaan ini, dan kemudian kembalikan hasilnya.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ kod untuk IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ kod 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(xmlHttp.responseText);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

Halaman ASP, ditulis dalam VBScript:

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

Kirimkan hasil kembali ke klien dengan menggunakan properti response.write.

TIY

Adakah objek XMLHttpRequest adalah standard W3C?

Tiada standard W3C yang merekomendasikan objek XMLHttpRequest.

Walaupun, spesifikasi "Load and Save" Level 3 DOM W3C mengandungi beberapa fungsi yang serupa, tetapi belum ada pelayar yang melaksanakannya.

Lihat

Panduan Rujukan XML DOM: Objek XMLHttpRequest