实例解读Ajax与servlet交互的方法

本文以实例形式剖析了Ajax与servlet的交互，并且代码中有较为详细的注释，以帮助大家阅读理解。具体的实现方法如下：

1.JavaScript部分

1. var req; 
2.  /*通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档*/ 
3.  var url; 
4.  function getResult() 
5.  {  
6.   var f=document.getElementById("form_pub"); 
7.   var key=f.s.options[f.s.selectedIndex].text; //获取对select中文本的引用 
8.  if (window.XMLHttpRequest) 
9.  { 
10.   req = new XMLHttpRequest(); 
11.   url = "ajaxServlet?action="+key+"&bm=UTF-8"; 
12.  }else if (window.ActiveXObject) 
13.  { 
14.    
15.   req = new ActiveXObject("Microsoft.XMLHTTP"); 
16.   url = "ajaxServlet?action="+key+"&bm=gbk"; 
17.  } 
18.  if(req) 
19.  {  
20.   req.open("GET",url, true);  
21.   req.setRequestHeader("Content-Type", "text/html;charset=UTF-8"); 
22.   //这里如果不设定头部则会导致 firfox 发送数据错误，servlet接受到的参数为乱码，在IE中正常 
23.   req.onreadystatechange = complete;  
24.   req.send(null); 
25.   //req.setRequestHeader("Content-Type", "text/xml; charset=UTF-8");  
26.  } 
27.  } 
28.  /*分析返回的XML文档*/ 
29.  function complete(){ 
30.  if (req.readyState == 4) 
31.  { 
32.   if (req.status == 200) 
33.   { 
34.    var items=document.getElementById("belong"); 
35.   //以下为解析返回的XML文档   
36.    var xmlDoc = req.responseXML; 
37.    var Node=xmlDoc.getElementsByTagName("type_name"); 
38.    //var str=new Array(); 
39.     var str=null; 
40.     //清空工作 
41.     items.innerHTML=""; //删除一个 select内的全部内容 
42.  for(var i=0;i<Node.length;i++) 
43.     {  
44.      str=Node[i]; 
45.      //alert(str.childNodes[0].nodeValue); 
46.      var objectOption=document.createElement("option"); 
47.       items.options.add(objectOption); 
48.      //firfox不支持innerText必须用textContent代替 
49.       if (window.ActiveXObject) 
50.       {objectOption.innerText=str.childNodes[0].nodeValue;} 
51.       else 
52.       {objectOption.textContent=str.childNodes[0].nodeValue;} 
53.     } 
54.    } 
55.   } 
56.  } 

2.servlet端：

1. package ajax; 
2.   
3. import java.io.IOException; 
4. import java.io.PrintWriter; 
5. import javax.servlet.ServletException; 
6. import javax.servlet.http.HttpServlet; 
7. import javax.servlet.http.HttpServletRequest; 
8. import javax.servlet.http.HttpServletResponse; 
9. import Data_GetConn.GetConn;//这个包是自己写的为获取对mysql的引用 
10. import java.sql.*;//这个包必须有！！ 
11.   
12.   
13. public class ajaxServlet extends HttpServlet{ 
14.  //private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";//这里最好统一用UTF-8进行编码 
15.  public void init() throws ServletException{} 
16.  public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException 
17.  { 
18.  response.setContentType("text/xml; charset=UTF-8"); 
19.  //以下两句为取消在本地的缓存 
20.  response.setHeader("Cache-Control", "no-cache"); 
21.   response.setHeader("Pragma", "no-cache"); 
22.  PrintWriter out = response.getWriter(); 
23.  String action = request.getParameter("action"); 
24.  String bm = request.getParameter("bm"); 
25.    
26.  if(("gbk").equals(bm)) 
27.  { 
28.   action=new String(action.getBytes("ISO-8859-1"),"gbk");//将获得的数据用gbk从新编码！（感谢董卫老师） 
29.  } 
30.  else 
31.  { 
32.    action=new String(action.getBytes("ISO-8859-1"),"gbk"); 
33.  } 
34.  try 
35.   { 
36.    GetConn wq=new GetConn(); 
37.    Connection   con=wq.getCon(); 
38.    Statement stmt=con.createStatement(); 
39.    ResultSet rs=stmt.executeQuery("select items from class where main='"+action+"'"); 
40.    StringBuffer sb = new StringBuffer(); 
41.     sb.append("<type>"); 
42.    while(rs.next()) 
43.    { 
44.         
45.    sb.append("<type_name>"+rs.getString(1)+"</type_name>"); 
46.        
47.    } 
48.     //sb.append("<type_name>"+action+"</type_name>"); 
49.     sb.append("</type>");  
50.     out.write(sb.toString());//注意这里向jsp输出的流，在script中的截获方法 
51.     out.close(); 
52.     stmt.close(); 
53.     con.close(); 
54.   } 
55.   catch(Exception ex) 
56.   { 
57.        
58.   } 
59.    
60.  } 
61. }