Ajax: Cara untuk meminta data tanpa menyegarkan seluruh halaman;
Inti teknis AJAX adalah objek XmlHttpRequest;
Proses Permintaan AJAX: Buat objek XMLHTTPREQUEST, sambungkan ke server, kirim permintaan, dan terima data respons;
/*** Dapatkan objek AJAX*/fungsi getajaxHttp () {var xmlhttp; coba {// chrome, firefox, opera 8.0+, safari xmlhttp = new XmlHttpRequest (); } catch (e) {// internet explorer coba {// ie5, 6 xmlhttp = new ActivexObject ("msxml2.xmlhttp"); } catch (e) {coba {// ie7 atau di atas xmlhttp = new activexObject ("microsoft.xmlhttp"); } catch (e) {waspada ("Browser Anda tidak mendukung Ajax!"); mengembalikan false; }}} return xmlhttp;}/** * Kirim permintaan jax * url-url * methodType (post/get) * con (true (asynchronous) | false (sinkron)) * parameter (Parameter) * Catatan: tidak ada dua nama, tidak ada kutipan, hanya diperlukan saat itu dipanggil hanya ketika ruCECECEDE) * Catatan: Tidak ada dua kali, tidak ada tanda kutip, itu hanya dipanggil ketika itu hanya ketika ruCECECECEDE) * Metode Callback, tidak ada kutipan, itu hanya dipanggil hanya ketika ruCECECEDE) * Metode Callback, tidak ada kutipan yang diperlukan, hanya dipanggil hanya ketika ruCECECEDSECECEDS) * METODE INI: NOTHODE THE DUAIT DUA KUTI yang lain adalah objek yang akan diproses) * OBJ perlu pergi ke objek yang akan diproses dalam metode callback */function AjaxRequest (url, methodType, con, parameter, functionName, obj) {var xmlhttp = getajaxhttp (); xmlhttp.onreadystatechange = function () {// Nilai ReadyState Deskripsi // 0, inisialisasi, objek XHR telah dibuat, terbuka belum dieksekusi // 1, pemuatan, metode terbuka telah dipanggil, tetapi permintaan belum dikemuk. atau URL Ditemukan // 500: Server menghasilkan kesalahan internal jika (xmlhttp.readystate == 4 && xhr.status == 200) {// Respons http telah sepenuhnya diterima sebelum memanggil FunctionName (xmlhtp, OBJ); }}; xmlhttp.open (methodType, url, con); xmlhttp.send (parameter);} // Ini adalah fungsi parameter createxml () {var xml = "<user> <userid> asdfasdfasdf <// userid> </serander>"; // "//" Ini bukan modal v tetapi pelarian adalah slash kiri dan retract return xml; json = {id: 0, nama pengguna: "orang baik"}; return json;} function c () {alert ("");}//tes
AjaxRequest ("http://www.baidu.com", "post", true, createxml (), c, dokumen);Mari kita lihat contoh lain
AJAX ({url: "./testxhr.aspx", // Jenis Alamat Permintaan: "Posting", // METODE METODE PERMINTAAN: {Name: "Super", Usia: 20}, // Parameter Permintaan DataType: "JSON", Success: Function (Response, XML) {// Kode yang dieksekusi setelah penempatan yang berhasil}, gagal: FUNGSI: function AJAX (option) {options = options || {}; options.type = (options.type || "get"). Touppercase (); options.datatype = options.DataType || "json"; var params = formatParams (options.data); // create - non -e6 - Langkah 1 if (window.xmlHttpRequest) {var xhr = new xmlHttpRequest (); } else {// ie6 dan di bawah browser var xhr = new ActivexObject ('microsoft.xmlhttp'); } // terima - Langkah 3 xhr.onreadystatechange = function () {if (xhr.readystate == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && option.success (xhr.responsetext, xhr.responsexml); } else {options.fail && options.fail (status); }}} // Sambungkan dan Kirim - Langkah 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (null); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Atur jenis konten saat mengirimkan formulir XHR.SetRequestheader ("tipe konten", "Aplikasi/X-WWW-Form-Urlencoded"); xhr.send (params); }} // Format Format Parameter FormatParams (data) {var arr = []; untuk (nama var dalam data) {arr.push (encodeuricomponent (name) + "=" + encodeuricomponent (data [name])); } arr.push (("v =" + math.random ()). ganti (".", ")); return arr.join (" & ");}Mari kita lihat prinsipnya
1. Buat
1.1. IE7 dan versi di atas mendukung objek XHR asli, sehingga Anda dapat menggunakannya secara langsung: var oajax = new XmlHttpRequest ();
1.2. Di IE6 dan versi sebelumnya, objek XHR diimplementasikan melalui objek ActiveX di pustaka MSXML. Beberapa buku telah menyempurnakan tiga versi berbeda dari objek tersebut di IE, yaitu msxml2.xmlhttp, msxml2.xmlhttp.3.0 dan msxml2.xmlhttp.6.0; Saya merasa terlalu merepotkan, jadi saya dapat secara langsung menggunakan pernyataan berikut untuk membuatnya: var oajax = ActivexObject baru ('microsoft.xmlhttp');
2. Sambungkan dan Kirim
2.1. Tiga parameter fungsi terbuka (): metode permintaan, alamat permintaan, dan apakah akan meminta secara asinkron (ada sangat sedikit permintaan sinkron, dan belum digunakan);
2.2. Metode GET Request adalah mengirimkan data ke server melalui parameter URL, sementara POST mengirimkan data ke server sebagai parameter Kirim;
2.3. Dalam permintaan POST, sebelum mengirim data, jenis konten dari formulir yang dikirimkan harus ditetapkan;
2.4. Parameter yang dikirimkan ke server harus dikodekan dengan metode encodeuricomponent (). Bahkan, dalam bentuk daftar parameter "key = nilai", baik kunci maupun nilai perlu dikodekan karena mereka akan berisi karakter khusus. Setiap kali Anda meminta, serangkaian "v = xx" akan dieja ke dalam daftar parameter. Ini untuk menolak cache, dan setiap kali Anda memintanya langsung ke server.
Encodeuri (): Digunakan untuk mengkode seluruh URI, dan tidak akan mengkodekan karakter khusus yang termasuk dalam URI, seperti titik dua, tebasan depan, tanda tanya dan tanda -tanda pound; decodeuri fungsi decode yang sesuai ();
Encodeuricomponent (): digunakan untuk menyandikan bagian dari URI dan mengkode setiap karakter non-standar yang ditemukannya; fungsi decodeuricomponent fungsi decode yang sesuai ();
3. Terima
3.1. Setelah menerima respons, data respons akan diisi secara otomatis dengan objek XHR. Atribut yang relevan adalah sebagai berikut
ResponsEtext: Konten tubuh yang dikembalikan oleh respons, dari jenis string;
ResponseXML: Jika jenis konten dari responsnya adalah "Teks/XML" atau "Aplikasi/XML", data XML yang sesuai akan disimpan dalam properti ini, yang merupakan jenis dokumen yang sesuai dengan XML;
Status: Kode Status HTTP Respons;
Statustext: Deskripsi status HTTP;
3.2. Properti ReadyState dari objek XHR mewakili tahap aktif saat ini dari proses permintaan/respons. Nilai properti ini adalah sebagai berikut
0-uninitialized, metode terbuka () belum dipanggil;
Metode 1-start, open () dipanggil, Metode Kirim () tidak dipanggil;
2-Send, metode Send () telah dipanggil, dan tidak ada tanggapan yang diterima;
3-Receive, bagian dari data respons telah diterima;
4-lengkap, semua data respons telah diterima;
Selama nilai Perubahan ReadyState, acara ReadyStateChange akan dipanggil (pada kenyataannya, untuk kehalusan logis, Anda dapat menempatkan ReadyStateChange setelah dikirim, karena server diminta selama Kirim, dan komunikasi jaringan akan dilakukan, yang membutuhkan waktu. Ini juga untuk membukanya.
3.3. Dalam acara ReadyStateChange, pertama -tama tentukan apakah respons diterima dan kemudian tentukan apakah server berhasil menangani permintaan. xhr.status adalah kode status. Kode status dimulai dengan 2 dan semuanya berhasil. 304 berarti mendapatkan dari cache. Kode di atas menambahkan nomor acak setiap kali permintaan diminta, sehingga nilai dari cache tidak perlu dinilai.
4. Permintaan AJAX tidak bisa domain silang!