1. Pengantar Ajax
Ajax dianggap sebagai singkatan dari JavaScript dan XML asinkron), dan teknologi yang memungkinkan browser untuk berkomunikasi dengan server tanpa menyegarkan halaman saat ini disebut AJAX.
Misalnya: Pencarian Baidu, peta waktu-nyata, dll. Dalam model AJAX, data ditransmisikan secara independen antara klien dan server. Server dapat memperbarui data tanpa menyegarkan seluruh halaman;
2. Diagram Prinsip Kerja Ajax
3. Metode pengiriman dan penerima AJAX yang sesuai
1. Metode yang sesuai untuk mengirimkan permintaan
1) Fungsi Penanganan Acara OnReadyStateChange: Fungsi ini dipicu oleh server daripada pengguna. Setiap kali properti ReadyState berubah, acara OnReadyStateChange akan dipicu.
2) Open (Metode, URL, Asynchronized): Open () dari objek XMLHTTPREQUEST memungkinkan program untuk mengirim permintaan dengan server panggilan AJAX. Jenis permintaan metode dapat "dapatkan" atau "posting", dan URL adalah string path. Sysnchronized menunjukkan apakah permintaan akan ditransmisikan secara tidak sinkron.
3) Kirim (data): Data adalah string yang juga akan diteruskan ke server. Jika permintaan "Dapatkan" dipilih, data adalah nol.
2. Menerima metode yang sesuai
1) ReadyState: mewakili keadaan AJAX saat ini, diwakili oleh nilai numerik, 0 mewakili inisialisasi, 1 mewakili pemuatan, 2 mewakili pemuatan, 3 mewakili server mengirim respons, 4 mewakili respons telah dikirim, dan ketika permintaan selesai, setiap browser akan menetapkan nilai ReadyState ke 4;
2) Status: Seperti di Javaweb, 404 tidak menemukan halaman, 403 melarang akses, 500 kesalahan server internal, 200 semuanya normal, 304 belum dimodifikasi, dalam objek XMLHTTPREQUEST, kode status yang dikirim oleh server disimpan dalam atribut status. Melalui nilai ini, kami dapat memastikan bahwa server telah mengirimkan respons yang berhasil;
3) ResponsEtext: Berisi data yang dikirim dari server, yang umumnya HTML, XML atau teks biasa. Ketika nilai ReadyState adalah 4 dan status adalah 200, atribut responseText hanya dapat digunakan. Di permukaan, permintaan AJAX telah berakhir. Jika server mengembalikan XML, data akan disimpan dalam ResponseXML.
4. Demonstrasi Kode (Imitasi Kotak Pencarian Baidu)
1. Buat Proyek Javaweb (Struktur Direktori Proyek adalah sebagai berikut)
2. SearchSerVlet.java
paket cn.jon.ajax; impor java.io.ioException; impor java.util.list; impor javax.servlet.servletException; impor javax.servlet.http.httpservlet; impor javax.servlet.http.httpservletRequest; impor javax.servlet.http.httpservletResponse; impor net.sf.json.jsonarray; impor cn.jon.ajax.data.datautils; PUBLIK PUBLIK PENCARIAN PENGETAHUAN HTTPSERVLET {private static final long serialVersionuid = 1l; public void doGet (permintaan httpservletRequest, respons httpservletResponse) melempar servletException, ioException {// atur format output dari permintaan dan respons terhadap permintaan UTF-8.setcharacterencoding ("UTF-8"); response.setcharacterencoding ("UTF-8"); String Keyword = Request.GetParameter ("Kata Kunci"); if (kata kunci! = null) {datautils datareSource = datautils baru (); Daftar <String> Daftar = DataReSource.FindDataList (kata kunci); //System.out.println (jsonarray.fromObject (daftar) .toString ()); response.getWriter (). write (jsonarray.fromObject (daftar) .toString ()); }} public void dopost (permintaan httpservletRequest, respons httpservletResponse) melempar servletException, ioException {doGet (permintaan, respons); }} 3. Datautils.java, baca data di bawah file sumber daya
paket cn.jon.ajax.data; impor java.io.bufferedReader; impor java.io.ioException; impor java.io.inputstream; impor java.io.inputStreamReader; impor java.util.arraylist; impor java.util.list; DataUtils kelas publik {Private Static List <String> datalist = ArrayList baru <string> (); public static final string url = "/test.txt"; static {readResource (url); // datalist.add ("aa"); // datalist.add ("Ajax"); // datalist.add ("afinal"); // datalist.add ("bb"); } // public static void readResource (string url) {inputStream adalah = null; InputStreamReader ISR = NULL; BufferedReader BR = null; Garis string = null; coba {is = datautils.class.getClassLoader (). getResourCeAsstream (url); ISR = inputStreamReader baru (IS); BR = New BufferedReader (ISR); line = br.readline (); while (null! = line) {if (! line.isempty ()) {datalist.add (line); } line = br.readline (); } // while} catch (ioException e) {e.printstacktrace (); } akhirnya {if (null! = br) {coba {br.close (); } catch (ioException e) {}} if (null! = isr) {coba {isr.close (); } catch (ioException e) {}} if (null! = is) {try {isClose (); } catch (ioException e) {}}}} Daftar publik <string> findDataList (string str) {list <string> data = new ArrayList <String> (); untuk (string sdata: datalist) {if (sdata.contains (str)) {data.add (sdata); }} // Untuk data pengembalian; }} 4. Index.jsp, tampilan halaman
<%@ page language = "java" import = "java.util.*" pageEncoding = "UTF-8"%> <html> <head> <link rel = "stylesheet" href = "css/my.css"> <crips = "Teks/JavaScript" src = "js/my." <img src = "img/baidu.png"> <!-box input-> <input type = "text" size = "50" id = "kata kunci" onkeyup = "getMorecontents ()" onclur = "playwordblur ()" kancing = "getMoRecontents ()" onclur = "ikuti" "kancing" "kancing =" getMorecontents () "" Area tampilan konten-> <div id = "popdiv"> <table id = "konten-table" bgcolor = "#fffafa" cellpacing = "0" cellpadding = "0"> <tbody id = "content_table_body"> <!-Data yang ditanyai secara dinamis </Divy </Divy </Divy </Divy </Divy </Divy </Divy </Divy </Divy </Dived </Divy </Divy </Divy </Divy </Divy </Divy </Divy </To/Body </Divy ditampilkan di sini-> </tbody> </tody> Divy secara dinamis </to/fotif </tweried ditampilkan di sini-> </tbody>
5. my.js, bagian inti dari Ajax
var xmlhttp; // 1. Fungsi fungsi untuk mendapatkan informasi terkait dari fungsi konten input pengguna getMorecontents () {// Pertama dapatkan input pengguna var content = document.geteLementById ("kata kunci"); if (content.Value == "") {// Saat kotak input kosong, hapus data sebelumnya clearContent (); kembali; } //alert(content.Value); // 2. Maka Anda ingin mengirim konten input pengguna ke server, karena kami menggunakan AJAX untuk mengirim data secara tidak sinkron, jadi kami perlu menggunakan objek XMLHTTP // xmlhttp = dapatkan objek XMLHTTP; xmlhttp = createxmlhttp (); // peringatan (xmlhttp); // 3. Untuk mengirim data ke server, pertama -tama tentukan alamat server, var url = "cari? Kata kunci ="+Escape (content.value); // Benar berarti bahwa skrip JavaScript akan terus dieksekusi setelah metode Send (), tanpa menunggu respons dari server. xmlhttp.open ("get", url, true); // xmlhttp mengikat metode panggilan balik. Metode panggilan balik ini akan dipanggil ketika keadaan XMLHTTP berubah // status xmlhttp: 0-4, kami hanya peduli sekitar 4 (lengkap), jadi hanya bermakna untuk memanggil fungsi callback setelah selesai. xmlhttp.onreadystatechange = callback; // Parameter sudah ada di URL, jadi Anda tidak perlu menambahkan parameter xmlhttp.send (null); } // Dapatkan fungsi objek xmlhttp createxmlHttp () {// var xmlhttp yang cocok untuk sebagian besar browser; if (window.xmlHttpRequest) {xmlhttp = new xmlHttpRequest (); } // Pertimbangkan kompatibilitas browser if (window.activexObject) {xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); // Jika browser memiliki objek ActiveXObject, tetapi tidak memiliki parameter microsoft.xmlhttp if (! Xmlhttp) {xmlhttp = ActivexObject baru ("msxml2.xmlhttp"); }} return xmlhttp; } // Fungsi fungsi panggilan balik callback () {// 4 berarti penyelesaian jika (xmlhttp.readystate == 4) {// 200 berarti respons server yang berhasil, 404 berarti tidak ditemukan, 500 berarti kesalahan internal server IF (Xmlhttp.status == 200) {// FORMASI TEKS yang berhasil, dan data yang sesuai diperoleh yang diperoleh yang diperoleh yang diperoleh. var result = xmlhttp.Responsetext; // analisis data yang diperoleh var json = eval ("("+hasil+")"); // Setelah mendapatkan data ini, Anda dapat menampilkan data secara dinamis. Tampilkan data ini di bawah kotak input. // peringatan (json); setContent (JSON); }}} // Setel tampilan data terkait. Parameter mewakili fungsi Data Data yang terkait (konten) {// Hapus data sebelumnya clearContent (); // Atur posisi setLocaltion (); // Pertama dapatkan panjang data yang terkait untuk menentukan berapa banyak <tr> </tr> var size = Contents.length; // Atur konten untuk (var i = 0; i <size; i ++) {var nextNode = konten [i]; // mewakili elemen i-th dari data json var tr = document.createElement ("tr"); var td = document.createElement ("td"); td.setAttribute ("borde", "0"); td.setAttribute ("gbcolor", "#fffafa"); // ikat dua gaya untuk td (peristiwa ketika mouse masuk dan bergerak keluar) td.onmouseover = function () {this.classname = 'mouseOver'; }; td.onmouseout = function () {this.className = 'mouseout'; }; td.onClick = function () {// Metode ini mengimplementasikan bahwa ketika data terkait diklik dengan mouse, data terkait secara otomatis diisi ke dalam kotak input. }; td.onmousedown = function () {// Ketika mouse mengklik pada data yang terkait, data akan secara otomatis ditambahkan ke dokumen kotak input.getElementById ("kata kunci"). value = this.innerText; }; // Ketika mouse ditangguhkan pada data yang terkait, itu akan ditambahkan secara otomatis ke kotak input/* td.onmouseover = function () {this.classname = 'mouseOver'; if (td.innerText! = null) document.geteLementById ("kata kunci"). value = this.innerText; } */// Buat node teks var text = document.createTextNode (nextNode); TD.AppendChild (teks); Tr.AppendChild (TD); document.geteLementById ("content_table_body"). AppendChild (tr); }} // Hapus fungsi data sebelumnya clearContent () {var contentTableBody = document.getElementById ("content_table_body"); var size = contentTableBody.childnodes.length; // Saat menghapus, hapus dari bawah ke atas untuk (var i = size-1; i> = 0; i-) {// Tentukan penghapusan Node ContentTableBody Node I-th Node.removechild (contentTableBody.childnodes [i]); } // Hapus batas luar data terkait var popdiv = document.geteLementById ("PopDiv"). Style.border = "none"; } // Ketika kotak input kehilangan fokus, hapus fungsi data sebelumnya kata kunci () {clearcontent (); } // Atur posisi menampilkan Fungsi Informasi terkait setLocaltion () {// Posisi tampilan informasi terkait harus konsisten dengan kotak input var content = document.getElementById ("kata kunci"); var width = content.offsetWidth; // panjang kotak input var kiri = konten ["offsetleft"]; // jarak ke batas kiri var top = konten ["offsettop"]+content.offsetheight; // jarak ke atas (ditambah ketinggian kotak input itu sendiri) // Dapatkan div dari data tampilan. popdiv.style.border = "Grey 1px solid"; popdiv.style.left = kiri+"px"; popdiv.style.top = top+"px"; popdiv.style.width = lebar+"px"; popdiv.style.top = top+"px"; popdiv.style.width = lebar+"px"; document.geteLementById ("tabel konten"). style.width = width+"px"; } 6. my.css, gaya kontrol
#mydiv {position: absolute; Kiri: 50%; Atas: 50%; margin -kiri: -200px; margin -top: -120px; } #button {latar belakang-warna: #5566ee; } .mouseover {latar belakang: #708090; Warna: #FFFAFA; } .mouseout {background: #fffafa; Warna: #000000; }Catatan: Kode ini berasal dari studi MOOC.com dan telah melakukan perbaikan sendiri. Saya berharap mereka yang tertarik dapat berkomunikasi dan belajar bersama.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.