AJAX制作JSON格式的实时更新数据的方法

之前有写过这样的文章，但是出现了几个问题，第一，如果每秒都像数据库发送请求势必会造成服务器的压力过大，第二，如果使用JS的话，是不可以取得系统时间的，因为JS运行在客户端，所以只能取得客户端时间，

如此的话，就需要在后台计算好时间差，然后前台得到时间差进行倒计时计算，并且更新数据

JS代码如下：

var i = 0;
var ballNum = "";
var flag = true;
var timer_showCountDown = null;
var leftTime;

function showLeftTime(){
ShowCountDown(leftTime);
}

/*-------------------------倒计时------------------------*/
function ShowCountDown(sysTime) {
console.warn(sysTime);
var minute, second;
if (isNaN(leftTime)) {
leftTime = sysTime;
} else {
leftTime = sysTime;
}
minute = Math.floor(leftTime / (1000 * 60)) % 60;//分
second = Math.floor(leftTime / 1000) % 60;//秒
//把分钟和秒钟如果是一位数就变为两位数
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
//如果倒计时为负数，就设置为00：00
if (leftTime < 0) {
//$("#dendtime").html("00" + ":" + "00");//倒计时的时间，M表示分钟，S表示秒钟

} else {
$("#dendtime").html(minute + ":" + second);//倒计时的时间，M表示分钟，S表示秒钟
}
leftTime = (parseInt(leftTime) - 1000).toString();
}
/*-------------------------倒计时 end------------------------*/

/*-------------------------显示开奖结果------------------------*/
function showWinNum(msg) {
$("#dendtime").html("00" + ":" + "00");//倒计时的时间，M表示分钟，S表示秒钟

var numb1 = msg[0].getName.split("");//把期号分解成数组

var numb2 = "";
//把期号重新拆分处理
for (var i = 0; i < numb1.length; i++) {
numb2 = numb1[numb1.length - i - 1] + " " + numb2;
}
numb2 = numb2.substring(0, numb2.length - 1);//得到新的期号

var numb3 = msg[0].getInfo.split(" ");//把球号分解成数组
//这里暂时把跑号码球的方法变为直接显示号码球
$("#num1").html("<li class=\"mt15\">" + numb3[0] + "</li>");
$("#num2").html("<li class=\"mt15\">" + numb3[1] + "</li>");
$("#num3").html("<li class=\"mt15\">" + numb3[2] + "</li>");
$("#num4").html("<li class=\"mt15\">" + numb3[3] + "</li>");
$("#num5").html("<li class=\"mt15\">" + numb3[4] + "</li>");
var numb4 = "";
//把球号重新拆分处理
for (var i = 0; i < numb3.length; i++) {
numb4 = numb3[numb3.length - i - 1] + "----------------------------------------------------" + numb4;
}

numb4 = numb4.substring(0, numb4.length - 1);//得到新的球号
ballNum = msg[0].getInfo;//将数据库里面取到的号码球的值存入一个变量

$("#num").html(msg[0].getName);//期号
$("#nextNum").html(msg[0].getNum);//下一期的期号
//后台运行语音报号
setTimeout(play("第" + numb2 + "期开奖号码是" + numb4 + "，感谢您的关注"), 10);
}
/*-------------------------显示开奖结果 end------------------------*/

/*-------------------------语音报号------------------------*/
swfobject.embedSWF("Share/sampleDemo.swf", "sampleDemo", "0", "0", "9.0.0", "Share/expressInstall.swf");
function play(c) {
var item = {};
item.text = c;
swfobject.getObjectById("sampleDemo").onSynthsize(item);
}
/*-------------------------语音报号 end------------------------*/

function setTimeOutPost() {
$.ajax({
type: "post",
url: "/Lottery/DoDataMethod/GetKLCData.ashx",
dataType: "json",
async: true,
success:
function (msg) {
leftTime = msg[0].getSysTime;
//首先倒计时
if (timer_showCountDown != null) {
clearInterval(timer_showCountDown);
}
timer_showCountDown = setInterval(showLeftTime, 1000);

//如果开奖结果有变化，则重新显示并报号
if (ballNum != msg[0].getInfo) {
showWinNum(msg);
}

//10秒调用一次AJAX方法更新数据
setTimeout(setTimeOutPost, 10000);
}
,
error: function (req) {
//alert(req.readyState);//出错时提示出错状态
}
});
}
window.onload = function () {
setTimeOutPost();
}

后台代码如下：

context.Response.ContentType = "application/json";

string[] Info = new string[10];
string ConStr = ConfigurationManager.AppSettings["ConnectionString"].ToString();
//得到上期开出的数据
string GetDate = @"
SELECT
TOP 1
[ID]
,[LotteryID]
,[Name]
,[StartTime]
,[EndTime]
,[ChaseExecuted]
,[IsOpened]
,[WinLotteryNumber]
,[OpenOperatorID]
,[State]
,[StateUpdateTime]
,[OpenAffiche]
FROM [T_Isuses]
WHERE EndTime<getdate() and WinLotteryNumber<>'' and [IsOpened]=1
ORDER BY [EndTime] desc
";

//得到本期的时间
string GetNowTime = @"
SELECT
TOP 1
[ID]
,[LotteryID]
,[Name]
,[StartTime]
,[EndTime]
,[ChaseExecuted]
,[IsOpened]
,[WinLotteryNumber]
,[OpenOperatorID]
,[State]
,[StateUpdateTime]
,[OpenAffiche]
FROM [T_Isuses]
WHERE IsOpened=0 and EndTime>(
SELECT
TOP 1
[EndTime]
FROM [T_Isuses]
WHERE EndTime<getdate() and WinLotteryNumber<>'' and [IsOpened]=1 and LotteryID=79
ORDER BY [EndTime] desc
) and LotteryID=79 order by Name
";

using (SqlConnection conn = new SqlConnection(ConStr))
{
conn.Open();
SqlCommand comm = new SqlCommand(GetDate, conn);
SqlDataReader reader = comm.ExecuteReader();

while (reader.Read())
{
Info[0] = reader["WinLotteryNumber"].ToString();
Info[1] = reader["Name"].ToString();
Info[2] = (Convert.ToInt32(Info[1].ToString().Substring(7, 2)) + 1).ToString();
if(Info[2].Length<=1)
{
Info[2] = "0" + Info[2];
}
}
reader.Close();
}
using (SqlConnection Nowconn = new SqlConnection(ConStr))
{
Nowconn.Open();
SqlCommand nowComm = new SqlCommand(GetNowTime, Nowconn);
SqlDataReader NowReader = nowComm.ExecuteReader();
while (NowReader.Read())
{
Info[3] = NowReader["EndTime"].ToString();
}
NowReader.Close();
}
TimeSpan dtime = Convert.ToDateTime(Info[3]) - Convert.ToDateTime(System.DateTime.Now);//开奖时间减去系统时间
var outTime = (dtime.Minutes * 60000) + (dtime.Seconds * 1000) + 278000;//结果换算成毫秒数
string obj = "[{\"getInfo\":\"" + Info[0] + "\",\"getName\":\"" + Info[1] + "\",\"getNum\":\"" + Info[2] + "\",\"getSysTime\":\"" + outTime + "\"}]";
context.Response.Write(obj);

需要注意的是JSON格式的数据返回的时候要带中括号，不然前台页面会找不到数据的