Ajax adalah singkatan dari JavaScript dan XML asinkron, dan merupakan mekanisme untuk memperbarui bagian tertentu dari halaman. Ini memberi Anda kekuatan untuk memperbarui bagian dari halaman setelah Anda mendapatkan data dari server, sehingga menghindari menyegarkan seluruh halaman. Selain itu, mewujudkan pembaruan halaman lokal dengan cara ini tidak hanya dapat secara efektif menciptakan pengalaman pengguna yang lancar, tetapi juga mengurangi beban di server.
Berikut adalah analisis permintaan AJAX dasar:
var xhr = new xmlhttpRequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (null);Di sini, kami membuat contoh kelas yang dapat membuat permintaan HTTP ke server. Metode terbuka kemudian dipanggil, di mana parameter pertama adalah metode permintaan HTTP dan parameter kedua adalah URL dari halaman permintaan. Akhirnya, kami memanggil metode Kirim dengan parameter null. Jika Anda menggunakan metode Posting Permintaan (kami gunakan di sini), parameter Metode Kirim harus berisi data apa pun yang ingin Anda kirim.
Inilah cara kami menangani respons server:
xhr.onreadystatechange = function () {var done = 4; // ReadyState 4 berarti bahwa permintaan telah dikirim ke server var ok = 200; // Status 200 berarti bahwa server berhasil mengembalikan jika (xhr.readystate === selesai) {if (xhr.status === ok) {console.log (xhr.responsetext); // Ini adalah teks yang dikembalikan} else {console.log ("error:"+ xhr.status); // Terjadi kesalahan dalam permintaan ini}}}OnReadyStateChange tidak sinkron, jadi itu berarti akan dipanggil kapan saja. Jenis fungsi ini disebut fungsi panggilan balik - setelah beberapa pemrosesan selesai, itu dipanggil. Dalam hal ini, pemrosesan ini terjadi di server.
Contoh
Metode AJAX yang nyaman juga merupakan alasan mengapa banyak orang mengandalkan jQuery, tetapi pada kenyataannya, API AJAX dari JavaScript asli juga sangat kuat, dan penggunaan dasarnya tidak jauh berbeda di setiap browser. Karena itu, Anda dapat sepenuhnya merangkum objek AJAX sendiri. Berikut ini adalah objek AJAX yang dienkapsulasi:
// AJAX METODE // LAZY LOAD Buat Fungsi Objek XHR CreatexHR () {if ('xmlHttprequest' di jendela) {createxHr = function () {return new XmlHttpRequest (); }; } else if ('ActivexObject' di window) {createxHr = function () {return new ActiveXoBject ("msxml2.xmlHttp"); }; } else {createxhr = function () {throw new error ("Ajax tidak didukung oleh browser ini"); }; } return createxhr (); } // AJAX mengeksekusi permintaan fungsi (ajaxdata) {var xhr = createxhr (); AJAXData.Before && Ajaxdata.before (); // Tangani permintaan asinkron melalui peristiwa xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'json') {// Dapatkan objek JSON yang dikembalikan oleh server = JSONTREX; json1 = eval ('(' + jsonstr + ')'), json2 = (fungsi baru ('return' + jsonstr)) (); Ajaxdata.callback (JSON2); // ajaxdata.callback (json.parse (xhr.Responsetext)); // Metode asli, tidak didukung dalam IE6/7} else jaxdata.callback (xhr.Responsetext); } else {ajaxdata.error && ajaxdata.error (xhr.Responsetext); }}}; // atur parameter permintaan xhr.open (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setRequestheader ('if-modified-since', '0'); if (ajaxdata.data) {xhr.setRequestheader ('tipe konten', 'Aplikasi/X-WWW-Form-Urlencoded'); xhr.send (ajaxdata.data); } kalau tidak {? ? xhr.setRequestheader ('X-requested-with', 'xmlHttpRequest'); xhr.send (null); } return xhr;} function post (ajaxdata) {ajaxdata.type = 'post'; var _Result = request (Ajaxdata); return _Result;} function get (ajaxdata) {ajaxdata.type = 'get'; Ajaxdata.data = null; var _Result = request (Ajaxdata); return _Result;}Berikut adalah contoh penggunaan:
index.html
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> Implementasi JavaScript asli Ajax </title> <tautan rel = "stylesheet" type = "text/css" media = "href =". Font-family: 'Lucida Grande', 'Microsoft Yahei'} #content .btn_ctr {display: block; Lebar: 120px; Tinggi: 30px; Margin: 0 Auto 20px; Latar Belakang: #53A7BB; Warna: #fff; font-weight: tebal; Ukuran font: 14px; Line-Height: 30px; Dekorasi Teks: Tidak Ada; Border-Radius: 4px; } #test {width: 280px; Tinggi: 130px; margin: 0 otomatis; padding: 15px; Latar belakang: #FFF; Border-Radius: 4px; Teks-Align: Kiri; } </tyle> </head> <body> <v id = "header"> <div id = "header-content"> <div id = "header-inside"> <p> <a href = "http://kayosite.com/css3-animation.html" target = "_ blank"> back to backs3 href = "http://kayosite.com" target = "_ blank"> blog saya </a> </p> <p> demo oleh Kayo © Hak Cipta 2011-2013 </p> </div> <h1> CSS3 animasi </h1> </div> </div> <Div ID = "Content"> </h1> </Div> </Div> <Div ID = "Content"> </H1> </Div> </Div> <Div ID = "Content"> </H1> "" "" " OnClick = "get ({url: './ajax.html', callback: function (out) {document.geteLementById ('test'). innerHtml = out;}})"> ajax dapatkan konten </a> <Div id = "test"> </div> </div> </script> // ajax, tidak mengulangi, nox = "nox"> </div> </div> </div> </sript> // list = "no list"> di sini </script> </body> </html> Ajax.html<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <itement> Ajax </title> </head> <p> <p> Berhasil mendapatkan teks ini </p> </body> </headml>
Untuk efek tertentu, Anda dapat menelusuri demo penuh.