DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX學習之Atlas框架之定時無刷新讀取數據庫
AJAX學習之Atlas框架之定時無刷新讀取數據庫
編輯:AJAX詳解      日期:2016/12/30 17:50:32
通過上次那個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讓我非常的郁悶。但是它能直接調用服務器端的方法這點倒是很好(雖然我自己沒有調試通那個代碼,只實現了簡單的字符返回,沒有實現數據庫的讀取).下一個應用我們將用服務器端的控件來實現這個應用. 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved