Ajax dan cara kerjanya
Ajax adalah teknologi yang bertukar data dengan server tanpa halaman web yang menyegarkan. Ini pertama kali digunakan oleh Google di Google Maps dan dengan cepat populer.
Ajax tidak bisa menjadi domain silang. Jika Anda perlu melakukan domain silang, Anda dapat menggunakan document.domain = 'a.com'; atau gunakan proxy server untuk proxy file xmlhttpRequest.
Ajax didasarkan pada standar internet yang ada dan menggunakannya dalam kombinasi:
Objek XMLHTTPREQUEST (secara asinkron bertukar data dengan server)
JavaScript/DOM (Tampilan/Interaksi Informasi)
CSS (Tentukan Gaya untuk Data)
XML (sebagai format untuk mengonversi data)
Buat objek XMLHTTPREQUEST
Semua browser modern (IE7+, Firefox, Chrome, Safari, dan Opera) memiliki objek XMLHTTPRequest bawaan.
Buat objek AJAX:
// IE6 atau lebih
var oajax = xmlhttpRequest baru ();
// IE6
var oajax = new ActivexObject ("microsoft.xmlhttp")
Terhubung ke server
oajax.open (metode, url, apakah itu asinkron)
Kita semua tahu bahwa Ajax, yaitu "JavaScript Asynchronous dan XML" (Asynchronous JavaScript dan XML), mengacu pada teknologi pengembangan web yang membuat aplikasi web interaktif. Oleh karena itu, Ajax dilahirkan untuk bekerja dalam mode asinkron (asinkron itu benar, false sinkron)
Sinkron dan asinkron
Sinkronisasi mengacu pada metode komunikasi di mana pengirim mengirim data dan menunggu penerima mengirim respons sebelum mengirim paket data berikutnya.
Asynchronous mengacu pada metode komunikasi di mana pengirim mengirim data tanpa menunggu penerima mengirim respons dan kemudian mengirim paket data berikutnya.
(Sederhananya: sinkronisasi hanya dapat dilakukan satu hal satu per satu, sementara asinkron dapat dilakukan banyak hal pada saat yang sama)
Kirim Permintaan Kirim ()
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
fungsi getDoc () {
var xmlhttp;
if (window.xmlHttpRequest) {
xmlhttp = new xmlHttpRequest ();
}
kalau tidak{
xmlhttp = ActivexObject baru ("microsoft.xmlhttp"); // untuk IE6
}
xmlhttp.onreadystateChange = function () {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
document.geteLementById ("myid"). innerHtml = xmlhttp.Responsetext;
}
}
xmlhttp.open ("get", index.php, true);
xmlhttp.send ();
}
</script>
</head>
<body>
<typon type = "tombol" ontClick = "getDoc ()"> Data Permintaan </button>
</body>
Dapatkan atau posting?
Dibandingkan dengan POST, GET lebih sederhana dan lebih cepat dan tersedia dalam banyak kasus.
Namun, gunakan permintaan pos dalam kasus -kasus berikut:
Tidak dapat menggunakan file yang di -cache (perbarui file atau database di server)
Kirim sejumlah besar data ke server (posting tidak memiliki batas data)
Posting lebih stabil dan dapat diandalkan daripada mendapatkan saat mengirim input pengguna yang berisi karakter yang tidak diketahui
Menerima informasi pengembalian
oajax.onreadystatechange = function () {// event handler yang akan dipanggil saat keadaan permintaan berubah
waspada (oajax.readystate);
}
Setiap kali nilai properti ReadyState berubah, acara ReadyStateChange akan dipicu. Acara ini dapat digunakan untuk mendeteksi nilai ReadyState setelah setiap perubahan keadaan. Biasanya, kami hanya tertarik pada tahap di mana nilai ReadyState adalah 4, karena semua data siap saat ini, namun, event handler OnReadyStateChange harus ditentukan sebelum menelepon terbuka () untuk memastikan kompatibilitas lintas-browser. Mari kita lihat contoh:
Salinan kode adalah sebagai berikut:
var xhr = createxhr ();
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
alert (xhr.statustext);
} kalau tidak {
Peringatan ("Permintaan tidak berhasil:" + xhr.status);
}
}
};
xhr.open ("get", "example.txt", true);
xhr.send (null);
Objek XHR
Ketika objek XHR mengirimkan permintaan HTTP ke server, ia melewati beberapa negara sampai permintaan diproses, dan kemudian menerima respons. ReadyState adalah properti negara dari permintaan XHR, yang dengan sendirinya memiliki 5 nilai properti:
0 (tidak diinisialisasi) Metode terbuka () belum disebut
1 (memuat) metode kirim () telah dipanggil dan permintaan sedang dikirim
2 (pemuatan selesai) Metode Send () telah selesai dan semua konten respons telah diterima
3 (analisis) Konten respons sedang diuraikan
4 (Lengkap) Parsing konten respons selesai dan dapat digunakan oleh klien.
status
Atribut status mewakili kode status respons yang dikembalikan dari server. Sebagai contoh: 200 berarti keberhasilan, 404 berarti tidak ditemukan.
1-Word Header: Pesan. Jenis kode status ini berarti bahwa permintaan telah diterima dan perlu diproses.
2 kata kepala: Sukses. Jenis kode status ini berarti bahwa permintaan telah berhasil diterima, dipahami dan diterima oleh server.
Header 3-kata: pengalihan. Jenis kode status ini berarti bahwa tindakan lebih lanjut diperlukan oleh klien untuk menyelesaikan permintaan.
4-karaktere header: Kesalahan klien. Jenis kode status ini berarti bahwa klien mungkin tampaknya memiliki kesalahan, yang menghambat pemrosesan server.
Header 5-Word: Kesalahan server. Jenis kode status ini mewakili kesalahan atau keadaan abnormal yang terjadi selama proses pemrosesan permintaan server
Juga terlampir: Penjelasan terperinci tentang kode status HTTP
Statustext
Statustext adalah informasi teks yang dikembalikan dalam respons dan hanya dapat digunakan jika nilai ReadyState adalah 3 atau 4. Ketika ReadyState adalah nilai lain, tampilan mengakses properti Statustext akan melempar pengecualian.
Metode XHR
| metode | menggambarkan |
|---|---|
| menggugurkan() | Menyebabkan permintaan yang saat ini dieksekusi dibatalkan |
| getAllResponseheaders () | Mengembalikan satu karakter | string yang berisi nama dan nilai semua header respons |
| getResponseader (nama) | Mengembalikan nama dan nilai yang ditentukan dalam header respons |
| Buka (metode, url, async, nama pengguna, pwd) | Atur metode http (dapatkan atau posting) dll. |
| Kirim (konten) | Mengeluarkan permintaan dengan konten subjek yang ditentukan |
| setRequestheader (nama, nilai) | Tetapkan header permintaan dengan nama dan nilai yang ditentukan |
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var oajax = oajax ();
waspada (oajax.readystate); // "0" muncul "
oajax.open ("get", "index.html", true);
waspada (oajax.readystate); // "1" muncul
oajax.send (null);
waspada (oajax.readystate); // 4 muncul di bawah IE, sedangkan Firefox adalah 2
// Anda dapat mendengarkan melalui acara ReadyStateChange
oajax = xhr ();
oajax.onreadystatechange = function () {
waspada (oajax.readystate); // urutan di bawah firefox adalah 1, 2, 3, 4, tetapi pada akhirnya, akan ada 1 lainnya
// Di bawah IE itu 1, 1, 3, 4
};
oajax.open ("get", "index.txt", true);
oajax.send (null);
</script>