ajax读取新闻列表的loading效果

来源：互联网发布：软件著作权材料编辑：程序博客网时间：2024/06/05 22:52

我们会经常遇到这样一种效果：先在页面上显示“loading”或者一个圆圈在那转，过几秒钟，会在上述两个地方显示出新闻的列表。下面的内容就是关于这种效果的实现。

1、前态页面 Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<%@ Register TagPrefix="UC1" TagName="TopBar" Src="UserControl/TopBar.ascx"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

</div>

<a id="viewpost1_TitleUrl" href="#">新闻主题列表</a>

</div>

</div>

</form>

</body>

</html>

2、js文件 ReadNewInfo.js

// JScript 文件

///createtime 2007-3-27

///author wangxin

var StartShowGif="<center><br /><img src='Images/loading.gif' /></center>";

var Start_Circle="<center><br /><img src='Images/load2.gif' /></center>";

var Title_Para=""; // 主题参数

var Content_Para=""; // 内容参数

function Page_init()

{

//if(GetJsValue!=null && GetJsValue!="")

// {

// S_Read_Content(GetJsValue);

//}

//else

//{

// Read_ContentList(GetJsValue); //显示新闻内容

//}

//Read_WebSiteList(); //显示网站列表

Read_TitleList(); //显示新闻主题

}

//-----------------------------------------

//显示网站列表

//-----------------------------------------

//显示新闻主题时间

function Read_TitleList()

{

document.getElementById("ShowTitleList").innerHTML=StartShowGif; //显示新闻主题

Default.Server_Read_TitleList(Title_Para,CallBack_Read_TitleList);

}

function CallBack_Read_TitleList(res)

{

if(!res.error && res.value !="")

{

document.getElementById("ShowTitleList").innerHTML = res.value;

}

else

{

document.getElementById("ShowTitleList").innerHTML = "读取数据出错！";

}

//-----------------------------------------

3、后台文件 Default.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Mysqlserver;

using System.Text;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

AjaxPro.Utility.RegisterTypeForAjax(typeof(Default));

}

string Server_Read_TitleList(WebID)根据参数读取某网站下的主题列表

}