js_ajax简单例子_基于xml的实现

阳光穿透心脏的1/2处 2022-05-19 09:53 209阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload=init;
    function init(){
    	var deps=document.getElementById("dep");
        deps.onchange=getdata;
    }
    function getdata(){
    	var value=this.value;
    	var xtr;
    	if (window.XMLHttpRequest) 
    	  {// code for IE7+, Firefox, Chrome, Opera, Safari 
    		xtr=new XMLHttpRequest(); 
    	  } 
    	else 
    	  {// code for IE6, IE5 
    		xtr=new ActiveXObject("Microsoft.XMLHTTP"); 
    	  }
        xtr.open("post","ajax.do",true);
    	xtr.onreadystatechange=function(){
    		if(xtr.readyState==4&&xtr.status==200){
    			var xmlDoc=xtr.responseXML;
    			var ps=xmlDoc.getElementsByTagName("person");
    			var str="";
    			for(var i=0;i<ps.length;i++){
    				str+=ps[i].getElementsByTagName("id")[0].innerHTML+"----"
    				+ps[i].getElementsByTagName("name")[0].innerHTML+"----"
    				+ps[i].getElementsByTagName("salary")[0].innerHTML+"----"
    				+ps[i].getElementsByTagName("sex")[0].innerHTML+"<br>";
    			}
    			document.getElementById("display").innerHTML=str;
    		}
    	}
    	xtr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    	xtr.send("dep="+value);
    	
    	
    }
    </script>
    </head>
    <body>
    <select id="dep">
    <option value="1">技术部1</option>
    <option value="2">技术部2</option>
    <option value="3">技术部3</option>
    </select>
    <div id="display"></div>
    </body>
    </html>

@WebServlet("/ajax.do")
    public class HelloAjax extends HttpServlet {
    	private static final long serialVersionUID = 1L;
        private static Map<Integer, List<Person>> personMap=null;
        /**
         * @see HttpServlet#HttpServlet()
         */
        public HelloAjax() {
            super();
            // TODO Auto-generated constructor stub
            personMap=new HashMap<>();
            List<Person> ps=new ArrayList<>();
            ps.add(new Person(1, "1xm1", "男", 150.8));
            ps.add(new Person(2, "1xm2", "男", 150.9));
            ps.add(new Person(3, "1xm3", "男", 160.8));
            ps.add(new Person(4, "1xm4", "男", 170.8));
            personMap.put(1, ps);
            
            ps=new ArrayList<>();
            ps.add(new Person(1, "2xm1", "男", 250.8));
            ps.add(new Person(2, "2xm2", "男", 250.9));
            ps.add(new Person(3, "2xm3", "男", 260.8));
            ps.add(new Person(4, "2xm4", "男",270.8));
            personMap.put(2, ps);
            
            ps=new ArrayList<>();
            ps.add(new Person(1, "3xm1", "男", 350.8));
            ps.add(new Person(2, "3xm2", "男", 350.9));
            ps.add(new Person(3, "3xm3", "男", 360.8));
            ps.add(new Person(4, "3xm4", "男", 370.8));
            personMap.put(3, ps);
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		doPost(request, response);
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		response.setContentType("text/xml;charset=utf-8");
    		int depid=Integer.parseInt(request.getParameter("dep"));
    		List<Person> ps=personMap.get(depid);
    		StringBuffer xml=new StringBuffer();
    		xml.append("<persons>");
    		for(Person p:ps) {
    			xml.append("<person>");
    			xml.append("<id>").append(p.getId()).append("</id>");
    			xml.append("<name>").append(p.getName()).append("</name>");
    			xml.append("<sex>").append(p.getSex()).append("</sex>");
    			xml.append("<salary>").append(p.getSalary()).append("</salary>");
    			xml.append("</person>");
    		}
    		xml.append("</persons>");
    	    response.getWriter().write(xml.toString());
    	}
    
    }

注意:(1).post请求，需要添加协议头

(2).response写xml，需要先设置“text/xml;charset=utf-8”;

(3).写xml，需要用StringBuffer,然后用append添加节点，最后需要toString转换为String

(4).html获取xml，需要用responseXML,XML与HTML一样，获取节点可以使用getElementsByTagName