用ajax来读xml(servlet生成的)用到JQuery技术

准备:
下载Jquery.js文件、dom4j.jar包
新建一个html页面:
导入JQuery文件:
 <script type="text/javascript" src="jquery-1.7.1.js"></script>

在body里写入:
 <select id="name">
  		<option value="zhangsan">zhangsan</option>
  		<option value="lisi">lisi</option>
  	</select>
	<input type="button" id="button1" value="点击看一看">

在head里用JQuery来写ajax代码(比用Javascript写简单些)
<script type="text/javascript">
		$(function()
		{
			$("#button1").click(function()
			{
				$.post("../xmlservlet",{name:$("#name").val()},function(returnedData,status)
				{
					var id=$(returnedData).find("id").text();
					var name=$(returnedData).find("name").text();
					var age=$(returnedData).find("age").text();
					var address=$(returnedData).find("address").text();
					var html="<table width='60%' border='1' align='center'>"
					+"<tr><th>id</th><th>name</th><th>age</th><th>address</th></tr>"
					+"<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr>"
					+"</table>";
					
					$("body table:eq(0)").remove();
					$("body").append(html);
				})
			});
		});
	</script>

现在界面搞定了开始servlet层:
新建个Javabean名字叫Student:
package com.niit.model;

public class Student
{
	private int id;
	private String name;
	private int age;
	private String address;
	public int getId()
	{
		return id;
	}
	public void setId(int id)
	{
		this.id = id;
	}
	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}
	public int getAge()
	{
		return age;
	}
	public void setAge(int age)
	{
		this.age = age;
	}
	public String getAddress()
	{
		return address;
	}
	public void setAddress(String address)
	{
		this.address = address;
	}
}

在新建个servlet来处理
package com.niit.test;

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;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter;

import com.niit.model.Student;

public class Xmlservlet extends HttpServlet
{

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		String name = request.getParameter("name");
		// TODO 调用service得到Student对象。这里是MOCK
		Student student = new Student();
		if ("zhangsan".equals(name))
		{
			student.setId(1001);
			student.setName(name);
			student.setAge(28);
			student.setAddress("上海");
		}
		else if ("lisi".equals(name))
		{
			student.setId(3321);
			student.setName(name);
			student.setAge(39);
			student.setAddress("南京");
		}
		// 下面构建XML
		// 方法1:直接字符串连接,js可以解析该内容
		// 方法2:可以使用dom4j等API生成XML。dom4j需要下载jar包,是比较常用的xml开源API
		Document document = DocumentHelper.createDocument();// 构建Document对象
		Element rootelement = document.addElement("students");// 创建根元素
		rootelement.addComment("This is a comment!");// 添加注释
		Element studentelement = rootelement.addElement("student");
		Element idelement = studentelement.addElement("id");
		Element namelement = studentelement.addElement("name");
		Element agelement = studentelement.addElement("age");
		Element addresselement = studentelement.addElement("address");

		idelement.setText("" + student.getId());
		namelement.setText(student.getName());
		agelement.setText("" + student.getAge());
		addresselement.setText(student.getAddress());

		response.setContentType("text/xml;charset=utf-8");
		response.setHeader("pragma", "no-cache");
		response.setHeader("cache-control", "no-cache");

		PrintWriter out = response.getWriter();
		OutputFormat format=OutputFormat.createPrettyPrint();//用来设置文本格式的。可读性较好的
		XMLWriter xmlwriter=new XMLWriter(out,format);
		xmlwriter.write(document);
		out.flush();
		out.close();
	}

}

注意一点那个Document对象是org.dom4j包下的。

你可能感兴趣的:(Ajax,xml,dom4j)