服务器之家

服务器之家 > 正文

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

时间:2019-11-25 14:21     来源/作者:shichen2014

本文以实例形式剖析了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.  } 
标签:

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
配置IIS网站web服务器的安全策略配置解决方案
配置IIS网站web服务器的安全策略配置解决方案 2019-05-23
Nginx服务器究竟是怎么执行PHP项目
Nginx服务器究竟是怎么执行PHP项目 2019-05-24
运维必须知道的关于云服务器的十个问题
运维必须知道的关于云服务器的十个问题 2019-05-24
返回顶部