前端开发 | 在线支持

【示例】

HTML

<body onLoad="check();">
<h1>记录集分页显示</h1>
<h2>第<span class="red" id="cur">1</span>页记录列表</h2>
<p>（2条/页，共7页）</p>
<div id="info"></div>
<span class="btn" id="up" onClick="check(1)">上一页</span> <span class="btn" id="down" onClick="check(2)">下一页</span>
</body>

CSS

table{
	margin:1em;
	border-collapse:collapse;
	border:solid 1px #FF33FF;
}
td,th {
	border:solid 1px #FF33FF;
	padding:4px 8px;
}
.btn {
	cursor:pointer;
	border:solid 1px;
	border-color:#888 #ddd #eee #888;
	padding:6px 12px;
	zoom:1;
}
.red {
	color:red;
    font-size:1.5em;
    padding:2px 6px;
}

JS

// 封装创建XMLHttpRequest对象
function createXMLHTTPObject()
{
    var XMLHttpFactories = [
		function () {return new XMLHttpRequest()},
		function () {return new ActiveXObject("Msxml2.XMLHTTP")},
		function () {return new ActiveXObject("Msxml3.XMLHTTP")},
		function () {return new ActiveXObject("Microsoft.XMLHTTP")}
	];
    var xmlhttp = false;
    for (var i = 0; i < XMLHttpFactories.length; i ++ )
    {
        try
        {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e)
        {
            continue;
        }
        break;
    }
    return xmlhttp;
}
//封装异步请求函数
function request(url, callback, data)
{
    var xmlHttp = createXMLHTTPObject();
    if ( ! xmlHttp) return;
    var method = (data) ? "POST" : "GET";
    xmlHttp.open(method, url, true);
    xmlHttp.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
    if (data)
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlHttp.onreadystatechange = function ()
    {
        if (xmlHttp.readyState != 4) return;
        if (xmlHttp.status != 200 && xmlHttp.status != 304)
        {
            alert('HTTP请求错误  ' + xmlHttp.status);
            return;
        }
        callback(xmlHttp);
    }
    if (xmlHttp.readyState == 4) return;
    xmlHttp.send(data);
}
 
function check(n){
	var coun = 1;
	var cur = parseInt(document.getElementById( "cur" ).innerHTML);
	document.getElementById( "up" ).style.display = "none";
	
	if(n==1) {
		coun = (cur-1)*2-1;
		document.getElementById( "cur" ).innerHTML =cur-1;	
		document.getElementById( "down" ).style.display = "inline";	
		if(cur<=2){
			document.getElementById( "up" ).style.display = "none";
		}
		else {
			document.getElementById( "up" ).style.display = "inline";
		}
	}
	if(n==2){
		coun = (cur+1)*2-1;
		document.getElementById( "cur" ).innerHTML =cur+1;
		document.getElementById( "up" ).style.display = "inline";
		if(cur>=6) {
			document.getElementById( "down" ).style.display = "none";
		}
		else {
			document.getElementById( "down" ).style.display = "inline";
		}	
	}
    request( "test.asp?coun=" + coun, callback );
}

function callback( xhr)
{
	var xml = xhr.responseXML;
    var count = "";
    var html = "";
    var items = xml.getElementsByTagName( "item" );
    html += "<table><tr><th>成员名</th><th>类型</th><th>说明</th></tr>"
    //for( var i  in  items ){
	for( var i=0 ; i< items.length; i++ ){
        html += "<tr>"
        var child = items[i].childNodes
        //for( var n in child ){
		for( var n=0 ; n< child.length; n++ ){
			if( child[n].nodeType == 1 ){
				html += "<td>"
				html += child[n].firstChild.data;
				html += "</td>"
			}
        }
        html += "</tr>";
    }
    html += "</table>";
	var info = document.getElementById( "info" );
	info.innerHTML = html; //显示XML数据
}

下载源代码