Ajax刷新DIV内容

Ajax刷新DIV内容

实现了网页的异步数据处理,不用刷新整个页面

<标签 onmouseover="method"/ >
method：这个参数是处理onmouseover事件的方法。
<li onmouseover="startRequest('1')">简单</li>
<li onmouseover="startRequest('2')">面向对象</li>
<li onmouseover="startRequest('3')">可移植性</li>
<li onmouseover="startRequest('4')">分布性</li>
<li onmouseover="startRequest('5')">解释器通用性</li>
<li onmouseover="startRequest('6')">健壮</li>
<li onmouseover="startRequest('7')">多线程</li>
<li onmouseover="startRequest('8')">高性能</li>
标签对象.innerHTML=text
text：这个参数是替换标签内容的字符串。
var content=document.getElementById("content");
content.innerHTML=xmlhttp.responseText;
<script type="text/javascript">
void xmlhttp;
function createXmlHttpRequest(){ // 创建XMLHttpRequest请求对象
if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
}
function changeDiv(){ // 处理DIV数据的方法
var content=document.getElementById("content");
content.innerHTML=xmlhttp.responseText;
}
function startRequest(str){ // 发送页面请求
createXmlHttpRequest();
xmlhttp.onreadystatechange=changeDiv;
xmlhttp.open("GET", "DivContentServlet?divStr="+str, true);
xmlhttp.send(null);
}
</script>
<table border="1">
<thead>
<tr>
<th>Java特性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
<ol type="1">
<li onmouseover="startRequest('1')">简单</li>
<li onmouseover="startRequest('2')">面向对象</li>
<li onmouseover="startRequest('3')">可移植性</li>
<li onmouseover="startRequest('4')">分布性</li>
<li onmouseover="startRequest('5')">解释器通用性</li>
<li onmouseover="startRequest('6')">健壮</li>
<li onmouseover="startRequest('7')">多线程</li>
<li onmouseover="startRequest('8')">高性能</li>
</ol>
</td>
<td width="280" height="200" valign="top">
<DIV ID="content"><!-- 这里将插入DIV内容 --></DIV>
</td>
</tr>
</tbody>
</table>
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8"); // 设置应答类型
JDBCDao dao = new JDBCDao(); // 创建数据库操作类
PrintWriter out = response.getWriter(); // 获取应答对象输出流
String divStr = request.getParameter("divStr"); // 获取请求参数
if (divStr == null || divStr.isEmpty()) {
divStr = "1";
}
int id = Integer.parseInt(divStr);
String info = dao.getInfo(id); // 从数据库获取参数对应的说明文字
out.print(info); // 把说明文字输出到浏览器
}
public String getInfo(int id) {
String content=null; // 内容文本
Statement stmt = null; // 创建Statement对象
ResultSet rs = null; // 创建结果集对象
Connection conn = getConn(); // 获取数据库连接对象
try {
// 定义查询数据库的SQL语句
String sql = "SELECT content FROM tb_javainfo where id="+id;
stmt = conn.createStatement();
rs = stmt.executeQuery(sql); // 执行数据库查询
if (rs.next()) {
content = rs.getString(1); // 获取说明文字
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn); // 关闭并释放资源
}
return content;
}