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;
}