ASP.NET 시 나 웨 이 보 하 라 를 모방 하여 더 많은 데이터 폭포 흐름 효 과 를 불 러 옵 니 다.
시작 하기 전에 먼저 실현 의 기본 원 리 를 말 해라.어둠 이 끝까지 내 려 갈 때 js 는 스크롤 바 의 위 치 를 판단 하여 아래쪽 에 도착 하여 js 방법 을 촉발 하고 jquery 의 ajax 방법 을 실행 하 며 배경 일반 처리 프로그램 어둠 ashx 파일 에 데이터 원본 을 요청 하여 json 형식의 데이터 원본 을 얻 을 수 있 습 니 다.그리고 제 이 슨 데이터 원본 을 옮 겨 다 니 며 li 탭 을 연결 하고 페이지 에 채 웁 니 다.
우선,간단 한 html 페이지 를 만 들 겠 습 니 다.페이지 에 jquery 라 이브 러 리 를 도입 한 다음 jquery 의 ajax 방법 으로 배경 프로그램,즉 일반 처리 프로그램 페이지 를 요청 해 야 합 니 다.이 따 일반 처리 프로그램 페이지 ashx 파일 에 방법 을 쓰 고 전단 페이지 에 필요 한 뉴스 목록 데이터 원본 을 되 돌려 드 리 겠 습 니 다.데이터 원본 의 형식,제 가 사용 하 는 제 이 슨 형식 입 니 다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
#main {
margin: 10px auto;
width: 990px;
}
#ListContent {
color: white;
position: relative;
}
#Listinfo {
width: 850px;
float: left;
background-color: #071A37;
position: relative;
padding-bottom: 50px;
}
#Listinfo li {
list-style: none;
width: 800px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
}
#LoadingMsg {
display: none;
margin: 0 0;
padding: 0 0;
height: 25px;
line-height: 25px;
width: 800px;
position: absolute;
left: 48px;
text-align: center;
vertical-align: middle;
bottom: 20px;
}
#LoadingMsg span {
margin: 0 0;
padding: 0 0;
background: url(loading.gif) left center no-repeat;
padding-left: 30px;
height: 25px;
line-height: 25px;
}
</style>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
var PageNum = 0;
$(window).scroll(function () {
var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());//
if ($(document).height() <= totalheight)// ，
{
$('#LoadingMsg').css('display', 'block');
var randcode = 1 + Math.round(Math.random() * 9999);
$.ajax({
type: "Get",
url: "Handler.ashx",
dataType: "json",
data: "PageNum=" + PageNum + "&randcode" + randcode,
success: function (data) {
$.each(data, function (i, item) {
if (item.Num == '-1') {
$('#LoadingMsg').html(' ');
$('#LoadingMsg').css('display', 'block');
}
else {
$("#Listinfo").append("<li>" + item.Num + ".<font color='red'>" + item.Ntitle + "</font></li>");//
}
})
if (data.length > 0) {
PageNum++;
}
//$('#LoadingMsg').css('display', 'none');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(" ， ：" + errorThrown);
}
});
}
});
})
</script>
</head>
<body>
<div id="main">
<div id="ListContent">
<ul id="Listinfo">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<div style="clear: both"></div>
<div id="LoadingMsg">
<span> ， ...</span>
</div>
</div>
</div>
</body>
</html>
다음 에 우 리 는 데이터 베 이 스 를 만 들 고 데이터 베 이 스 를 연결 하 며 데 이 터 를 읽 어야 한다.이렇게 하 는 것 은 너무 번 거 로 워 서 나 는 직접 사용자 정의 List 데이터 로 시범 을 보 였 다.저 는 평소에 데이터 베 이 스 를 위해 모든 표 에 실체 류 를 만들어 서 데이터 베 이 스 를 암시 하 는 표,필드 를 만 드 는 습관 이 있 습 니 다.여기 서 우 리 는 뉴스 Info 의 실체 클래스,즉 일반적인 3 층 구조 프로그램의 Model 안의 클래스 를 만 듭 니 다.동시에,우 리 는 데이터 원본 으로 그 에 게 데 이 터 를 사용자 정의 했다.실제 개발 환경 에서 이것 은 모두 DAL 에서 데이터 베 이 스 를 연결 하여 데 이 터 를 읽 는 것 이다.나 는 단지 시범 으로 쓰 일 뿐 이 니,너희들 이 알 기 를 바란다.나 는 실체 클래스 에서 매개 변 수 를 가 진 GetListByPn 이라는 방법 을 정의 했다.이 매개 변수 int 형식의 pn 매개 변 수 는 페이지 를 내 려 오 는 횟수 로 이해 할 수 있 습 니 다.예 를 들 어 당신 이 처음 페이지 밑 으로 끌 어 올 렸 을 때 이 매개 변 수 는 1 이 고 우 리 는 앞의 N 조 데 이 터 를 읽 습 니 다.두 번 째 로 페이지 밑 으로 끌 어 내 렸 을 때 이 매개 변 수 는 2 입 니 다.그러면 우 리 는 N 조 에서 2N 조 사이 의 N 조 데 이 터 를 읽 습 니 다.이것 이 바로 저장 과정 페이지 의 원리 입 니 다.이 방법 은 뉴스 인 포 의 List 집합 을 되 돌려 주 었 습 니 다.이것 이 바로 우리 가 전단 페이지 에 전달 하 는 데이터 원본 입 니 다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// NewsInfo
/// </summary>
public class NewsInfo
{
public NewsInfo()
{
//
// TODO:
//
}
public int Num { get; set; }
public string Ntitle { get; set; }
/// <summary>
///
/// </summary>
/// <param name="pn"></param>
/// <returns></returns>
public static List<NewsInfo> GetListByPn(int pn)
{
List<NewsInfo> NewList = new List<NewsInfo>();
NewList.Add(new NewsInfo { Num = 0, Ntitle = " 3500 B 3 " });
NewList.Add(new NewsInfo { Num = 1, Ntitle = " CAPTCHA！ CAPTCHA " });
NewList.Add(new NewsInfo { Num = 2, Ntitle = " ？ " });
NewList.Add(new NewsInfo { Num = 3, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 4, Ntitle = " 3~5 10 " });
NewList.Add(new NewsInfo { Num = 5, Ntitle = "Oculus CEO： " });
NewList.Add(new NewsInfo { Num = 6, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 7, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 8, Ntitle = "P2P “ ” ？ " });
NewList.Add(new NewsInfo { Num = 9, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 10, Ntitle = " YouTube Chrome " });
NewList.Add(new NewsInfo { Num = 11, Ntitle = " “ ” Uber " });
NewList.Add(new NewsInfo { Num = 12, Ntitle = " : A " });
NewList.Add(new NewsInfo { Num = 13, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 14, Ntitle = " “ ” Uber " });
NewList.Add(new NewsInfo { Num = 15, Ntitle = " 1 C " });
NewList.Add(new NewsInfo { Num = 16, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 17, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 18, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 19, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 20, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 21, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 22, Ntitle = " reCaptchas" });
NewList.Add(new NewsInfo { Num = 23, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 24, Ntitle = "《 Style》 ： " });
NewList.Add(new NewsInfo { Num = 25, Ntitle = " : A " });
NewList.Add(new NewsInfo { Num = 26, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 27, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 28, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 29, Ntitle = "Skype Wire" });
NewList.Add(new NewsInfo { Num = 30, Ntitle = " ：2014 Q3 " });
NewList.Add(new NewsInfo { Num = 31, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 32, Ntitle = " IPO 58 " });
NewList.Add(new NewsInfo { Num = 33, Ntitle = " O2O " });
NewList.Add(new NewsInfo { Num = 34, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 35, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 36, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 37, Ntitle = " “ ” " });
NewList.Add(new NewsInfo { Num = 38, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 39, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 40, Ntitle = "725 " });
NewList.Add(new NewsInfo { Num = 41, Ntitle = " PK ？" });
NewList.Add(new NewsInfo { Num = 42, Ntitle = " 0.3 5000 " });
NewList.Add(new NewsInfo { Num = 43, Ntitle = " ： “ ”" });
NewList.Add(new NewsInfo { Num = 44, Ntitle = " ？" });
NewList.Add(new NewsInfo { Num = 45, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 46, Ntitle = " ：“ ” " });
NewList.Add(new NewsInfo { Num = 47, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 48, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 49, Ntitle = " ：“ ” ？" });
NewList.Add(new NewsInfo { Num = 50, Ntitle = " B50 " });
NewList.Add(new NewsInfo { Num = 51, Ntitle = " 11 SUV " });
NewList.Add(new NewsInfo { Num = 52, Ntitle = "MPV 50% " });
NewList.Add(new NewsInfo { Num = 53, Ntitle = " \"Velite\"" });
NewList.Add(new NewsInfo { Num = 54, Ntitle = "[ ] 2.6 " });
NewList.Add(new NewsInfo { Num = 55, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 56, Ntitle = "11 " });
NewList.Add(new NewsInfo { Num = 57, Ntitle = " .." });
NewList.Add(new NewsInfo { Num = 58, Ntitle = " ： 10 " });
NewList.Add(new NewsInfo { Num = 59, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 60, Ntitle = " “ ”？ " });
NewList.Add(new NewsInfo { Num = 61, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 62, Ntitle = " 2014 .." });
NewList.Add(new NewsInfo { Num = 63, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 64, Ntitle = " 9 ， " });
NewList.Add(new NewsInfo { Num = 65, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 66, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 67, Ntitle = "“ “ “ “ " });
NewList.Add(new NewsInfo { Num = 68, Ntitle = " " });
NewList.Add(new NewsInfo { Num = 69, Ntitle = " ： " });
NewList.Add(new NewsInfo { Num = 70, Ntitle = " 【 】" });
NewList.Add(new NewsInfo { Num = 71, Ntitle = " ： “ ” ？" });
//IEnumerable<NewsInfo> query = from n in NewList where (n.Num >= 10 * pn && n.Num < 10 * (pn + 1)) select n;
List<NewsInfo> ListQuery = (from n in NewList where (n.Num >= 10 * pn && n.Num < 10 * (pn + 1)) select n).ToList();
return ListQuery;
}
}
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Threading;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int pn = 0;
if (context.Request.QueryString["PageNum"] != null)
{
if (context.Request.QueryString["PageNum"].ToString().Trim() != string.Empty)
{
if (int.TryParse(context.Request.QueryString["PageNum"].ToString().Trim(), out pn))
{
pn = int.Parse(context.Request.QueryString["PageNum"].ToString().Trim());
}
}
}
List<NewsInfo> ListQuery = NewsInfo.GetListByPn(pn);
string ResultJson = "[{\"Num\":-1,\"Ntitle\":\" \"}]";
if (ListQuery.Count > 1)
{
ResultJson = Obj2Json<List<NewsInfo>>(ListQuery);
}
Thread.Sleep(5000);// ， 5 ，
context.Response.Write(ResultJson);
}
/// <summary>
/// List Json
/// </summary>
/// <typeparam name="T"></typeparam>
/// <param name="t"></param>
/// <returns></returns>
public static string Obj2Json<T>(T t)
{
try
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(t.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, t);
return Encoding.UTF8.GetString(ms.ToArray());
}
}
catch
{
return null;
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
자,이 간단 한 드 롭 다운 으로 더 많은 데 이 터 를 불 러 오 는 효 과 는 만들어 진 셈 입 니 다.시 나 웨 이 보 같은 높 은 수준 은 아니 지만 일상 적 으로 필요 한 효과 에 대처 할 수 있다.무엇 보다 이 를 통 해 기본 원 리 를 알 리 는 것 이 중요 하 다.
이상 이 바로 본문의 전체 내용 이 니 여러분 이 이해 하고 여러분 에 게 도움 이 되 기 를 바 랍 니 다.
좋은 웹페이지 즐겨찾기
