ASP.NET中使用WebService异步加载数据显示到页面

之前在写自己的网页中使用了此项异步数据处理技术目的是提高用户体验，配合WebService将这种异步处理数据变得很轻松同时还可以分享给其他地方调用那么下来我们就看看实现部分的代码其实是简单的效果如图中红色区域信息属于WS异步加载：

 

定义WebService：给方法打上WebMethod标签

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using BLL;

namespace WebUI.WebService
{
    /// <summary>
    /// WebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public DataTable getArticleInfo(int cid)
        {
            //根据新闻留言ID获取信息
            CommentManager commentManager = new CommentManager();
            DataSet ds = commentManager.GetList("c_ProductID='" + cid + "' order by c_ID desc");
            return ds.Tables[0];

        }

        [WebMethod]
        public DataTable getNewsTop10()
        {
            //盯梢最新10条
            ProductManager prodctManager = new ProductManager();
            DataSet dsn1 = prodctManager.GetList(10, "", "c_ID");
            return dsn1.Tables[0];
        }

    }
}

 

artegory.js 文件中的代码如下：

      /*********获取被盯梢文章**********/
      WebUI.WebService.WebService.getNewsTop10(top10); 此方法 命名空间下WebService文件的一个getNewsTop10方法我们在页面加载的时候会执行JS文件中的代码 方法中的top10 调用下面的JS方法利用返回的数据进行DOM加载，这里你也可以改为JQUERY来处理数据还可以将数据知己输出为JSON格式更方便传输。

 /*********获取被盯梢文章回调函数**********/
 function top10(result)
{
    var colid = result.columns[2].name;
    var colname = result.columns[16].name;
    var rows = result.rows;
    sbuilder = new Sys.StringBuilder();
    //循环加载数据
    for (index = 0; index < rows.length; ++index) {
        sbuilder.append(String.format("<div id='LYimg'><div id='TT'><a href='Article/ArticleContent.aspx'>{0}</a></div><ul><li class='RD'>发烧度：{1} C° </li></ul></div>", rows[index][colid], rows[index][colname]));
    }
    
  $get("Con_Right_News").innerHTML = sbuilder.toString();
}