บทความนี้วิเคราะห์ปฏิสัมพันธ์ระหว่าง Ajax และเซิร์ฟเล็ตในรูปแบบของตัวอย่าง และมีความคิดเห็นโดยละเอียดเพิ่มเติมในโค้ดเพื่อช่วยให้ทุกคนอ่านและทำความเข้าใจ วิธีการดำเนินการเฉพาะมีดังนี้:
1. ส่วนจาวาสคริปต์
var req; /*ส่งพารามิเตอร์ไปที่ ajaxServlet ผ่านการส่งข้อมูลแบบอะซิงโครนัสของ XMLHTTP และส่งคืนเอกสาร XML ที่ผ่านการรับรอง*/ var url; function getResult() { var f=document.getElementById("form_pub"); ; // รับการอ้างอิงถึงข้อความใน select if (window.XMLHttpRequest) { req = new XMLHttpRequest(); url = "ajaxServlet?action="+key+"&bm=UTF-8"; } อื่น ๆ ถ้า (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); "+key+"&bm=gbk"; } if(req) { req.open("GET",url, true); req.setRequestHeader("Content-Type", "text/html;charset=UTF-8"); //หากไม่ได้ตั้งค่าส่วนหัวที่นี่ จะทำให้ firfox ส่งข้อมูลไม่ถูกต้อง และพารามิเตอร์ที่ได้รับจากเซิร์ฟเล็ตจะ อ่านไม่ออก ใน IE Medium req.onreadystatechange = complete; req.send(null); //req.setRequestHeader("Content-Type", "text/xml; charset=UTF-8"); } } /*วิเคราะห์เอกสาร XML ที่ส่งคืน*/ function complete(){ if (req.readyState == 4) { if (req.status == 200) { var items=document.getElementById ("เป็นของ"); // ต่อไปนี้เป็นเอกสาร XML ที่ส่งคืนโดยการแยกวิเคราะห์ var xmlDoc = req.responseXML; Node=xmlDoc.getElementsByTagName("type_name"); //var str=new Array(); var str=null; //ล้างรายการการทำงาน.innerHTML=""; //ลบเนื้อหาทั้งหมดในการเลือก (var i = 0;i<Node.length;i++) { str=Node[i]; //alert(str.childNodes[0].nodeValue); objectOption=document.createElement("option"); items.options.add(objectOption); //firfox ไม่รองรับ innerText และต้องแทนที่ด้วย textContent if (window.ActiveXObject) {objectOption.innerText=str.childNodes[0] .nodeValue; } อื่น ๆ {objectOption.textContent=str.childNodes[0].nodeValue;} } } } }2.ด้านเซิร์ฟเล็ต:
แพ็คเกจ ajax; นำเข้า java.io.IOException; นำเข้า java.io.PrintWriter; นำเข้า javax.servlet.ServletException; นำเข้า javax.servlet.http.HttpServlet; นำเข้า javax.servlet.http.HttpServletRequest; นำเข้า javax.servlet.http.HttpServletResponse ;นำเข้า Data_GetConn.GetConn;//แพ็คเกจนี้เขียนขึ้นเอง หากต้องการรับการอ้างอิงถึง mysql ให้นำเข้า java.sql.*;//แพ็คเกจนี้ต้องมี! - ajaxServlet คลาสสาธารณะขยาย HttpServlet{ //private static สุดท้าย String CONTENT_TYPE = "text/xml; charset=UTF-8";// วิธีที่ดีที่สุดคือใช้ UTF-8 สำหรับการเข้ารหัสที่นี่ public void init() พ่น ServletException{} public void doGet (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse) พ่น ServletException, IOException { response.setContentType("text/xml; charset=UTF-8"); // สองประโยคต่อไปนี้คือการยกเลิกแคชในเครื่อง response.setHeader ("Cache-Control", "no-cache"); " Pragma", "no-cache"); PrintWriter out = response.getWriter(); การกระทำของสตริง = request.getParameter("การกระทำ"); request.getParameter("bm"); if(("gbk").equals(bm)) { action=new String(action.getBytes("ISO-8859-1"),"gbk");//จะได้รับ ข้อมูลถูกเข้ารหัสอีกครั้งด้วย gbk! (ขอบคุณอาจารย์ Dong Wei) } else { action=new String(action.getBytes("ISO-8859-1"),"gbk"); } ลอง { GetConn wq=new GetConn(); Connection con=wq.getCon ( ); คำสั่ง stmt=con.createStatement(); ResultSet rs=stmt.executeQuery("เลือกรายการจากคลาสที่ main='"+action+"'"); StringBuffer sb = new StringBuffer(); sb.append("<type>"); while(rs.next()) { sb.append("<type_name>"+rs .getString(1)+"</type_name>"); //sb.append("<type_name>"+action+"</type_name>"); sb.append("</type>"); out.write(sb.toString());//สังเกตเอาต์พุตสตรีมไปยัง jsp ที่นี่ ซึ่งเป็นวิธีการสกัดกั้น out.close() ในสคริปต์ ; con.close(); } catch(ยกเว้น) { } }}