实现web页面局部动态刷新(2)_H5之家 - 中国HTML5教程资源分享第一站

将上述代码保存，我这里保存的名称为index.jsp。

3，客户端代码
客户端代码主要实现异步传送数据的显示样式。打开记事本，输入下列代码：
[html]
<%@ page contentType="text/html; charset=GBK" import="java.sql.*" errorPage="" %>
<html>
<head>
    <script type="text/javascript">
    var xmlHttp;
    var id;
    function createXMLHttpRequest(){
      if(window.ActiveXObject) {
     xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
   }
else if (window.XMLHttpRequest) {
     xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象
     }
    }
    function startRequest(ele) {
    id=ele.id;
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("POST", "index.jsp?name="+id, true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
alert(str);
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
          show();
     }
}
}
function validate(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET", "index.jsp", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function show(){
   var xmlDoc=xmlHttp.responseXML;
   var yan=xmlDoc.getElementsByTagName("content");
   var ta="<table border=1 width=45% align=center id=ta><tr><td>用户名称</td><td>操作</td></tr>";
      for(var i=0;i<yan.length;i++){
      var y=yan[i];
      var name=y.childNodes[0].firstChild.data;
          ta+="<tr id='aa'><td width=30%>"+name+"</td>";
      ta+="<td><p id="+name+" style='color:green;' onclick='startRequest(this)'><u>删除</u></p></td></tr>";
     }
   ta+="</table>";
   document.getElementById("res").innerHTML=ta;
   //alert(yan.length);
}
    </script>
</head>

<body onLoad="validate()">
    <div id="res"></div>
</body>

将上述代码保存，名称为Del.jsp。在该文件中，createXMLRequest()函数主要是用于创建XMLHttpRequest异步对象，validate()函数项服务器发送异步请求，该请求主要完成数据库记录的显示功能。Callback()函数主要用于处理服务器端的返回数据，即调用show()函数用于设置数据的显示样式。Show()函数主要是解析服务器端返回的XML文件，并解析XML文件中的数据，最后以指定样式显示在当前页。StartRequest()函数也是用于向服务器发送异步请求，但该请求主要完成删除指定数据库记录。在当前网页被加载时，就会执行validate()函数。

4，运行效果

运行前：

删除后：

点击复制链接与好友分享!回本站首页上一篇：Ajax的常用技巧（5）---实现进度条下一篇：Vaadin Web应用开发教程(45): SQLContainer 概述相关文章

ajax后退解决方案（三）

ajax后退解决方案（四）

ajax后退解决方案（一）

ajax后退解决方案（二）

ajax后退解决方案（五）

AJAX跨域获取数据

用Ajax查询结果初始化记录列表表单

ajax XMLHttpRequest五步使用法

Ajax实现原理

使用AjaxPro实现无刷新数据检测

图文推荐