Artikel ini menganalisis interaksi antara Ajax dan servlet dalam bentuk contoh, dan terdapat komentar yang lebih rinci dalam kode untuk membantu semua orang membaca dan memahami. Metode implementasi spesifiknya adalah sebagai berikut:
1.Bagian JavaScript
var req; /*Kirim parameter ke ajaxServlet melalui transmisi XMLHTTP asinkron dan kembalikan dokumen XML yang memenuhi syarat*/ var url; function getResult() { var f=document.getElementById("form_pub"); ; //Dapatkan referensi ke teks yang di pilih if (window.XMLHttpRequest) { req = new XMLHttpRequest(); url = "ajaxServlet?action="+key+"&bm=UTF-8"; }else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); "+kunci+"&bm=gbk"; } if(req) { req.open("GET",url, true); req.setRequestHeader("Content-Type", "text/html;charset=UTF-8"); //Jika header tidak disetel di sini, itu akan menyebabkan firfox salah mengirim data, dan parameter yang diterima oleh servlet akan berubah. menjadi kacau. Di IE Medium normal req.onreadystatechange = complete; req.send(null); charset=UTF-8"); } } /*Analisis dokumen XML yang dikembalikan*/ function complete(){ if (req.readyState == 4) { if (req.status == 200) { var items=document.getElementById ("milik"); //Berikut ini adalah dokumen XML yang dikembalikan dengan parsing var xmlDoc = req.responseXML; Node=xmlDoc.getElementsByTagName("type_name"); //var str=new Array(); var str=null; //Hapus item yang berfungsi.innerHTML=""; 0;i<Node.length;i++) { str=Node[i]; //alert(str.childNodes[0].nodeValue); objectOption=document.createElement("option"); items.options.add(objectOption); //firfox tidak mendukung innerText dan harus diganti dengan textContent if (window.ActiveXObject) {objectOption.innerText=str.childNodes[0] .nodeValue; } lain {objectOption.textContent=str.childNodes[0].nodeValue;} } } } }2. Sisi Servlet:
paket ajax;impor java.io.IOException;impor java.io.PrintWriter;impor javax.servlet.ServletException;impor javax.servlet.http.HttpServlet;impor javax.servlet.http.HttpServletRequest;impor javax.servlet.http.HttpServletResponse ;impor Data_GetConn.GetConn;//Paket ini saya tulis sendiri untuk mendapatkan referensi ke mysql, import java.sql.*;//Paket ini harus memilikinya! ! public class ajaxServlet extends HttpServlet{ //private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";//Yang terbaik adalah menggunakan UTF-8 untuk pengkodean di sini public void init() throws ServletException{} public void doGet (permintaan HttpServletRequest, respons HttpServletResponse) menampilkan ServletException, IOException { respon.setContentType("text/xml; charset=UTF-8"); //Dua kalimat berikut adalah untuk membatalkan cache lokal respon.setHeader("Cache-Control", "no-cache"); " Pragma", "tanpa cache"); PrintWriter keluar = respon.getWriter(); String tindakan = permintaan.getParameter("tindakan"); request.getParameter("bm"); if(("gbk").equals(bm)) { action=new String(action.getBytes("ISO-8859-1"),,"gbk");//akan didapat Data dikodekan ulang dengan gbk! (Terima kasih kepada Guru Dong Wei) } else { action=new String(action.getBytes("ISO-8859-1"),"gbk" } coba { GetConn wq=new GetConn(); ( ); Pernyataan stmt=con.createStatement(); ResultSet rs=stmt.executeQuery("pilih item dari kelas mana main='"+action+"'"); StringBuffer sb = new StringBuffer(); sb.append("<type>"); while(rs.next()) { sb.append("<type_name>"+rs .getString(1)+"</nama_tipe>"); } //sb.append("<nama_tipe>"+aksi+"</nama_tipe>"); sb.append("</type>"); out.write(sb.toString());//Perhatikan keluaran aliran ke jsp di sini, metode intersepsi out.close(); ; con.close(); } catch(Pengecualian misalnya) { } }}