ajax、jsp、xml组合的一个小例子

ajax、jsp、xml结合的一个小例子

1.首先一个简单的jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<title>ajax例子</title>
		<script type="text/javascript" src="js/check.js"></script>
	</head>
	<body>
		<a href="#" onclick="getStu()">所有学生信息</a>
		<div id="stuInfo"></div>
	</body>
</html>

2.点击所有学生信息页面时，会调用check.js代码

var xmlHttpRequest;//定义为全局变量
function getStu() {
	xmlHttpRequest = new XMLHttpRequest();
	xmlHttpRequest.open("post", "servlet/InfoServlet", true);
	xmlHttpRequest.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded");
	xmlHttpRequest.send("name=" + "123");
	xmlHttpRequest.onreadystatechange = call;
}
function call() {
	var stuInfo = document.getElementById("stuInfo");
	if (xmlHttpRequest.readyState == 4) {
		if (xmlHttpRequest.status == 200) {
			var stuDom = xmlHttpRequest.responseXML;
			var stuList = stuDom.getElementsByTagName("student");

			var tableNode = document.createElement("table");// 创建table
			tableNode.setAttribute("border", "1");
			for ( var i = 0; i < stuList.length; i++) {
				var student = stuList[i];
				var tr = tableNode.insertRow(i);
				for ( var j = 0; j < 3; j++) {
					var td = tr.insertCell(j);
					var str = student.childNodes[j];
					var text = document.createTextNode(str.firstChild.nodeValue);
					td.appendChild(text);
				}
			}
			stuInfo.appendChild(tableNode);
		}
	}
}

3.这时会XMLHttpRequest对象会与servlet对象进行交互

package servlet;

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 xmlUtil.GetXmlBuffer;

public class InfoServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/xml;charset=utf-8");
		PrintWriter out = response.getWriter();
		String buffer = GetXmlBuffer.getXmlBuffer();
		out.println(buffer);
	}

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

}

4.servlet会调用GetXmlBuffer对象

package xmlUtil;

import java.util.List;

import sql.QueryStu;

import bean.Student;

public class GetXmlBuffer {
	public static String getXmlBuffer(){
		List<Student>list = new QueryStu().getStu();
		StringBuffer buffer = new StringBuffer("<students>");
		for(int i=0;i<list.size();i++){
			Student stu = list.get(i);
			buffer.append("<student>");
			buffer.append("<id>"+stu.getId()+"</id>");
			buffer.append("<name>"+stu.getName()+"</name>");
			buffer.append("<sex>"+stu.getSex()+"</sex>");
			buffer.append("</student>");
		}
		buffer.append("</students>");
		String str = new String(buffer);
		return str;
	}
}

5.这里先把Student JavaBean文件加上

package bean;

public class Student {
	private int id;
	private String name;
	private String sex;
	.......//get,set方法
}

6.与数据交互

package sql;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class JdbcUtils {
	private static Connection con = null;
	private static String url = "jdbc:mysql://localhost:3306/test";
	private static String user = "root";
	private static String password = "1990";

	static {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			con = DriverManager.getConnection(url, user, password);
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	public static Connection getConnection() {
		return con;
	}
}

package sql;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import bean.Student;

public class QueryStu {
	private static Connection conn = null;

	static {
		conn = JdbcUtils.getConnection();
	}
	
	public List<Student> getStu(){
		List<Student> list = new ArrayList<Student>();
		PreparedStatement ps = null;
		
		String sql = "select * from student where id<11";
		try {
			ps = conn.prepareStatement(sql);
			ResultSet rs = ps.executeQuery();
			while(rs.next()){
				Student stu = new Student();
				stu.setId(rs.getInt(1));
				stu.setName(rs.getString(2));
				stu.setSex(rs.getString(3));
				list.add(stu);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return list;
	}
}

7.最后全局把握一下：

这个例子，xml处理时，没有使用dom4j,只是简单的用了字符串拼接的方法，然后在javascript中利用element把xml数据取出来，然后动态的添加到页面表格中

ajax、jsp、xml组合的一个小例子

相关推荐