この記事では、Ajax とサーブレット間の対話を例の形式で分析します。コードには、誰もが読んで理解できるように、より詳細なコメントが含まれています。具体的な実装方法は以下の通りです。
1.JavaScript部分
var req; /*XMLHTTP の非同期送信を通じてパラメータを ajaxServlet に送信し、修飾された XML ドキュメントを返します*/ var url; function getResult() { var key=fselectedIndex]; ; // select のテキストへの参照を取得 if (window.XMLHttpRequest) { req = new XMLHttpRequest(); url = "ajaxServlet?action="+key+"&bm=UTF-8"; }else if (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"); // ここでヘッダーが設定されていない場合、filfox はデータを誤って送信し、サーブレットが受け取るパラメーターは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 ("belong"); // 以下は、var xmlDoc = req.responseXML の解析によって返される XML ドキュメントです。 Node=xmlDoc.getElementsByTagName("type_name"); //var str=new Array(); //select 内のすべてのコンテンツを削除します。 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; } 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 への参照を取得するには、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 レスポンス) throws ServletException、IOException { response.setContentType("text/xml; charset=UTF-8"); //次の 2 つの文はローカル キャッシュをキャンセルするための文です。 response.setHeader("Cache-Control", "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("select items from class where 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());//ここで、スクリプト内のインターセプト メソッド out.close() へのストリーム出力に注意してください。 ; con.close(); } catch(例外例) { } }}