XML DOM - HttpRequest objek
Melalui XMLHttpRequest objek, Anda dapat memperbarui bagian dari halaman web tanpa reload seluruh halaman.
XMLHttpRequest Object
objek XMLHttpRequest digunakan untuk pertukaran data dengan server di belakang layar.
objek XMLHttpRequest adalahmimpi pengembang, karena Anda dapat:
- Memperbarui halaman web tanpa reload halaman
- Setelah halaman dibuka dari permintaan data server
- Setelah halaman telah dimuat data yang diterima dari server
- Pengiriman data ke server di latar belakang
Buat XMLHttpRequest objek
Semua browser modern (IE7 +, Firefox, Chrome, Safari dan Opera) memiliki objek built-in XMLHttpRequest.
Buat sintaks objek XMLHttpRequest
versi lama dari Internet Explorer (IE5 dan IE6) menggunakan ActiveX objek:
Untuk menangani semua browser modern, termasuk IE5 dan IE6, periksa apakah browser mendukung objek XMLHttpRequest. Jika demikian, maka membuat obyek XMLHttpRequest, jika tidak, membuat objek ActiveX:
contoh
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Coba »
Mengirim permintaan ke server
Dalam rangka untuk mengirim permintaan ke server, kita menggunakan open XMLHttpRequest objek () dan mengirim () metode:
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET atau POST?
GET sederhana dari POST dan cepat dan dapat digunakan dalam banyak kasus.
Namun, selalu menggunakan permintaan POST dalam situasi berikut:
- file cache bukanlah pilihan (atau file database pada server update)
- Jumlah data yang dikirim ke server (POST tidak ada batas ukuran) besar
- Mengirim input pengguna (dapat berisi karakter yang tidak diketahui), POST kuat dan lebih aman daripada GET
URL - file di server
Argumen url metode open (), adalah alamat dari sebuah file di server:
File dapat berupa jenis file (seperti .txt dan .xml), atau file server script (seperti html dan php, dapat melakukan tindakan pada server sebelum mengirim kembali respon).
Asynchronous - Benar atau Salah?
Untuk permintaan transmisi asynchronous, terbuka metode argumen async () harus diatur ke benar:
Kirim permintaan asynchronous untuk pengembang Web adalah langkah besar ke depan. Pada server untuk melakukan banyak tugas yang sangat memakan waktu.
Melalui dikirim asynchronous, JavaScript tidak perlu menunggu respon server, tapi bisa diganti dengan:
- Sambil menunggu respon dari server, untuk mengeksekusi skrip tambahan
- Siap untuk menangani respon ketika respon
Async = true
Bila menggunakan async = true, ketika dalam menanggapi telah ditentukan acara fungsi onreadystatechange siap untuk dieksekusi:
contoh
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
Coba »
Async = false
Untuk async parameter ketiga = false, mengubah terbuka () metode adalah palsu:
Tidak direkomendasikan async = false, tetapi jika ditangani beberapa permintaan kecil atau kaleng.
Ingat, JavaScript di respon server tidak berlanjut sampai Anda siap. Jika server sibuk atau lambat, aplikasi akan ditangguhkan atau dihentikan.
Catatan: Bila Anda menggunakan async = false, tidak menulis fungsi onreadystatechange - hanya perlu menempatkan kode setelah send () pernyataan untuk:
contoh
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Coba »
Server Response
Untuk mendapatkan respon dari server, menggunakan objek XMLHttpRequest ini responseText atau responseXML properti.
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
properti responseText
Jika respon dari server tidak XML, silahkan menggunakan properti responseText.
properti responseText mengembalikan respon sebagai string, Anda dapat menggunakannya sesuai:
properti responseXML
Jika respon tidak XML dari server, dan Anda ingin menyelesaikannya ke objek XML, menggunakan properti responseXML:
contoh
Meminta berkas cd_catalog.xml dan mengurai respon:
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
Coba »
acara onreadystatechange
Ketika permintaan dikirim ke server, kita perlu melakukan beberapa tindakan berdasarkan respon.
acara onreadystatechange dipicu setiap kali perubahan readyState.
properti XMLHttpRequest readyState memegang status.
Tiga sifat penting dari objek XMLHttpRequest:
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
Dalam acara onreadystatechange, kita tentukan apa yang akan terjadi ketika waktu siap untuk memproses respon server.
Ketika readyState adalah 4 atau 200 negara, respon disiapkan:
contoh
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Coba »
Catatan: acara onreadystatechangedipicu setiap kali perubahan readyState, dipicu total empat kali.
contoh yang lebih
Dengan getAllResponseHeaders () untuk mengambil informasi header
Untuk mengambil informasi header sumber daya (dokumen).
() Mengambil informasi header ditentukan getResponseHeader
Untuk mengambil sumber daya (file) untuk menentukan informasi header.
Pengambilan isi file ASP
Ketika pengguna mengetik karakter di bidang input, bagaimana halaman Web berkomunikasi dengan server Web.
Mengambil konten dari database
Halaman web cara mengekstrak informasi dari database melalui obyek XMLHttpRequest.
file XML pengambilan konten
Buat XMLHttpRequest untuk mengambil data dari file XML dan menampilkan data dalam tabel HTML.