ajax实现网页的局部刷新

从页面到ajax函数的运行的大致思路：页面点击事件，触发 xmlHttp.open("post", url, true)函数的执行。通过web.xml的配置的servlet-mapping,url所附带的参数会被处理的servlet类接收，此类中可进行数据库的查询，并将查询结果以xml文件的格式保存下来，页面会以解析xml文件将值传到前台，完成了局部刷新的功能。

1.mysql创建的数据库表的字段及相对应的javabean.(可使用hibernate框架构建user数据库)

user.java

public class User implements java.io.Serializable {

// Fields

private Integer id;

private String name;

private String password;

private String power;

private Timestamp dtime;

// Constructors

/** default constructor */

public User() {

}

/** minimal constructor */

public User(Timestamp dtime) {

this.dtime = dtime;

}

/** full constructor */

public User(String name, String password, String power, Timestamp dtime) {

this.name = name;

this.password = password;

this.power = power;

this.dtime = dtime;

}

// Property accessors

public Integer getId() {

return this.id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return this.name;

}

public void setName(String name) {

this.name = name;

}

public String getPassword() {

return this.password;

}

public void setPassword(String password) {

this.password = password;

}

public String getPower() {

return this.power;

}

public void setPower(String power) {

this.power = power;

}

public Timestamp getDtime() {

return this.dtime;

}

public void setDtime(Timestamp dtime) {

this.dtime = dtime;

}

}

2.执行页面点击的javascript函数

<script type="text/javascript">

var xmlHttp;

var musicTotal;

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

}

function delUser() {

createXMLHttpRequest();

var url = "delU";

xmlHttp.open("post", url, true);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

function delArc() {

createXMLHttpRequest();

uId=getCheckboxItem();

alert(uId);

var url = "delU?uId="+uId;

xmlHttp.open("post", url, true);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

function validate() {

createXMLHttpRequest();

// mId=getCheckboxItem();

var url = "delU";

xmlHttp.open("post", url, true);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

var userTotal,musicTotal;

function callback() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

var xmlDoc=xmlHttp.responseXML;

var str;

var show="";

var yan=xmlDoc.getElementsByTagName("content");

userTotal=yan.length;

show+="<form name=formUMM id=formUMM><table width=98% border=0 cellpadding=2 cellspacing=1 bgcolor=#D1DDAA align=center ><tr bgcolor=#E7E7E7><td height=24 colspan=10 background=skin/images/tbg.gif>&nbsp;用户信息&nbsp;</td></tr><tr align=center bgcolor=#FAFAF1
height=22><td width=9%>ID</td><td width=6%>选择</td><td width=30%>用户名</td><td width=15%>注册时间</td><td width=10%>密码</td><td width=10%>权限</td><td width=30%>操作</td></tr>";

for(var i=0;i<yan.length;i++){

var y=yan[i];

var id=y.childNodes[0].firstChild.data;

var name=y.childNodes[1].firstChild.data;

var password=y.childNodes[2].firstChild.data;

var power=y.childNodes[3].firstChild.data;

var dTime=y.childNodes[4].firstChild.data;

show+="<tr align=center bgcolor=#FFFFFF onMouseMove=javascript:this.bgColor=‘#FCFDEE‘; onMouseOut=javascript:this.bgColor=‘#FFFFFF‘; height=22 ><td>"+id+"</td><td><input name=userId type=checkbox id=userId value=‘"+id+"‘ class=np></td><td align=center>"+name+"</td><td>"+dTime+"</td><td>"+password+"</td><td>"+power+"</td><td><a
href=101>编辑</a> | <a href=101>预览</a></td></tr>";

}

show+="<tr bgcolor=#FAFAF1><td height=28 colspan=10>&nbsp;<input type=button value=‘全选‘ onclick=‘selAll()‘ id="+id+"><input type=button value=‘取消‘ onClick=‘noSelAll()‘><input type=button value=‘删除‘ onClick=‘delArc()‘>"

+"</td></tr><tr align=right bgcolor=#EEF4EA><td height=36 colspan=10 align=center><!--翻页代码 --></td></tr></table></form><table width=98% border=0 cellpadding=2 cellspacing=1 bgcolor=#D1DDAA align=center style=margin-top:8px><tr bgcolor=#E7E7E7  height=52
colspan=10 background=skin/images/tbg.gif><td  style=font-size:18px align=center>用户总人数："+userTotal+"</td></tr></table>";

setMessage(show);

}

}

}

