Semua browser modern memiliki objek built-in XMLHttpRequest untuk meminta data dari server.
Semua browser utama memiliki built-in XML parser untuk mengakses dan memanipulasi XML.
XMLHttpRequest Object
Objek XMLHttpRequest dapat digunakan untuk meminta data dari web server.
Objek XMLHttpRequest adalah a developers dream , karena Anda dapat:
- Memperbarui halaman web tanpa reload halaman
- Permintaan data dari server - setelah halaman telah dimuat
- Menerima data dari server - setelah halaman telah dimuat
- Mengirim data ke server - di latar belakang
XMLHttpRequest Contoh
Ketika Anda mengetik karakter di kolom input bawah, XMLHttpRequest dikirim ke server, dan beberapa saran nama dikembalikan (from the server) :
Contoh
Start typing a name in the input field below:
Suggestions:
Mengirim XMLHttpRequest
Semua browser modern memiliki built-in objek XMLHttpRequest.
Sebuah sintaks JavaScript umum untuk menggunakan terlihat seperti ini:
Contoh
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Cobalah sendiri " Membuat Object XMLHttpRequest
Baris pertama dalam contoh di atas menciptakan objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
The onreadystatechange acara
Properti readyState menyandang status XMLHttpRequest yang.
Acara onreadystatechange dipicu setiap kali perubahan readyState.
Selama permintaan server, readyState berubah dari 0 sampai 4:
0: permintaan yang tidak diinisialisasi
1: koneksi server didirikan
2: Permintaan diterima
3: memproses permintaan
4: meminta selesai dan respon siap
Di properti onreadystatechange, tentukan fungsi yang akan dijalankan ketika readyState perubahan:
xhttp.onreadystatechange = function()
Ketika readyState adalah 4 dan status adalah 200, respon siap:
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest Properties dan Metode
| metode | Deskripsi |
|---|---|
| new XMLHttpRequest() | Menciptakan objek XMLHttpRequest baru |
| open( method, url, async ) | Menentukan jenis permintaan method : jenis permintaan: GET atau POST url : lokasi file async : true (asynchronous) atau salah (synchronous) |
| send() | Mengirimkan permintaan ke server (used for GET) |
| send( string ) | Mengirimkan permintaan string untuk server (used for POST) |
| onreadystatechange | Sebuah fungsi untuk dipanggil ketika perubahan properti readyState |
| readyState | Status XMLHttpRequest 0: permintaan yang tidak diinisialisasi 1: koneksi server didirikan 2: Permintaan diterima 3: memproses permintaan 4: meminta selesai dan respon siap |
| status | 200: OK 404 halaman tidak ditemukan |
| responseText | Tanggapan data string |
| responseXML | Respon Data sebagai data XML |
Akses Di Domain
Untuk alasan keamanan, browser modern tidak mengizinkan akses di seluruh domain.
Ini berarti bahwa kedua halaman web dan file XML mencoba untuk memuat, harus berada pada server yang sama.
Contoh-contoh di w3ii semua file XML terbuka yang terletak di domain w3ii.
Jika Anda ingin menggunakan contoh di atas pada salah satu halaman web Anda sendiri, file XML Anda memuat harus berada di server Anda sendiri.
ResponseText Properti
Properti responseText mengembalikan respon sebagai string.
Jika Anda ingin menggunakan respon sebagai string teks, menggunakan properti responseText:
The responseXML Properti
Properti responseXML mengembalikan respon sebagai objek XML DOM.
Jika Anda ingin menggunakan respon sebagai objek XML DOM, gunakan properti responseXML:
Contoh
Meminta file cd_catalog.xml dan menggunakan respon 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; Cobalah sendiri " GET atau POST?
GET lebih sederhana dan lebih cepat dari POST, dan dapat digunakan dalam banyak kasus.
Namun, selalu menggunakan permintaan POST ketika:
- Sebuah file cache bukanlah pilihan (update a file or database on the server)
- Mengirimkan sejumlah besar data ke server (POST tidak memiliki batasan ukuran)
- Mengirim input pengguna (which can contain unknown characters) , POST lebih kuat dan aman daripada GET
url - Sebuah File Pada Server
Parameter url dari open() metode, adalah sebuah alamat ke file di server:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
File dapat jenis file, seperti .txt dan xml, atau file server yang scripting seperti ASP dan .php (yang dapat melakukan tindakan pada server sebelum mengirim respon kembali).
Asynchronous - Benar atau Salah?
Untuk mengirim permintaan secara asynchronous, parameter async dari open() metode harus diatur ke benar:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Mengirim asynchronous permintaan adalah perbaikan besar untuk pengembang web. Banyak tugas yang dilakukan pada server sangat memakan waktu.
Dengan mengirimkan asynchronous, JavaScript tidak harus menunggu respon dari server, tapi malah dapat:
- mengeksekusi skrip lain sambil menunggu respon server
- berurusan dengan respon ketika respon siap
Async = true
Bila menggunakan async = true, tentukan fungsi untuk mengeksekusi ketika respon siap dalam acara onreadystatechange:
Contoh
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Cobalah sendiri " Async = false
Untuk menggunakan async = false, mengubah parameter ketiga dalam open() metode untuk palsu:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Menggunakan async = false tidak dianjurkan, tapi untuk permintaan kecil beberapa ini bisa ok.
Ingat bahwa JavaScript TIDAK akan terus mengeksekusi, sampai respon server siap. Jika server sibuk atau lambat, aplikasi akan hang atau berhenti.
Note: Bila Anda menggunakan async = false, jangan menulis fungsi onreadystatechange - hanya menempatkan kode setelah send() pernyataan:
Contoh
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Cobalah sendiri " XML Parser
Semua browser modern memiliki built-in XML parser.
Dokumen XML Object Model (the XML DOM) mengandung banyak metode untuk mengakses dan mengedit XML.
Namun, sebelum dokumen XML dapat diakses, itu harus dimuat ke objek XML DOM.
Parser XML dapat membaca teks biasa dan mengubahnya menjadi sebuah objek XML DOM.
Parsing String Teks
Contoh ini mem-parsing string teks menjadi objek DOM XML, dan ekstrak info dari 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>
Cobalah sendiri " Old Browser (IE5 and IE6)
Versi lama dari Internet Explorer (IE5 and IE6) tidak mendukung objek XMLHttpRequest.
Untuk menangani IE5 dan IE6, memeriksa apakah browser mendukung objek XMLHttpRequest, atau membuat ActiveXObject:
Contoh
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Cobalah sendiri " Versi lama dari Internet Explorer (IE5 and IE6) tidak mendukung objek DOMParser.
Untuk menangani IE5 dan IE6, memeriksa apakah browser mendukung objek DOMParser, atau membuat 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);
}
Cobalah sendiri " 
Contoh lebih
Mengambil informasi header dengan getAllResponseHeaders()
Mengambil informasi header dari sumber daya (file) .
Mengambil informasi header khusus dengan getResponseHeader()
Mengambil informasi header tertentu dari sumber daya (file) .
Mengambil konten dari file ASP
Bagaimana sebuah halaman web dapat berkomunikasi dengan server web sementara tipe user karakter dalam sebuah field input.
Mengambil konten dari database
Bagaimana sebuah halaman web dapat mengambil informasi dari database dengan objek XMLHttpRequest.
Mengambil konten dari file XML
Buat XMLHttpRequest untuk mengambil data dari file XML dan menampilkan data dalam tabel HTML.