ajax读取新闻列表的loading效果

 

我们会经常遇到这样一种效果：先在页面上显示“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" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
< script  language ="javascript"  src ="JS/ReadNewInfo.js" ></ script >
     < title > 首页 </ title >
</ head >
< body  onload ="Page_init();" >
     < form  id ="form1"  runat ="server" >
     < div >< UC1:TopBar  id ="TopBar1"  runat ="server" ></ UC1:TopBar >
     </ div >
     < div  class ="post" >
     < div  class ="postTitle" >
         < a  id ="viewpost1_TitleUrl"  href ="#" > 新闻主题列表 </ a >
     </ div >
    
     < div  class ="postText"  id ="ShowTitleList" >< center >< br />< br />< br />< img  src ='Images/loading.gif'  /></ center ></ 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)根据参数读取某网站下的主题列表#region string Server_Read_TitleList(WebID)根据参数读取某网站下的主题列表
    [AjaxPro.AjaxMethod]
    public string Server_Read_TitleList(string WebID)
    ...{
        StringBuilder ReturnTitleList = new StringBuilder();
        string ReadSiteListSql = string.Empty;

        ReadSiteListSql = "select  top 10 NewsId,Title,Content,CreateTime,FilePath from inNews order by NewsId desc";

        SqlServerDataBase db = new SqlServerDataBase();//建立数据对象
        DataSet ds = db.Select(ReadSiteListSql, null);//选择更新后的浏览值
        //string[] GetArray = Mydb.GetSqlCmd_Array(Read_SiteList_Sql);
 
        ReturnTitleList.Append("<table width="85%" border="0" cellspacing="0" cellpadding="0"> ");

            if (ds != null)
            ...{
                for (int i = 0; i < ds.Tables[0].Rows.Count; i += 1)
                ...{
                    ReturnTitleList.Append("<tr><td>" + "<a href='NewsFiles/" + ds.Tables[0].Rows[i]["FilePath"] + "'>" + ds.Tables[0].Rows[i]["Title"] + "</a>" + "</td><td>" + ds.Tables[0].Rows[i]["CreateTime"] + "</td></tr>");
                }
                ReturnTitleList.Append("</table>");
                return ReturnTitleList.ToString();
            }
            else
            ...{
                return "数据正在更新中...";
            }
      }

    #endregion
}

 

代码应该不难，其中需要设置ajaxpro。在网上有搜索一下吧。