Ajax 데이터 읽 기 페이지 디 스 플레이 편 구현 코드

제 ajax 페이지 를 보 여 드릴 필요 가 있다 고 생각 합 니 다.이 ajax 페이지 의 실현 핵심 을 먼저 말씀 드 리 고 인 스 턴 스 효 과 를 보 겠 습 니 다.이른바 ajax 페이지 는 전통 적 인 데이터 페이지 와 서버 의 코드 가 기본적으로 같 습 니 다.저 희 는 ajax 를 사용 하여 새로 고침 하지 않 은 상태 에서 요청 한 페이지 를 사용 합 니 다.각 페이지 에 표시 할 항목 수 를 서버 에 보 내 는 처리 페이지 입 니 다.이 주 소 를 클릭 하면 요청 할 데 이 터 를 볼 수 있 습 니 다."ajax"page.asp?action=read&pagecount=3 & current_page=1"이 URL 에서 pagecont 는 각 페이지 에 몇 개의 데 이 터 를 표시 해 야 하 는 지 를 나타 낸다.currentpage 는 요청 할 페이지 번 호 를 대표 합 니 다.서버 는 이 두 개의 매개 변수 에 따라 요청 하고 자 하 는 데 이 터 를 전송 하 는 것 입 니 다.다음은 인 스 턴 스 효 과 를 보 겠 습 니 다.이것 은 전단 의 ajax 코드 입 니 다
 
