asp+ajax实现静态页面分页的代码

最近因工作需要，要在静态页面上实现分页，想了下，决定用AJAX来实现，所以就捣鼓了下面这么个东西，截图如下：



代码如下:

<html>
<head>
<title>AJAX静态分页</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
<!--
body                { text-align:center;font:14px Verdana,sans-serif; }
a:link,a:visited    { color:#00f;text-decoration:none; }
a:hover                { color:#f00;text-decoration:underline; }
#main                { width:450px;background:#f2f2f2;border:1px #999 solid;padding:10px;text-align:left;line-height:150%;margin:0 auto; }
#title                { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; }
#left                { float:left;width:50%;text-align:left;font-size:14px;font-weight:bold; }
#right                { float:left;width:50%;text-align:right; }
#content            { width:100%;margin:10px 0;clear:both; }
#download            { width:100%;margin:10px 0;line-height:150%; }
-->
</style>

<script type="text/javascript">
<!--
function createAjax() {            //该函数将返回XMLHTTP对象实例
    var _xmlhttp;
    try {    
        _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    //IE的创建方式
    }
    catch (e) {
        try {
            _xmlhttp=new XMLHttpRequest();    //FF等浏览器的创建方式
        }
        catch (e) {
            _xmlhttp=false;        //如果创建失败，将返回false
        }
    }
    return _xmlhttp;    //返回xmlhttp对象实例
}

function getweblist(page) {        //该函数用来获取分页数据
    var xmlhttp=createAjax();    //创建变量xmlhttp，并将createAjax()函数创建的对象实例赋于它
    if (xmlhttp) {        //如果xmlhttp对象创建成功，则执行条件语句中的程序
        var content=document.getElementById('content');        //获取页面中id为content的对象
        xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true);    //打开与服务器的连接，其中get为连接方式，server.asp为要连接的页面，有两个参数，其中第一个参数page为需要返回数据的页数,第二个参数n为一个随机数，这样每次发送的URL都会不一样，相当于都向服务器发出一个新的请求，避免浏览器缓存数据。
        xmlhttp.onreadystatechange=function() {        //为xmlhttp对象的readyState属性指定事件，改属性值改变时，则会执行其中的程序
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {    //如果xmlhttp.readyState==4并且xmlhttp.status==200时，执行条件中的程序，其中readyState有五个值，4为请求完成，是客户端向服务器提交的数据成功到达，status有N多值-_-!!，其中200为OK，是指服务器向客户端完成发送数据。
                content.innerHTML=unescape(xmlhttp.responseText);    //将服务器返回的数据解码并写入指定的ID中。
            }
            else {
                content.innerHTML='<span style="color:red">正在从服务器提取数据......</span>';    //如果服务器没有完成传送，则向用户提示正在传输。
            }
        }
        xmlhttp.send(null);    //向服务器发送请求，因为是get请求，会直接附在URL后面，所以这里括号中的数据为null，IE中也可以不写，但FF就必须加上null，否则会发送失败。
    }
}

function edit() {    //编辑分页显示条数的函数
    var str='<form style="margin:0">每页显示 <input type="text" id="pagesize" size="3"> 条 <input type="button" id="savebtn" value="保存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>'        //定义html字符串
    var right=document.getElementById('right');    //获得页面中的right对象。
    right.innerHTML=str;    将str变量的值写入该对象中。
}

function rightinfo() {        //right对象中的原始信息，请在页面开始和被显示条数被修改后调用
    document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每页显示条数">Edit</a>';
}

function save() {    //保存修改后的显示条数
    var pagesize=document.getElementById('pagesize');    //这个就不写了，跟上面的用法一样。
    if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) {        //确定用户输入的新数据是不是一个数字
        alert("请正确填写每页显示条数！ ");
        return;
    }
    var xmlhttp=createAjax();    //创建对象
    if (xmlhttp) {
        xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true)        //参上同看
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById('right').innerHTML=unescape(xmlhttp.responseText);    //先写入从服务器返回的字符串，如果成功，会写入completed。
                getweblist(1);        //从新获取新修改后的第一页的数据
                setTimeout('rightinfo()',3000);        //3秒后将right对象的原始字符串写入。
            }
            else {
                document.getElementById('pagesize').disabled=true;    //将几个FORM表单的元素都设为不可改动
                document.getElementById('savebtn').disabled=true;
                document.getElementById('cancelbtn').disabled=true;
            }
        }
        xmlhttp.send(null);    //发送请求。
    }
}

