Ajax,想必大家对它并不陌生(读音:e:j^ks,)AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)
那我们要如何运用ajax实现异步的数据查询和把查询的数据封装成xml Dom 对象 然后再解析成数据显示回页面呢 。也许用人会说这个很简单,只要把nowpage 和 countpage 传过去就可以了 ,的确是这样 但是重点不是这个 ,重点是我们如何在异步查询的前提下 进行nowpage 和 countpage 的及时(所谓及时就是指当点击的时候去更新)刷新 和把xml Dom里所有子节点的内容 怎么回显到html Dom中(即把相关数据回显到页面),我们都知道局部刷新如果写的代码有问题nowpage 和countpage 是不会改变的。那我们应该怎样实现这个分页呢,其实还是很简单,下面简单说一下实现分页的js和servlet 和jsp
首先我们要针对不同浏览起的兼容问题进行XmlHttpRequest的创建function getXhr() {
var xhr
try {
//firefox opera
xhr = new XMLHttpRequest();
} catch (err) {
try {
//iE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (er) {
alert("不支持ajax技术");
}
}
return xhr;
}
之后我们就开始用ajax去封装和发送请求
function selectEmp(nowp) {
//获取xhr对象
var xhr = getXhr();
//封装请求信息
xhr.open("get", "./listEmp.do?nowpage="+nowp, true);
//发送请求
xhr.send();
//根据服务器端传递xhr.readyState触发的事件进行处理
xhr.onreadystatechange = function() {
//根据readyState是否处理完毕,status服务是否返回成功
if (xhr.readyState == 4 && xhr.status == 200) {
//获得xml的document对象
var doc = xhr.responseXML;
listEmps(doc);
empdoc=doc;
}
}
}
//这里是现实分页的js逻辑
var empdoc;
function getPageInfo(mark){
var root=empdoc.documentElement;
var nowpage=root.getAttribute("nowpage");
var pagezong=root.getAttribute("pangzong");
switch(mark){
case 1:
nowpage=1;
break;
case 2:
nowpage--;
break;
case 3:
nowpage++;
break;
case 4:
nowpage=pagezong;
break;
}
selectEmp(nowpage);
}
//页面这样写就可以了
<div id="fenye">
<span>//首先我们要在servlet中封装xml文件时封装两个属性 nowpage和countpage
<a href="javascript:getPageInfo(1)">首页</a>
//这里我们调用js里面的方法去运算逻辑,然后把nowpage传给ajax去查询进行时时更新
<a href="javascript:getPageInfo(2)">上一页</a>
<a href="javascript:getPageInfo(3)">下一页</a>
<a href="javascript:getPageInfo(4)">末页</a>
</span>
</div>
//servlet 里面把数据封装到xml中
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
out
.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<emps nowpage='"+nowpage+"' pangzong='"+pangzong+"'>");
for(Emp emp:emps){
out.println("<emp>");
out.println("<empno>"+emp.getEmpno()+"</empno>");
out.print("<ename>"+emp.getEname()+"</ename>");
out.println("<job>"+emp.getJob()+"</job>");
out.print("<hiredate>"+emp.getHiredate()+"</hiredate>");
out.println("<mgr>"+emp.getMgr()+"</mgr>");
out.print("<sal>"+emp.getSal()+"</sal>");
out.print("<comm>"+emp.getComm()+"</comm>");
out.print("<deptno>"+emp.getDeptno()+"</deptno>");
out.println(" </emp>");
}
out.println("</emps>");
out.flush();
out.close();
详细的增删改查分页请见附件
分享到:
相关推荐
综上所述,Ajax异步请求分页是提高Web应用性能和用户体验的重要手段,结合C#的服务器处理能力,能够构建出高效且用户友好的分页系统。在实际开发中,需要根据项目需求灵活运用各种技术和策略,确保系统的稳定性和可...
**Ajax异步分页技术详解** 在Web开发中,用户界面的流畅性和用户体验是至关重要的。传统的网页分页通常需要用户点击下一页按钮后整个页面重新加载,这不仅消耗网络资源,而且打断了用户的浏览体验。为了解决这个...
"JSP数据库数据AJAX无刷新分页"是一个常见的技术实现,它结合了JavaServer Pages(JSP)、数据库技术、Ajax(Asynchronous JavaScript and XML)以及前端分页组件,为用户提供了一种无需整个页面刷新即可获取并显示...
这时,我们可以采用AJAX(Asynchronous JavaScript and XML)技术结合JSON(JavaScript Object Notation)数据格式来实现异步请求数据分页。 标题中的“ajax异步请求数据分页”是指使用AJAX技术在后台动态获取所需...
在异步分页中,Linq通常与数据库交互,执行查询来获取特定页码的数据。例如,你可以定义一个方法,接受当前页码和每页记录数作为参数,然后使用Linq的Skip和Take方法来跳过不需要的记录并获取当前页的数据。如下面的...
**Ajax异步分页技术详解** 在Web开发中,用户界面的流畅性和用户体验是至关重要的。传统的网页分页通常会整个页面重新加载,这不仅耗时,也打断了用户的浏览体验。为了解决这个问题,我们可以利用Ajax...
Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现无刷新分页,使得用户在浏览数据时无需等待整个页面重新加载。本教程将围绕Ajax在JSP(JavaServer Pages)环境下的分页查询展开,尽管原始示例是ASP,...
通过使用Ajax技术,Web系统可以实现动态数据分页显示,不需要重载整个页面,从而减少用户等待时间,提高查询效率。 一、Ajax技术简介 Ajax(Asynchronous JavaScript and XML)是一种结合多种技术的组合体,包括...
总结,这个jQuery+Ajax异步加载分页代码实现了动态加载数据,提高了用户体验,同时允许自定义分页设置,具有很好的灵活性和实用性。通过理解并实践这个示例,开发者可以更好地掌握Ajax和jQuery在实际项目中的应用。
总结一下,"异步分页查询"是通过Ajax和jQuery库实现的一种高效的数据加载技术,它提高了用户体验,使得用户可以在数据加载过程中继续浏览和操作页面。服务器端负责处理分页逻辑,返回JSON数据,而客户端则负责解析和...
【标题】"ajax+ashx+分页 包含数据库文件"所涉及的知识点主要集中在Web开发中的异步数据处理和页面动态加载技术上。这里的"ajax"是"Asynchronous JavaScript and XML"的缩写,是一种在不刷新整个网页的情况下,能够...
这里`$counts`是数据库查询得到的总记录数,20表示每页显示的记录数,'type=1'是额外的URL参数,'ajax_div'和'ajax_page_div'分别是指定用于显示数据和分页链接的HTML元素ID。 2. **判断是否为AJAX请求**:在控制...
它涉及到如何高效地利用AJAX(Asynchronous JavaScript and XML)技术来实现在不刷新整个页面的情况下更新内容,以及如何通过DOM(Document Object Model)动态生成和操作页面元素,特别是当数据量大到需要分页显示...
首先,理解Ajax(Asynchronous JavaScript and XML)的核心概念:异步更新页面内容,无需刷新整个页面。这极大地提高了用户体验,因为用户可以继续在页面上操作,而不被等待服务器响应的时间打断。在Java分页中,...
- `AjaxServlet.java`:处理AJAX请求的Servlet,负责数据库查询和响应生成。 - `dbConfig.properties`:数据库连接配置文件,包含数据库URL、用户名和密码等信息。 - `style.css`:可能包含自定义样式,用于美化分页...
- **SQL分页**:在数据库查询中使用`OFFSET`和`FETCH NEXT`(SQL Server)或`LIMIT`和`OFFSET`(MySQL)等语句来获取特定页的数据。 - **存储过程**:为了优化性能,可以创建存储过程来处理分页逻辑,减少对数据库的...
在JSP(Java Server Pages)开发中,为了提高用户体验,我们常常需要实现异步无刷新的数据分页。这种技术利用了Ajax(Asynchronous JavaScript and XML)的优势,可以在不重新加载整个页面的情况下,从服务器获取并...
本项目为基于Java语言的Ajax异步请求实现分页及数据增删改查功能的完整设计源码,包含45个文件,涵盖22个Java源文件、11个XML配置文件、7个JSP页面文件、2个Git忽略文件和2个属性文件,适用于构建高效的数据管理平台...