이 기사에서는 Ajax와 서블릿 간의 상호 작용을 예제 형식으로 분석하고, 누구나 읽고 이해할 수 있도록 코드에 더 자세한 설명을 추가했습니다. 구체적인 구현 방법은 다음과 같습니다.
1.JavaScript 부분
var req; /*XMLHTTP의 비동기 전송을 통해 ajaxServlet에 매개변수를 보내고 정규화된 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"; }else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP") url = "ajaxServlet?action= "+key+"&bm=gbk"; } if(req) { req.open("GET",url, true); req.setRequestHeader("Content-Type", "text/html;charset=UTF-8"); //여기에 헤더가 설정되어 있지 않으면 firfox가 데이터를 잘못 전송하게 되고 서블릿이 수신한 매개변수는 IE 중간에서는 req.onreadystatechange = req.send(null); //req.setRequestHeader("Content-Type", "text/xml; charset=UTF-8"); } } /*반환된 XML 문서 분석*/ functioncomplete(){ if (req.readyState == 4) { if (req.status == 200) { var items=document.getElementById ("belong"); //다음은 구문 분석을 통해 반환된 XML 문서입니다. var xmlDoc = req.responseXML; Node=xmlDoc.getElementsByTagName("type_name"); //var str=new Array(); var str=null; //선택 항목에서 모든 콘텐츠 삭제 for(var i = 0;i<Node.length;i++) { str=Node[i]; //alert(str.childNodes[0].nodeValue); objectOption=document.createElement("option"); items.options.add(objectOption); //fifox는 innerText를 지원하지 않으며 textContent로 대체되어야 합니다. if (window.ActiveXObject) {objectOption.innerText=str.childNodes[0] .nodeValue; } else {objectOption.textContent=str.childNodes[0].nodeValue;} } } } }2.서블릿 측:
패키지 ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse ;수입 Data_GetConn.GetConn;//이 패키지는 mysql에 대한 참조를 얻으려면 import java.sql.*;//이 패키지에 있어야 합니다! ! public class ajaxServlet extends HttpServlet{ //private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";//여기서 인코딩에는 UTF-8을 사용하는 것이 가장 좋습니다. public void init() throws ServletException{} public void doGet(HttpServletRequest 요청,HttpServletResponse 응답)은 ServletException, IOException을 발생시킵니다. response.setContentType("text/xml; charset=UTF-8"); //다음 두 문장은 로컬 캐시를 취소하는 것입니다. response.setHeader("Cache-Control", "no-cache") response.setHeader( " Pragma", "no-cache"); PrintWriter out = response.getWriter(); String action = request.getParameter("action"); 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") } try { GetConn wq=new GetConn(); ( ); 명령문 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(예외 ex) { } }}