페이지가 스크롤될 때 서버에서 데이터를 로드하기 위해 AJAX와 결합된 jQuery

소개

텍스트는 스크롤 막대를 스크롤할 때 서버에서 데이터를 다운로드하는 방법을 보여줍니다. AJAX 기술을 사용하여 서버에서 데이터를 로드하면 페이지가 열릴 때 서버에서 한 화면의 데이터만 로드되므로 웹 애플리케이션의 성능을 향상시키는 데 도움이 될 수 있습니다. 더 많은 데이터가 필요할 때 스크롤 막대를 스크롤할 수 있습니다. 그런 다음 서버 측에서 로드합니다.
배경

스크롤바가 스크롤될 때 서버에서 데이터를 로드하는 코드를 작성하게 된 것은 Facebook이었습니다. 페이스북을 탐색하던 중 스크롤을 내리다 보면 서버의 새로운 데이터가 기존 데이터에 삽입되기 시작하는 것을 보고 놀랐습니다. 그러다가 C#을 사용하여 동일한 기능을 구현하는 것에 대해 인터넷에서 관련 정보를 검색했지만 C#을 사용하여 이 기능을 구현하는 것에 대한 기사나 블로그를 찾지 못했습니다. 물론 Java 및 PHP 구현에 관한 기사도 있습니다. 이 기사를 주의 깊게 읽은 후 C#으로 코드를 작성하기 시작했습니다. 내 C# 버전이 성공적으로 실행되었으므로 이를 공유해야겠다고 생각하여 이 게시물을 작성했습니다.

코드

단 몇 줄의 코드만으로 스크롤 시 로드할 수 있습니다. 페이지를 스크롤할 때 클라이언트는 WebMethod를 호출하고 클라이언트에 삽입할 콘텐츠를 반환합니다. 동시에 클라이언트에서는 스크롤 이벤트가 클라이언트 함수(document.ready)에 바인딩됩니다. 함수는 서버에서 데이터를 로드합니다. 아래에서 이 두 가지 서버 측 및 클라이언트 측 방법에 대해 자세히 설명하겠습니다.

서버 측 방법: 이 방법은 데이터베이스나 기타 데이터 소스에서 데이터를 얻고, 데이터가 삽입될 컨트롤의 형식에 따라 HTML 문자열을 생성하는 데 사용됩니다. 여기에 시퀀스 번호가 포함된 메시지를 추가했습니다.

[웹방법]

코드 복사 코드는 다음과 같습니다.

공개 정적 문자열 GetDataFromServer()
{
문자열 resp = string.Empty;
for(int i = 0; i <= 10; i )
{
resp = "

" " 이 콘텐츠는 동적으로 추가됩니다."
"스크롤하면 기존 콘텐츠로 이동합니다.

;
}
답장을 보내주세요;
}

데이터베이스에서 데이터를 로드하려면 다음과 같이 코드를 수정하면 됩니다.

[WebMethod]

코드 복사 코드는 다음과 같습니다.

公共静态字符串 GetDataFromServer()
    {
        DataSet ds = new DataSet();
 
        // 在这里设置连接字符串的值
        字符串 strConnectionString = ""; // 在此处插入您的连接字符串值
        SqlConnection con = new SqlConnection(strConnectionString);
 
        // 将选择命令值写入第一个参数
        SqlCommand 命令 = new SqlCommand("SELECT * FROM Person", con);
        SqlDataAdapter adp = new SqlDataAdapter(命令);
int retVal = adp.Fill(ds);
 
        字符串 resp = string.Empty;
for (int i = 1; i         {
            string strComment = string.Empty;
if (ds.Tables != null)
            {
if (ds.Tables[0] != null)
                {
if (ds.Tables[0].Rows.Count > 0)
                    {
if (ds.Tables[0].Rows.Count >= i - 1)
                        {
if (ds.Tables[0].Rows[i - 1][0] != DBNull.Value)
                            {
                                strComment = ds.Tables[0].Rows[i - 1][0].ToString();
                            }
                        }
                    }
                }
            }
            resp = "

" 计数器 " " strComment "

";
        }
返回响应；
    }

客户端方法：在客户端，我使用了document.ready方法，并且把div的scroll事件绑定到了该方法上。我使用了两个div元素，mainDiv和wrapperDiv，并且给mainDiv注册了scroll事件，把动态数据插入到wrapperDiv中。

$(document).ready(
function()
{
$contentLoadTriggered = false;
$("#mainDiv").scroll(
function()
{
if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() -
  $("#mainDiv").height()) &&
  $contentLoadTriggered == false)
  $contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax(
{
type: "POST",
url: "LoadOnScroll.aspx/GetDataFromServer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
},
error: function (x, e)
{
alert("The call to the server side failed. " +
x.responseText);
}
}
);
}
}
);
}
);

这里，用于检查滚动条是否已经移动到了底部，使用了下面的条件判断，
 

if($("#mainDiv").scrollTop() >=
 ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
  $contentLoadTriggered == false)

这个条件将判断滚动条是否已经到达底部，当它已经移动到了底部时，动态数据网格服务器端加载，并且插入wrapperDiv。把数据成功插入目标div元素的客户端脚本将在异步返回时执行。
 

success: function (msg)
{
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}

这里，你会注意到只有在用户移动滚动到了底部时，请求才会枢纽服务器端。

我粘贴了几张样图：
输出