Objek XMLHttpRequest _
Semua browser modern memiliki objek XMLHttpRequest bawaan untuk meminta data dari server.
Semua browser utama memiliki parser XML bawaan untuk mengakses dan memanipulasi XML.
Objek XMLHttpRequest
Objek XMLHttpRequest dapat digunakan untuk meminta data dari server web.
Objek XMLHttpRequest adalah impian pengembang , karena Anda dapat:
- Perbarui halaman web tanpa memuat ulang halaman
- Minta data dari server - setelah halaman dimuat
- Terima data dari server - setelah halaman dimuat
- Kirim data ke server - di latar belakang
Contoh XMLHttpRequest
Saat Anda mengetik karakter di bidang input di bawah, XMLHttpRequest dikirim ke server, dan beberapa saran nama dikembalikan (dari server):
Contoh
Start typing a name in the input field below:
Suggestions:
Mengirim XMLHttpRequest
Semua browser modern memiliki objek XMLHttpRequest bawaan.
Sintaks JavaScript umum untuk menggunakannya terlihat seperti ini:
Contoh
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Membuat Objek XMLHttpRequest
Baris pertama dalam contoh di atas membuat objek XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Acara perubahan status siap pakai
Properti readyState memegang status XMLHttpRequest.
Acara onreadystatechange dipicu setiap kali readyState berubah.
Selama permintaan server, readyState berubah dari 0 menjadi 4:
0: permintaan tidak diinisialisasi
1: koneksi server dibuat
2: permintaan diterima
3: permintaan pemrosesan
4: permintaan selesai dan respons siap
Di properti onreadystatechange, tentukan fungsi yang akan dieksekusi saat readyState berubah:
xhttp.onreadystatechange = function()
Ketika readyState adalah 4 dan statusnya adalah 200, responsnya sudah siap:
if (this.readyState == 4 && this.status == 200)
Properti dan Metode XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Akses Lintas Domain
Untuk alasan keamanan, browser modern tidak mengizinkan akses lintas domain.
Ini berarti bahwa halaman web dan file XML yang coba dimuat, harus berada di server yang sama.
Contoh di W3Schools semua file XML terbuka yang terletak di domain W3Schools.
Jika Anda ingin menggunakan contoh di atas pada salah satu halaman web Anda sendiri, file XML yang Anda muat harus berada di server Anda sendiri.
Properti responseText
Properti responseText mengembalikan respons sebagai string.
Jika Anda ingin menggunakan respons sebagai string teks, gunakan properti responseText:
Contoh
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Properti responseXML
Properti responseXML mengembalikan respons sebagai objek XML DOM.
Jika Anda ingin menggunakan respons sebagai objek XML DOM, gunakan properti responseXML:
Contoh
Minta file cd_catalog.xml dan gunakan respons sebagai objek XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
DAPATKAN atau POSTING?
GET lebih sederhana dan lebih cepat daripada POST, dan dapat digunakan dalam banyak kasus.
Namun, selalu gunakan permintaan POST saat:
- File yang di-cache bukanlah pilihan (memperbarui file atau database di server)
- Mengirim data dalam jumlah besar ke server (POST tidak memiliki batasan ukuran)
- Mengirim input pengguna (yang dapat berisi karakter yang tidak dikenal), POST lebih kuat dan aman daripada GET
Url - File Di Server
Parameter url dari metode open(), adalah alamat ke file di server:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
File dapat berupa file apa pun, seperti .txt dan .xml, atau file skrip server seperti .asp dan .php (yang dapat melakukan tindakan di server sebelum mengirim respons kembali).
Asynchronous - Benar atau Salah?
Untuk mengirim permintaan secara asinkron, parameter async dari metode open() harus disetel ke true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Mengirim permintaan asinkron adalah peningkatan besar bagi pengembang web. Banyak tugas yang dilakukan di server sangat memakan waktu.
Dengan mengirim secara asinkron, JavaScript tidak harus menunggu respons server, tetapi dapat:
- jalankan skrip lain sambil menunggu respons server
- berurusan dengan respons ketika respons sudah siap
Asinkron = benar
Saat menggunakan async = true, tentukan fungsi yang akan dijalankan saat respons siap di acara onreadystatechange:
Contoh
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Asinkron = salah
Untuk menggunakan async = false, ubah parameter ketiga dalam metode open() menjadi false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Menggunakan async = false tidak disarankan, tetapi untuk beberapa permintaan kecil ini boleh saja.
Ingat bahwa JavaScript TIDAK akan terus dijalankan, hingga respons server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.
Catatan: Saat Anda menggunakan async = false, JANGAN tulis fungsi onreadystatechange - cukup masukkan kode setelah pernyataan send():
Contoh
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Pengurai XML
Semua browser modern memiliki pengurai XML bawaan.
Model Objek Dokumen XML (XML DOM) berisi banyak metode untuk mengakses dan mengedit XML.
Namun, sebelum dokumen XML dapat diakses, dokumen tersebut harus dimuat ke dalam objek XML DOM.
Parser XML dapat membaca teks biasa dan mengubahnya menjadi objek XML DOM.
Mengurai String Teks
Contoh ini mem-parsing string teks menjadi objek XML DOM, dan mengekstrak info darinya dengan JavaScript:
Contoh
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Browser Lama (IE5 dan IE6)
Versi lama Internet Explorer (IE5 dan IE6) tidak mendukung objek XMLHttpRequest.
Untuk menangani IE5 dan IE6, periksa apakah browser mendukung objek XMLHttpRequest, atau buat ActiveXObject:
Contoh
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Versi lama Internet Explorer (IE5 dan IE6) tidak mendukung objek DOMParser.
Untuk menangani IE5 dan IE6, periksa apakah browser mendukung objek DOMParser, atau buat ActiveXObject:
Contoh
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Lebih Banyak Contoh
Mengambil informasi header dari sumber daya (file).
Ambil informasi header tertentu dari sumber daya (file).
Bagaimana halaman web dapat berkomunikasi dengan server web saat pengguna mengetik karakter di bidang input.
Bagaimana halaman web dapat mengambil informasi dari database dengan objek XMLHttpRequest.
Buat XMLHttpRequest untuk mengambil data dari file XML dan menampilkan data dalam tabel HTML.