AJAX学习之Atlas框架之定时无刷新读取数据库

ajax|定时|数据|数据库|刷新|无刷新

通过上次那个Hello,World的基本ATLAS程序的联系,对于ATLAS我们可能只有一大概的印象.那么我们有要开始实现我们的目标:定时无刷新的随机显示数据库中的一条数据和按下按钮来显示数据库中的一条数据.
方式:ASP.NET的客户端控件.(我们知道ASP.NET是用服务器端控件的.客户端的控件就是以前普通的HTML表单控件.对于服务器端的实现我们在下次解决.其实我们以前的实现方式都是基于客户端的实现方式如果要与ASP.NET结合我们就要换成另外一种方式,当然ATLAS是提供了服务器端控件以实现服务器端的AJAX应用.)
通过上次的那篇文章,我们知道其实ATLAS的AJAX实现方式是用一个客户端的JS代码加一个服务器端的Web Service(我觉的MICROSOFT就是会替自己考虑,建立一个ATLAS应用可以顺便利用下Web Service )
现在开始我们代码的书写.
页面代码: 
 程序代码

<form id="formrefresh" runat="server">
<div>
<div id="EngCnb"><div id="FamousDivb" class="AlDivb"><a href = "http://www.flysblog.com" target="_blank">天涯路远</a> --- 君在天涯,天涯在我心。 -----倾力打造 </div></div>

<div id="EngCn"><div id="FamousDiv" class="AlDiv">名人名言正在载入...</div></div>
<script type="text/javascript">
window.setTimeout("StartFamous()",1000);
</script>
<div><div id="Div1"><div id="Div2" class="AlDivb"> 
<input id="txtFamous" style="width: 500px" type="text" />
   
<input id="btnGet" type="button" value="获取名言" onclick = "DoSearch()"/></div></div>

</div>
</div>
</form>

部分页面的JS代码:

 程序代码

function StartFamous()
{
DoSearchTimer();
 window.setInterval("DoSearchTimer()",EngCTime*1000);

}
function DoSearchTimer()
{
Samples.AspNet.getFamousService.getFamous(OnRequestCompleteTimer);
}

function OnRequestCompleteTimer(result)
{
ChangeFamous(result);
}

function DoSearch()
{
//var SrchElem = document.getElementById("SearchKey");
Samples.AspNet.getFamousService.getFamous(OnRequestComplete);
}

function OnRequestComplete(result)
{
document.formrefresh.txtFamous.value = result;
}

照例我们新建一个Web Service代码如下

 程序代码

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.OleDb;

namespace Samples.AspNet
{
/// <summary>
/// HelloWorldService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class getFamousService : System.Web.Services.WebService
{

public getFamousService()
{

//如果使用设计的组件,请取消注释以下行 
//InitializeComponent(); 
}

[WebMethod]
public string getFamous()
{
//string inputString = Server.HtmlEncode(query);
//if (!String.IsNullOrEmpty(inputString))
//{
// return String.Format("Hello, you queried for {0}. The "
// + "current time is {1}", inputString, DateTime.Now);
//}
//else
//{
// return "The query string was null or empty";
//}
string db = Server.MapPath("famousDB/famous.mdb");
int uidd = 1;
OleDbDataReader rd = null;
OleDbConnection conn = null;
try
{
System.Random r = new Random();
uidd = r.Next(1,69);
string sql = "select Top 1 * from famous where id="+ uidd.ToString();
conn = new OleDbConnection(@"Provider=Microsoft.Jet.Oledb.4.0;Data Source=" + db + ";");
conn.Open();
OleDbCommand cmd = new OleDbCommand(sql, conn);
rd = cmd.ExecuteReader();
if(rd.HasRows)
{
rd.Read();
return rd[1].ToString();// Response.Write(@"<querys><Famous><![CDATA[" + rd[1].ToString() + @"]]></Famous></querys>");
} else {
return "null";//Response.Write(@"<querys><Famous><![CDATA[null]]></Famous></querys>");
}
}
finally
{
// always call Close when done reading.
rd.Close();
// always call Close when done reading.
conn.Close();
}

}

}
}

其实整个过程跟上次的那个Hello,world的ATLAS程序一模一样的。就是把Web Service中执行的函数换个内容.
到此你可以运行你建立的程序或者运行我提供的代码程序.你会发现实现的内容跟用自己建立的小型框架的效果一模一样.

总结
这个ATLAS的客户端应用,感觉MICROSOFT没有象AJAX.NET PRO的AJAX框架一样,实现客户端的JS代码直接调用服务器端的函数代码,而是通过了中介Web Service.虽然AJAX.NET PRO让我非常的郁闷。但是它能直接调用服务器端的方法这点倒是很好(虽然我自己没有调试通那个代码,只实现了简单的字符返回,没有实现数据库的读取).下一个应用我们将用服务器端的控件来实现这个应用. 

时间: 2024-10-26 22:31:02

AJAX学习之Atlas框架之定时无刷新读取数据库的相关文章

Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据_javascript技巧

复制代码 代码如下: /**//// <summary> /// 生成带CDATA的节点 /// </summary> /// <param name="xDocument">XmlDocument</param> /// <param name="elementName">元素名称</param> /// <param name="cdataValue">CDA

jquery+ajax+C#实现无刷新操作数据库数据的简单实例

 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容   我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页   页面中我们放置一个Div容器用来存

基于ajax实现点击加载更多无刷新载入到本页_AJAX相关

先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

基于ajax实现点击加载更多无刷新载入到本页

先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

CuteEditor5.0的安装及它与Ajax.net配合无刷新操作数据库!

ajax|数据|数据库|刷新|无刷新 CuteEditor真的是一款很好的web在线编辑器,但是5.0的安装和以前的版本有点不同,5.0的破解版的下载地址是:http://www.seaskyer.net,下载完后解下压缩吧,这个地球人都知道.我们在vs2005里面新建个web site吧.然后把CuteEditor添加到工具面板.我们在工具面板里面右键选择choose item,在出来的对话框里面选择browser,找到CuteEditor.dll,一路确定就可以拉.我们再添加个edit.as

jquery+ajax+C#实现无刷新操作数据库数据的简单实例_jquery

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页

ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的<li>或<table>列表而已,这时候XTemplate就显得很有用了. 本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能) 1.先做一些准备工作,写一个通用的类(改编自老张的PageData),用于WCF向ExtJs

【新手求助】有关在线编辑,页面无刷新对数据库中的数据进行操作.....

问题描述 如图所示:单击"编辑",显示"更新"和"取消","编辑"消失...同时姓名.年龄变为可输入状态对其进行更改.更改完成后显示"编辑"."取消"则不进行任何操作.要求页面无刷新+Jquery...在线等... 解决方案 解决方案二:在线等啊...各位大虾帮帮忙..解决方案三:使用一些第三方js库如:jqueryeasyui或者TrimPath解决方案四:引用1楼hchuser的回复

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望 为更好的运用这两天学到的Ajax的相关的知识,就做了个简单的在线网络聊天室. 思路 实现聊天室,基本上就是通过Ajax来传递数据,让PHP来实现对数据的差入和查找,再交给前端JavaScript实现页面的更新,达到即时聊天的功能. 消息显示区 消息显示区就是一个DIV块,我们会借助Ajax获取到服务器端信息