<html>
<head>
<title>ajax </title>
<style>
body{
font-size:12px;
}
table{
border-collapse:collapse;
}
li{
list-style:none;
border:1px solid;
width:20px;
height:20px;
text-align:center;
margin:5px;
padding:2px;
float:left;
cursor:pointer;
}
</style>
</head>
<body>
5 , <hr/>
:<input id="edit_count" type="text" /> <input type="button" type="button" value=" " onclick="Read()"/>
<table border="1"><!-- -->
<thead><tr><td> </td><td> </td></tr></thead>
<tbody id="a"></tbody>
</table>
<span id="msg" style="color:red"></span>
<br/>
<ul id="page"><!-- -->
</ul>
<script type="text/javascript">
var All_page;//
var All_record;//
var Current_page;//
var PageCount;//
function ajax_xmlhttp(){
// IE xmlhttpRequest, IE5.0
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} // IE xmlhttp.
// IE , FireFox xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//
function $(elem){
return typeof elem == "string" ? document.getElementById(elem) : elem;
}
//
function Read(){
if(arguments.length!=0){// ,
var e = arguments[0] || window.event; //
var obj = e.target || e.srcElement; // ,
Current_page = parseInt(obj.innerHTML);// ,
$("msg").innerHTML = " "+Current_page+" ";// :
}
PageCount = $("edit_count").value;//
if(PageCount.length == 0){ //
PageCount = 5; // 5
}
var ajax = ajax_xmlhttp(); // xmlhttprequest .
ajax.open("post","ajax_page.asp?action=read&pagecount="+PageCount+"& current_page="+Current_page,true);// , ,url action read,
ajax.onreadystatechange = function(){//
if(ajax.readyState == 4){//
if(ajax.status == 200){//http ok
var xmlData = ajax.responseXML;// xml , xmlData
All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;
All_page = All_Record / PageCount;
var page_list = $("page");
while(page_list.childNodes.length!=0){
page_list.removeChild(page_list.childNodes[0]);
}
for(var i=0;i<Math.ceil(All_page);i++){ //
var li = document.createElement("li");
li.innerHTML = i+1;// i 0 , +1
li.onclick = function(e){Read(e)};// li
page_list.appendChild(li);// div
}
var list = xmlData.getElementsByTagName("list");// , list
if(list.length!=0){
var t = document.getElementById("a");//
while(t.rows.length!=0){ // .
t.removeChild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertRow(t.rows.length);// list .
var td = tr.insertCell(0);//
td.innerHTML = list[i].childNodes[0].firstChild.nodeValue;
var td = tr.insertCell(1);//
td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);// , null
}
Read();// Read
</script>
</body>
</html>
위 는 이번 ajax 페이지 튜 토리 얼 의 전단 코드 입 니 다.html 부분 은 말 하지 않 겠 습 니 다.script 의 내용 을 직접 시작 하 겠 습 니 다.먼저 우 리 는 4 개의 전역 변 수 를 정 의 했 습 니 다.각각:Allpage:총 페이지 수,페이지 를 만 드 는 근거 AllRecord:데이터 총 갯 수,AllRecord/PageCount=All_page 총 페이지 수 획득 Currentpage:현재 요청 한 페이지 입 니 다.서버 에 전송 하기 PageCount:각 페이지 에 표 시 된 항목 수 를 서버 에 전송 한 다음 에 제 가 쓴 3 개의 사용자 정의 함수 입 니 다.각각 ajaxxmlhttp();이 함수 의 역할 은 사용 가능 한 XML HTTPRequest 대상 을 만 드 는 것 입 니 다.XML HTTPRequest 가 무엇 인지 모 르 신다 면 XML HTTPRequest$(elem)가 무엇 인지 알 아 보 세 요.요소 의 함 수 를 가 져 옵 니 다.페이지 에 있 는 요소 의 id 에 따라 특정한 요 소 를 참조 할 수 있 습 니 다.사실은 document.getElement ById 의 줄 임 말 과 인용 입 니 다.함수 로 쓴 후에$("요소 id")를 사용 하면 이 요 소 를 얻 을 수 있 습 니 다.read():데 이 터 를 읽 는 함수 입 니 다.또한 우리 의 오 랜 친구 입 니 다.앞의 몇 편의 튜 토리 얼 에서 모두 사용 되 었 습 니 다.아래 에 자세히 분석 해 보 겠 습 니 다.이번에 우 리 는 read()함수 에서 무엇 을 했 습 니까?(1):if(arguments.length!=0)이것 은 read()함 수 를 호출 할 때 매개 변수 가 전달 되 는 지 판단 하 는 것 입 니 다.매개 변수 가 있 으 면 특정한 페이지 를 클릭 하여 read()를 촉발 시 켰 음 을 증명 합 니 다.이때 우 리 는 이 페이지 를 가 져 와 서 페이지 숫자 를 Crrent 에 할당 해 야 합 니 다.page 변수.알 아 보기:arguments(2):var e=arguments[0]|window.event;표준 화 된 이벤트 대상,arguments[0]는 FF 브 라 우 저 를 위 한 것 입 니 다.window.event 는 IE 브 라 우 저(3):var obj=e.target||e.srcElement 입 니 다.이벤트 대상 을 기준 으로 한 후에 우 리 는 이벤트 의 원본 을 가 져 와 야 합 니 다.즉,그 요소 가 read()함 수 를 촉발 시 켰 다 는 것 입 니 다.이때 의 obj 는 바로 당신 이 클릭 한 페이지 요소 입 니 다.(4):Currentpage = parseInt(obj.innerHTML);요소 의 숫자 값 을 가 져 옵 니 다.몇 페이지 를 요청 하 는 지 증명 합 니 다.아래 요청 에서 이 값 을 서버 에 보 냅 니 다.(5):PageCount=$("edit")count").value;텍스트 상자 의 값 을 가 져 옵 니 다.텍스트 상자 에 값 을 입력 하지 않 았 다 면,페이지 마다 기본적으로 5 개의 데 이 터 를 표시 합 니 다.다시 한 번 말씀 드 리 지만,이전에 말씀 드 렸 던 내용 은 다시 설명 하지 않 겠 습 니 다.즉,위의 코드 에 대해 서 는 이 튜 토리 얼 에서 설명 하지 못 했 습 니 다.이전 튜 토리 얼 에서 설명 을 찾 을 수 있 습 니 다.(6):ajax.open("post","ajax"page.asp?action=read&pagecount="+PageCount+"& current_page="+Current_page,true);저희 가 요청 한 Url 에서 Pagecount 와 Currentpage 변 수 는 서버 에 전 달 됩 니 다.서버 에서 이 두 변 수 를 받 으 면 판단 을 거 칩 니 다.PageCount 가 비어 있 으 면 기본 값 은 5 입 니 다.Currentpage 가 비어 있 으 면 1 페이지 라 고 생각 하고 해당 데 이 터 를 클 라 이언 트 에 게 전송 합 니 다.(7):AllRecord = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;서버 에서 allrecord 태그 요 소 를 받 습 니 다.이 요 소 는 하나의 숫자 값 을 포함 하고 있 습 니 다.이 숫자 값 은 데이터 의 총 갯 수 입 니 다.(8):Allpage = All_Record / PageCount;총 갯 수로 AllRecord 를 PageCount 로 나 누 면 전체 페이지 와 같 습 니 다.몇 페이지 의 데 이 터 를 얻 은 후에 저 희 는 All 에 따라page 현재 페이지 목록 을 만 듭 니 다.(9):var pagelist = $("page");페이지 목록 에 저 장 된 div 요 소 를 가 져 옵 니 다.while(pagelist.childNodes.length!=0)이 div 에 있 는 하위 요 소 를 반복 해서 옮 겨 다 닙 니 다.하위 요 소 를 모두 삭제 합 니 다.현재 페이지 에 표 시 된 항목 수 에 따라 다른 페이지 가 생 성 되 므 로 지난번 에 요청 한 페이지 목록 을 삭제 해 야 합 니 다.물론 저도 개선 할 수 있 습 니 다!하위 요소 가 무엇 인지 모 르 거나 하위 요 소 를 어떻게 삭제 하 는 지 알 지 못 한다 면:childNodes 와 removeChild(10):for(var i=0 을 참조 하 십시오.i < Math.ceil(All_page);i++);하나의 for 순환 을 사용 하여 전체 페이지 수 에 따라 동적 으로 페이지 목록 을 생 성 합 니 다.만약 Allpage 가 5 이면 5 개의 페이지 를 생 성 합 니 다.나머지 를 고려 했 기 때 문 입 니 다.저 는 Math.ceil 을 사 용 했 습 니 다.Math 와 ceil 의 역할 을 아직 모 르 신다 면:Math 와 ceil(11):var li=document.createElement("li")을 참조 하 십시오.li 요 소 를 만 들 고 li 라 는 변수 에 값 을 부여 합 니 다.li.innerHTML=i+1;li 요소 에 페이지 수 치 를 기록 합 니 다.i 는 0 에서 시작 되 기 때문에 모든 것 에 1.(12):li.onclick=function(e){Read(e)}을 추가 해 야 합 니 다.모든 li 요소 바 인 딩 을 위해 이 벤트 를 누 르 는 것 이 중요 합 니 다.이것 은 이해 해 야 합 니 다.우 리 는 li 에 read(e)함 수 를 연결 하고 e 매개 변 수 를 이용 하여 이벤트 대상 을 전 달 했 습 니 다.각 페이지 를 누 를 때 read 함 수 를 다시 터치 하여 데 이 터 를 읽 습 니 다.이때 실행 되 는 Read(e)함 수 는 매개 변수 가 있 습 니 다.우 리 는 바로 매개 변수 에서 당신 이 요청 한 페이지 번 호 를 얻 었 습 니 다.그리고 Currentpage,url 을 이용 하여 서버 에 보 냈 습 니 다.script 스 크 립 트 부분 에서 마지막 줄 을 주의 하 십시오:read();이 때 Read()는 인자 가 없고 페이지 를 열거 나 새로 고침 할 때 만 이 Read()를 실행 합 니 다.이때 Read()가 서버 에 보 내 는 currentpage 는 비어 있 습 니 다.PageCount 는 기본적으로 5 입 니 다.이 때 서버 에서 빈 페이지 를 받 으 면 5 개의 데이터 만 읽 어 줍 니 다.이 동시에 저 는 서버 에서 데이터 의 총 항목 수 를 받 았 습 니 다.전체 항목 수 를 각 페이지 에 표 시 된 항목 수로 나 누 었 습 니 다.페이지 를 만 들 었 습 니 다.또한 각 페이지 에 read(e)함 수 를 연결 하 였 습 니 다.이 페이지 를 클릭 할 때 매개 변수 가 있 는 read(e)만 데 이 터 를 다시 읽 습 니 다.그러나 이 읽 기 는 서버 에 페이지 를 보 냈 습 니 다.아 시 겠 습 니까?(13):page_list.appendChild(li);li 에 페이지 번 호 를 적 었 습 니 다.이 벤트 를 연결 한 후 위 에서 가 져 온 div 요소 에 추가 하 였 습 니 다.참고 하 십시오:appendChild 입 니 다.위 에서 설명 한 부분 은 이번 ajax 페이지 튜 토리 얼 의 전단 핵심 부분 입 니 다.설명 되 지 않 은 내용 은 앞의 ajax 튜 토리 얼 에서 설명 되 어 있 습 니 다.다음은 서버 의 소스 코드 를 살 펴 보고 이 소스 코드 를 분석 하 겠 습 니 다
 
<!--#include file="Conn.Asp"-->
<%
' :http://Www.Web666.Net
' :
'
' , xml
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") ' get action
Select case action
case "read" ' read
Call Read
case else
xml = xml&"<msg> , !</msg>"
End Select
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End

Sub Read '
Call OpenConn '
Current_Page = Request("Current_Page") '
PageCount = request("PageCount") '
xml = xml&"<page>"&pagecount&"</page>"
If Current_Page = "" Or Not IsNumEric(Current_Page) Then
Current_Page = 1
End If
If PageCount = "" Or Not IsNumEric(PageCount) Then '
PageCount = 5
End If
Sql = "Select count(*) From page_table" ' page_table
Set Rs = Conn.Execute(Sql) ' sql
xml = xml&"<allrecord>"&Rs(0)&"</allrecord>"
If Current_Page = 1 Then ' 1
Sql = "Select Top "&PageCount&" * From page_table order by id desc"
Else
Sql = "Select Top "&PageCount&" * From page_table where id<(Select Min(id) From (Select Top "&((Current_Page-1)*PageCount)&" id From page_table order by id desc)) order by id desc"
End If
Set Rs=Conn.Execute(Sql)
While Not Rs.Eof
xml = xml&"<list>"
xml = xml&"<id>"&Rs("id")&"</id>"
xml = xml&"<content>"&Rs("content")&"</content>"
xml = xml&"</list>"
Rs.MoveNext '
Wend
End Sub
%>
위 는 이번 ajax 페이지 튜 토리 얼 인 스 턴 스 에서 요청 한 서버 웹 페이지 소스 입 니 다.제 가 서버 에서 사용 하 는 것 은 Asp 기술 입 니 다.물론 jsp,phop 를 사용 할 수 있 습 니 다..net 등 쉽게 시 뮬 레이 션 할 수 있 습 니 다.서버 에서 xml 데 이 터 를 출력 하 는 것 에 대해 서 는 앞의 ajax 튜 토리 얼 에서 설명 이 있 습 니 다.그래서 우 리 는 이 소스 코드 의 read 읽 기 과정 부터 말 합 니 다.1.CurrentPage = Request("Current_Page"):클 라 이언 트 ajax 가 url 매개 변 수 를 사용 하여 전달 하 는 currentpage,요청 한 페이지 번호 2,PageCount=Request("PageCount"):수신 자 측 ajax 가 url 매개 변 수 를 사용 하여 전달 하 는 PageCount,각 페이지 에 표 시 된 항목 수 3,그리고 current 를 각각 판단 합 니 다.Page 가 비어 있 는 지,숫자 인지.조건 에 맞지 않 으 면 currentpage 는 1 과 같 습 니 다.PageCount 도 비어 있 거나 숫자 가 아니라면 PageCount 는 5 와 같 습 니 다.즉,페이지 당 5 개의 데 이 터 를 읽 는 것 입 니 다.4,Sql="Select count(*)From pagetable"이 sql 의 역할 은 표 안에 모두 몇 개의 데이터 가 있 는 지 읽 는 것 입 니 다.즉,우리 가 전단 코드 에서 말 한 총 항목 수 입 니 다.이 총 항목 수 를 읽 은 후에 allrecord 요소 에 저장 한 다음 에 클 라 이언 트 에 게 전달 합 니 다.클 라 이언 트 가 데 이 터 를 읽 을 때마다 이 숫자 를 가 져 옵 니 다.이 숫자 를 근거 로 페이지 의 생 성 을 진행 합 니 다.5,If CurrentPage=1 Then 판단 CruuentPage 가 1 인지,1 이면 실행:Sql="Select Top"&PageCount&"*From pagetable order by id desc"이 sql 문 구 는 매우 간단 합 니 다.표 에 있 는"PageCount"항목 만 읽 습 니 다.읽 을 항목 의 수 를 전단 에 설정 하지 않 았 다 면 PageCount 는 5 와 같 습 니 다.즉,5 개의 데이터 만 읽 습 니 다.읽 기 순 서 는 desc 입 니 다.거꾸로 읽 기!6、Else 만약 CrrentPage 는 1 이 아 닙 니 다.페이지 목록 에서 1 페이지 가 아 닌 페이지 를 클릭 했 을 때 만 currentPage 야 말로 1 이 아 닙 니 다.그러면 실행:Sql="Select Top"&PageCount&"*From pagetable where id<(Select Min(id) From (Select Top "&((Current_Page-1)*PageCount)&" id From page_table order by id desc))order by id desc",이 sql 문 구 는 페이지 의 핵심 입 니 다.그의 대체적인 뜻 은 표 에서 PageCount 조 데 이 터 를 읽 어야 합 니 다.이 데이터 의 id 는 표 시 된 데이터 중 id 가 가장 작은 데이터 보다 작 아야 합 니 다.예 를 들 어 3 페이지 를 클릭 하면 각 페이지 에 표 시 된 항목 수 는 5 개 입 니 다.그러면 이 3 페이지 에 표 시 될 데이터 의 id 는...두 번 째 페이지 id 보다 작은 데 이 터 를 읽 어야 합 니 다.거꾸로 읽 기 때 문 입 니 다.아 시 겠 습 니까?만약 당신 이 이 Sql 의 뜻 을 전혀 이해 할 수 없다 면,Sql 에 관 한 지식 을 악 보 해 주 십시오.아래 의 코드 는 데이터베이스 에서 데 이 터 를 읽 는 것 입 니 다.저 는 앞의 몇 편 에서 상세 한 설명 을 했 습 니 다.ajax 페이지 가 여기 서 끝 났 습 니 다!알림:<!-\#include file="Conn.asp"->Conn.asp 는 제 데이터베이스 링크 파일 입 니 다.특별한 것 은 없습니다.직접 작성 할 수 있 을 것 입 니 다.인터넷 에 도 기 존 코드 가 많 습 니 다.이번에 읽 은 데이터베이스 시트 이름 은:page 입 니 다.table 필드 는 각각 ID(자동 번호),content(데이터 내용)는 오늘 여기까지 입 니 다.모 르 는 점 이 있 으 면 ajax 기술 교류 군:110167482 를 추가 하 십시오.

좋은 웹페이지 즐겨찾기