JQuery는 간단한 서버 폴링 효과를 구현합니다. example_jquery
- WBOY원래의
- 2016-05-16 15:07:151203검색
이 기사의 예에서는 JQuery가 간단한 서버 폴링 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
포럼에 여러 번 입장하면 읽지 않은 이메일 수를 묻는 메시지가 나타나거나, 입장 후 완료되지 않은 작업 수를 OA 시스템에서 묻는 메시지가 나타납니다. 가끔씩 메시지가 표시되지만 구현 방법은 다음과 같습니다. 실제로 jquery를 사용하는 것은 상대적으로 간단할 것입니다. 핵심 요소는 json 형식 구문 분석과 setInterval() 함수입니다. 함께 구현해 볼까요:
먼저 default.aspx 페이지는 다음과 같습니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>服务器轮询</title>
<link href="Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/src/grid.base.js" type="text/javascript"></script>
<script type="text/javascript">
function showUnreadNews()
{
$(document).ready(function() {
$.ajax({
type: "GET",
url: "Result.ashx",
dataType: "json",
success: function(msg) {
//alert(msg);
$.each(msg, function(id, title) {
$("#news").append("<a href=detailnews.aspx?id=" + id + ">" + title + "</a><br>");
});
}
});
});
}
setInterval('showUnreadNews()',5000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="news">
</div>
</form>
</body>
</html>
위 코드는 주로 ajax 함수를 사용하여 Result.ashx 페이지에 ajax 요청을 보낸 다음 Result.ashx 페이지에서 json 데이터를 반환하고 이를 구문 분석합니다. 마지막으로 setInterval() 함수를 사용하여 폴링 효과. 특정 Result.ashx 페이지 코드는 다음과 같습니다.
<%@ WebHandler Language="C#" Class="Result" %>
using System;
using System.Web;
using System.Text;
using System.Data.SQLite;
using System.Data;
public class Result : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string sql = "select * from Content where NewsFlag=0";
DataTable dt = new DataTable();
using (SQLiteConnection conn = new SQLiteConnection(InitSQLite().Connection))
{
SQLiteDataAdapter sda = new SQLiteDataAdapter(sql, conn);
sda.Fill(dt);
}
string jsonStr = GetJson(dt);
context.Response.ContentType = "text/json";
context.Response.Buffer = true;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
context.Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "");
context.Response.CacheControl = "no-cache";
context.Response.Write(jsonStr);
}
public static string GetJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append( dt.Rows[i]["NewsID"].ToString() + ":" +"\""+ dt.Rows[i]["NewsTitle"].ToString()+"\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("}");
return jsonBuilder.ToString();
}
public Sqlite InitSQLite()
{
Sqlite _sqLite = new Sqlite();
_sqLite.ConnetStringBuilder.DataSource = AppDomain.CurrentDomain.BaseDirectory + "News.db3";
_sqLite.ConnetStringBuilder.Pooling = true;
_sqLite.ConnetStringBuilder.FailIfMissing = true;
_sqLite.ConnetStringBuilder.UseUTF16Encoding = true;
return _sqLite;
}
public bool IsReusable {
get {
return false;
}
}
}
데이터베이스는 sqlite를 사용하므로 구체적인 사용법은 직접 확인하시기 바랍니다. 이 처리 파일에서 가장 중요한 것은 데이터 테이블 데이터에서 형식에 맞는 json 데이터를 생성하는 것입니다.
이러한 방식으로 시스템이 마침내 구현됩니다. 5초마다 홈페이지는 최신 데이터를 얻기 위해 서버를 폴링합니다.
더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 특별한 주제를 확인할 수 있습니다. "JQuery 전환 효과 및 기술 요약", "jQuery 드래그 효과 및 기술 요약", "JQuery 확장 기술 요약", "jQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용법 요약 " 및 "jQuery 공통 플러그인 및 사용법 요약 "
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.