function setMessage(message) {

var messageArea = document.getElementById("dateMessage");

messageArea.innerHTML =message;

}

</script>

<body>

<h1>Ajax Validation Example</h1>

Birth date: <input type="button" size="10" id="birthDate" value="提交" onclick="validate();"/>

<div id="dateMessage"></div>

</body>

3.配置web.xml,创建servlet类

web.xml

<servlet>

<servlet-name>delUser</servlet-name>

<servlet-class>servlet.delUser</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>delUser</servlet-name>

<url-pattern>/delU</url-pattern>

</servlet-mapping>

delUser.java

public class delUser extends HttpServlet {

/**

*

*/

private static final long serialVersionUID = 1L;

public void init( ServletConfig config) throws ServletException {

super.init(config);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/xml");   // 像这样设置返回的类型。

PrintWriter out = response.getWriter();

userDao ud=new userDao();

String uId=request.getParameter("uId");

if(uId!=null){

String s[]=uId.split(",");

for(int i=0;i<s.length;i++){

ud.delete(Integer.parseInt(s[i]));

}

}

//  System.out.println(request.getParameter("uId"));

String sql="select * from user";

out.println("<?xml version=‘1.0‘ encoding=‘utf-8‘?>");

out.println("<contents>");

for(int i=0;i<ud.allUser(sql).size();i++){

User u=(User)ud.allUser(sql).get(i);

out.println("<content>");

out.println("<id>"+u.getId()+"</id>");

out.println("<name>"+u.getName()+"</name>");

out.println("<password>"+u.getPassword()+"</password>");

out.println("<power>"+u.getPower()+"</power>");

out.println("<dTime>"+u.getDtime()+"</dTime>");

out.println("</content>");

}

out.println("</contents>");

}

}

4.运行结果截图

时间： 2024-10-10 16:48:16

ajax实现网页的局部刷新的相关文章

基于H5 pushState和Ajax完美实现页面局部刷新

众所周知使用Ajax可以局部刷新提高用户体验,然而url不跟随改变是其一大弊端. 如果修改浏览器地址栏的url,同时不刷新整个页面就完美了. 先来看看什么是pushState? 给history对象增加一个状态. window.history.pushState(stateData, 'title', 'newUrl'); // stateData用于事件参数 window.addEventListener('popstate', function(){ var state = window.h

如何用php+ajax实现页面的局部刷新？（转）

client.html XML/HTML code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>   <meta http-equiv="content-type" content="text

jquery ajax配合SpringMVC实现局部刷新DIV

feedback.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath();

jquery ajax协调SpringMVCD实现局部刷新IV

feedback.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath();

（局部刷新）jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的. jsp页面ajax代码如下: $("#waitWork").click(function(){ var url = "请求地址"; var data = {typ

服务器端控件的局部刷新,CallBack

服务器端控件的局部刷新,CallBack (2007-01-13 13:46:37) 转载▼   分类: 技术资料 发现了.net2.0原来有套CallBack机制,可以轻松实现服务器控件类似AJAX的效果(实现局部刷新),不过真的是服务器端控件用AJAX的话,效果确乎是没ASP.NET AJAX 好Callback与asp.net ajax的UpdatePanel控件内在实现机制都是Ajax但采用UpdatePanel控件的页面仍然采用Postback方式与服务器交互,会更新ViewState

ASP.Net 在Update Panel局部刷新后 重新绑定JS方法

我们知道Asp.Net中的Update Panel可以完成页面的局部刷新(实质上是Ajax),但是局部刷新完后,此区域的控件上所绑定的JS方法就会失效,因为我们用如下方法来重新绑定. var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { // re-bind your jQuery events here }); 更多详细信息请看如下链接: http://stackove

Ajax 异步局部刷新

Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 实现json 字符串与 JavaScrip 对象得相互转换 JSON.parse()和 JSON.stringify() 1.序列化(将JavaScrip 转换为 json)使用 JSON.st

Ajax原生的js（XMLHttpRequest对象）--实现局部刷新

AJAX 是一种用于创建快速动态网页的技术.(不用刷新整个页面和服务器通讯的方法 ) XMLHttpRequest对象:是对js的扩展,可以实现网页与服务器进行通信,通常把Ajax当做XMLHttpRequest对象的代名词. 客户端的语言一般是HTML,css,JavaScript:服务器端一般用PHP,jsp,ASP:中间传输的格式一般为HTML,xml,TXT,json:传输协议是http ajax需要某种格式化的格式在服务器和客户端之间传递信息,XML,JSON是常用的格式 DOM实现动