//-->
</script>
</head>

<body onload="getweblist(1);rightinfo();">
    <div id="main">
        <div id="title">
            <div id="left">静态分页的AJAX实现</div>
            <div id="right"></div>
        </div>
        <div id="content"></div>
        <div id="download">
            作者：十一狼<br />
            联系：275915854(QQ) 112183883@163.com(email)<br />
            下载：<a href="http://www.w3cg.net/Ajax.rar" target="_blank">http://www.w3cg.net/Ajax.rar</a>
        </div>

</div>
</body>
</html>

打包文件下载

赞 (0)

相关推荐

  • ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先需要引入jquery.js,主要代码如下: 复制代码 代码如下: function ajax(id,pic){     //由于ThinkPHP不解析JavaScript里的ThinkPHP常量,所以需要先在这里定义. var URL='__URL__';         $.ajax({     

  • php的ajax简单实例

    php的ajax简单实例

    当输入j后,会触发ajax效果,从后台获取相应的名字中带有j的数据,并展示在suggestions中. 代码实现如下: 实现ajax需要三个文件,一个是html的表单文件,一个是js的核心文件,一个是php的后台文件. 下面的是html文件,当键盘按下时触发showHint方法,在showHint方法中会有ajax的核心内容,实例化,获取地址,获取数据并展示等等. 复制代码 代码如下: <html><head><script src="clienthint.js&q

  • php+mysql结合Ajax实现点赞功能完整实例

    本文实例讲述了php+mysql结合Ajax实现点赞功能的方法.分享给大家供大家参考.具体如下: 要实现点赞功能,有多种实现方式,这里总结一下利用Ajax,php和mysql来实现点赞的数据的功能.具体步骤如下: 一.页面中的HTML代码部分: <span>0</span> <button onclick="goodplus(1);">good+1</button> <span>0</span> <butto

  • php ajax网站浏览统计功能的简单实现第1/2页

    使用PHP语言实现,如果你看不明白,请留言.... 相信原理都差不多.. 为什么使用PHP做范例语言? 不外乎两个因素: 1. PHP语法通俗易懂,有一点程序基础的人就可以了解;2.代码量比较少 本功能实现的代码的目录结构见 [ajax实时任务提示功能的实现 -- vb2005xu自己动手系列(1)],这个可以作为它的插件插入,这里也是阐述一种开发思想:在网站开发的过程中,功能是逐步添加的,一开始并不能也不可以做到尽善尽美的设计.建议在刚开始的时候规划好项目的结构,后期好使用插件扩展功能实现..

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • Ajax实现对静态页面的文章访问统计功能示例

    本文实例讲述了Ajax实现对静态页面的文章访问统计功能.分享给大家供大家参考,具体如下: 众所周知,静态页面不仅速度快,而且对seo也有一定的帮助.前些日子,写了一帖关于<在SAE平台实现WordPress页面纯静态化至KVDB>.我自己使用了一段时间后,发现提速确实很明显.但是随之而来的一个问题就是,由于文章静态化后,页面并不会经过WordPress程序的处理,这样就导致了文章的访问量统计失效.当然,有一个叫做wp-postview的插件是可以解决这个问题的,但是我不是很喜欢插件,因为会拖慢

  • php AJAX POST的使用实例代码

    ajax.html 程序代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • Jquery AJAX 用于计算点击率(统计)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Demo </TITLE> </HEAD> <BODY> <script src="jquery.js" type="text/javascript"></

  • php,ajax实现分页

    自己总结了些屁经验 1.用ajax post数据到后台页面后,接着要重新连接数据库,别以为用之前的session连接过就可以了 2.为了处理返回乱码的问题,我添加了header("Content-Type:text/html;charset=GB2312");就可以正常显示了,后来在firefox下检验,却提示我下载这个网页,上网搜了不少资料,得到一个模糊的认识就是网页代码有语法错误,firefox为了安全起见不会直接显示而是提示下载,我重新检查了刚才那条语句,发现自己多写了个&quo

  • php+ajax+jquery实现点击加载更多内容

    我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

随机推荐