Ajax bukan bahasa pemrograman baru, tetapi pendekatan baru yang menggunakan standar yang ada. Ajax dapat bertukar data dengan server tanpa memuat ulang seluruh halaman. Metode interaksi asinkron ini memungkinkan pengguna untuk mendapatkan data baru tanpa harus menyegarkan halaman setelah mengklik.
Objek XMLHTTPREQUEST
Inti dari AJAX adalah objek XmlHttpRequest (XHR). XHR menyediakan antarmuka untuk mengirim permintaan ke server dan menyelesaikan respons server. Kemampuan untuk mendapatkan data baru dari server dengan cara yang tidak sinkron.
Buat objek di browser (hanya dukungan IE7 dan lebih tinggi):
var xhr = xmlhttpRequest baru ();
Cara menggunakan xhr
Hal pertama yang diperkenalkan adalah metode terbuka (). Itu menerima 3 parameter:
• Jenis permintaan yang akan dikirim (posting, dapatkan, dll.)
• URL yang diminta
• Nilai Bolean yang menunjukkan apakah permintaan dikirim secara tidak sinkron
Calling Open () Contoh:
xhr.open ("get", "index.jsp", false);
Dapatkan permintaan untuk index.jsp. URL relatif terhadap halaman saat ini di mana kode dieksekusi; Memanggil metode terbuka () tidak benar -benar mengirim permintaan, itu baru saja memulai permintaan pengiriman.
Hubungi kirim () untuk mengirim permintaan:
xhr.send (null);
Send () menerima parameter, yaitu data yang akan dikirim sebagai badan yang meminta. Jika data tidak perlu dikirim melalui badan permintaan, nol harus dilewati.
Data yang sesuai akan diisi dengan sifat yang relevan dari objek XHR:
• ResponseText: Teks dikembalikan sebagai badan respons
• ResponseXML: Jenis konten sebagai responsnya adalah "Teks/XML" atau "Aplikasi/XML"
• Status: Status HTTP dari respons
• Statustext: Deskripsi Status HTTP
Setelah menerima respons, pertama -tama periksa atribut status dan konfirmasikan bahwa respons telah kembali, umumnya 200 digunakan sebagai tanda keberhasilan. Kode status 304 menunjukkan bahwa sumber daya belum dimodifikasi dan versi yang di -cache di browser dapat digunakan secara langsung.
Untuk menerima respons yang sesuai, dua kode status harus terdeteksi dengan cara berikut:
xhr.open ("get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.Status <300) || xhr.status == 304) {was (xhr.responsetext);} lainnya {} {} {xhr.Dengan mendeteksi properti ReadyState, fase aktif saat ini dari proses permintaan/respons dapat ditentukan.
• 0: tidak diinisialisasi. Metode terbuka () tidak dipanggil
• 1: Mulai. Metode terbuka () telah dipanggil, dan metode Send () belum dipanggil.
• 2: Kirim. Metode kirim () telah dipanggil, tidak ada tanggapan yang diterima
• 3: Terima. Beberapa data telah diterima
• 4: selesai. Semua data telah diterima dan dapat digunakan di sisi klien
Ketika nilai properti ReadyState berubah, acara ReadyStateChange akan dipicu. Untuk memastikan kompatibilitas browser, tentukan event handler OnReadyStateChange sebelum menelepon terbuka ().
var xhr = new xmlHttpRequest (); xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {xhr. + xhr.status);}}}; xhr.open ("get", "index.jsp", true); xhr.send (null);Permintaan asinkron dapat dibatalkan sebelum menerima tanggapan:
xhr.abort ();
Informasi header HTTP
Objek XHR menyediakan metode untuk memanipulasi header permintaan dan menanggapi informasi header.
Secara default, saat mengirim permintaan XHR, informasi header berikut juga akan dikirim.
• Terima: jenis konten yang dapat ditangani oleh browser
• Terima-Ukis: Karakter set yang dapat ditampilkan oleh browser
• Accept-Encoding: Pengkodean terkompresi yang dapat ditangani oleh browser
• menerima-bahasa: bahasa yang saat ini ditetapkan oleh browser
• Koneksi: Jenis koneksi antara browser dan server
• Cookie: Cookie apa pun yang disetel di halaman saat ini
• Host: Domain tempat halaman tempat permintaan dikeluarkan
• Referensi: URL halaman yang mengeluarkan permintaan
• Pengguna-Aent: String Agen Pengguna Browser
Gunakan setRequestHeader () untuk mengatur informasi header permintaan khusus. Anda harus memanggil metode terbuka () setelah menelepon dan sebelum menelepon Send ()
setRequestheader ():
xhr.open ("get", "index.jsp", true); xhr.setrequestheader ("myheader", "myValue"); xhr.send (null);Hubungi getResponseader () dan lulus di nama lapangan untuk mendapatkan informasi header respons yang sesuai. getAllResponseader () mendapat string panjang yang berisi semua informasi header.
var myheader = xhr.getResponseHeader ("myheader"); var allheaders = xhr.getAllResponseHeader ();Dapatkan permintaan
Dapatkan digunakan untuk menanyakan server untuk informasi tertentu. Anda dapat menambahkan parameter string kueri ke ujung URL. Nama dan nilai dari setiap parameter dalam string kueri harus dikodekan menggunakan encodeuricomponent ():
xhr.open ("get", "login.jsp? name1 = value1 & name2 = value2", false); addurlparam () menerima tiga parameter: URL parameter yang akan ditambahkan, nama parameter, dan nilai parameter. var url = "login.jsp"; // tambahkan parameter url = addurlparam (url, "nama pengguna", "xxyh"); url = addurlparam (url, "kata sandi", "xxyh123"); // inisialisasi permintaan xhr.open ("get", url, false);Permintaan Posting
Permintaan POST digunakan untuk mengirim data ke server yang harus disimpan. Badan permintaan pos dapat berisi banyak data, dan formatnya tidak terbatas.
Permintaan Inisialisasi:
xhr.open ("post", "login.jsp", true); Pertama atur informasi header tipe konten ke aplikasi/X-www-form-urlencoded, dan kemudian buat format string. Jika Anda perlu membuat serial data formulir di halaman dan kemudian mengirimkannya ke server melalui XHR, Anda dapat menggunakan fungsi serialize () untuk membuat string ini: xhr.open ("get", "login.jsp", false); xhr.setrequestheader ("content-type", "Application/X-WWW-Form-urlencoded"); document.geteLementById ("User-info"); xhr.send (serialize (form));Di atas adalah pemahaman mendalam tentang Ajax dalam JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!