Javascript+XMLHttpRequest+asp.net無刷新讀取數(shù)據(jù)庫數(shù)據(jù)

更新時間：2009年08月09日 01:19:59 作者：

 
/**//// <summary> 
/// 生成帶CDATA的節(jié)點 
/// </summary> 
/// <param name="xDocument">XmlDocument</param> 
/// <param name="elementName">元素名稱</param> 
/// <param name="cdataValue">CDATA值</param> 
/// <returns>XmlElement</returns> 
public static XmlElement CreateXmlNodeCDATA(XmlDocument xDocument, string elementName, string cdataValue) 
{ 
try 
{ 
XmlElement xElement = xDocument.CreateElement(elementName); 
XmlCDataSection cdata = xDocument.CreateCDataSection(cdataValue); 
xElement.AppendChild(cdata); 
return xElement;//返回 
} 
catch (Exception ex) 
{ 
throw ex; 
} 
} 
Helper#region Helper 
/**//// <summary> 
/// 創(chuàng)建Ajax返回信息 
/// </summary> 
/// <param name="result"></param> 
private void CreateResponse(string result) 
{ 
XmlDocument xDocument = new XmlDocument(); 
XmlDeclaration declare = xDocument.CreateXmlDeclaration("1.0", "UTF-8", "yes"); 
XmlElement root = xDocument.CreateElement("root"); 
XmlElement eleResponse = CreateXmlNodeCDATA(xDocument, "response", result); 
root.AppendChild(eleResponse); 
xDocument.AppendChild(declare); 
xDocument.AppendChild(root); 
ResponseXML(xDocument); 
System.Web.HttpContext.Current.Response.End(); 
} 
/**//// <summary> 
/// 向頁面輸出xml內(nèi)容 
/// </summary> 
/// <param name="xmlnode">xml內(nèi)容</param> 
private void ResponseXML(XmlDocument xmlNode) 
{ 
System.Web.HttpContext.Current.Response.Expires = 0; 
System.Web.HttpContext.Current.Response.Clear(); 
System.Web.HttpContext.Current.Response.Cache.SetNoStore(); 
System.Web.HttpContext.Current.Response.ContentType = "text/xml"; 
System.Web.HttpContext.Current.Response.Write(xmlNode.OuterXml); 
System.Web.HttpContext.Current.Response.End(); 
} 
/**//// <summary> 
/// 生成帶CDATA的節(jié)點 
/// </summary> 
/// <param name="xDocument">XmlDocument</param> 
/// <param name="elementName">元素名稱</param> 
/// <param name="cdataValue">CDATA值</param> 
/// <returns>XmlElement</returns> 
public static XmlElement CreateXmlNodeCDATA(XmlDocument xDocument, string elementName, string cdataValue) 
{ 
try 
{ 
XmlElement xElement = xDocument.CreateElement(elementName); 
XmlCDataSection cdata = xDocument.CreateCDataSection(cdataValue); 
xElement.AppendChild(cdata); 
return xElement;//返回 
} 
catch (Exception ex) 
{ 
throw ex; 
} 
} 
Helper#region Helper 
/**//// <summary> 
/// 創(chuàng)建Ajax返回信息 
/// </summary> 
/// <param name="result"></param> 
private void CreateResponse(string result) 
{ 
XmlDocument xDocument = new XmlDocument(); 
XmlDeclaration declare = xDocument.CreateXmlDeclaration("1.0", "UTF-8", "yes"); 
XmlElement root = xDocument.CreateElement("root"); 
XmlElement eleResponse = CreateXmlNodeCDATA(xDocument, "response", result); 
root.AppendChild(eleResponse); 
xDocument.AppendChild(declare); 
xDocument.AppendChild(root); 
ResponseXML(xDocument); 
System.Web.HttpContext.Current.Response.End(); 
} 
/**//// <summary> 
/// 向頁面輸出xml內(nèi)容 
/// </summary> 
/// <param name="xmlnode">xml內(nèi)容</param> 
private void ResponseXML(XmlDocument xmlNode) 
{ 
System.Web.HttpContext.Current.Response.Expires = 0; 
System.Web.HttpContext.Current.Response.Clear(); 
System.Web.HttpContext.Current.Response.Cache.SetNoStore(); 
System.Web.HttpContext.Current.Response.ContentType = "text/xml"; 
System.Web.HttpContext.Current.Response.Write(xmlNode.OuterXml); 
System.Web.HttpContext.Current.Response.End(); 
} 

關(guān)于Ajax的話題網(wǎng)上已經(jīng)很多很多了，但好多都是利用控件開源框架來實現(xiàn)，特別是vs2008更是集成了好多ajax控件，把ajax的執(zhí)行過程封裝的嚴(yán)嚴(yán)實實。本人也用過這些框架和控件，感覺就是爽。但是近來心血來潮，想看看ajax到底是如何執(zhí)行的，就想自己動手實現(xiàn)一下，正好也鍛煉一下我的js水平。廢話少說，如題，我們看一下執(zhí)行過程。
1.這次實現(xiàn)總共用了兩個頁面：AjaxTest6.aspx和Ajax.aspx
　　其中AjaxTest6.aspx是發(fā)起請求的頁面，Ajax.aspx獲取AjaxTest6.aspx的請求，并進(jìn)行處理的頁面。
　　處理過程：（1）AjaxTest6.aspx發(fā)起http請求--->（2）Ajax.aspx獲取url中的參數(shù)，根據(jù)此參數(shù)在數(shù)據(jù)庫中執(zhí)行查詢操作并返回結(jié)果（數(shù)據(jù)集） --->（3）把返回的數(shù)據(jù)集進(jìn)行xml處理通過response輸出。注意現(xiàn)在輸出數(shù)據(jù)的格式是xml ---（4）AjaxTest6.aspx獲得Ajax.aspx輸出xml數(shù)據(jù)并顯示
2.AjaxTest6.aspx中的js代碼

復(fù)制代碼代碼如下:

 
< script language="javascript" type="text/javascript"><!-- 
var xmlhttp; 
function createXMLHttpRequest() //為xmlhttp創(chuàng)建實例 
{ 
if(window.ActiveXObject) 
xmlhttp=new ActiveXObject('Microsoft.XMLHttp'); 
else if(window.XMLHttpRequest) 
{ 
xmlhttp=new XMLHttpRequest(); 
} 
} 
function stateRequest(vr1)//狀態(tài)請求 
{ 
//alert('看來已經(jīng)執(zhí)行了stateRequest了'); 
createXMLHttpRequest();//引用xmlhttp實例 
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態(tài)發(fā)生改變時調(diào)用此方法 
xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true); 
xmlhttp.send(null); 
} 
function handleStateChange() 
{ 
//alert("看來已經(jīng)執(zhí)行了handleStateChange()了"); 
var divRet=document.getElementById("ret"); 
if(xmlhttp.readyState == 4) 
{ 
if(xmlhttp.status == 200) 
{ 
var text= GetText(); 
divRet.innerHTML=text; 
} 
} 
else 
divRet.innerHTML="<img src="\" src="\""images/loading.gif\" alt=\"數(shù)據(jù)加載中\(zhòng)" /><b>數(shù)據(jù)加載中</b>"; 
} 
function GetText() 
{ 
var xmlDoc=xmlhttp.responseXML; 
//alert(xmlDoc.toString()); 
if(xmlDoc == null) 
{ 
//alert("執(zhí)行到這里了嗎"); 
return "暫無數(shù)據(jù)！"; 
} 
var requestNode=xmlDoc.getElementsByTagName("response")[0]; 
var node=requestNode.firstChild.nodeValue; 
//alert(node); 
return node 
} 
// --></ script> 
< script language="javascript" type="text/javascript"><!-- 
var xmlhttp; 
function createXMLHttpRequest() //為xmlhttp創(chuàng)建實例 
{ 
if(window.ActiveXObject) 
xmlhttp=new ActiveXObject('Microsoft.XMLHttp'); 
else if(window.XMLHttpRequest) 
{ 
xmlhttp=new XMLHttpRequest(); 
} 
} 
function stateRequest(vr1)//狀態(tài)請求 
{ 
//alert('看來已經(jīng)執(zhí)行了stateRequest了'); 
createXMLHttpRequest();//引用xmlhttp實例 
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態(tài)發(fā)生改變時調(diào)用此方法 
xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true); 
xmlhttp.send(null); 
} 
function handleStateChange() 
{ 
//alert("看來已經(jīng)執(zhí)行了handleStateChange()了"); 
var divRet=document.getElementById("ret"); 
if(xmlhttp.readyState == 4) 
{ 
if(xmlhttp.status == 200) 
{ 
var text= GetText(); 
divRet.innerHTML=text; 
} 
} 
else 
divRet.innerHTML="<img src="\" src="\""images/loading.gif\" alt=\"數(shù)據(jù)加載中\(zhòng)" /><b>數(shù)據(jù)加載中</b>"; 
} 
function GetText() 
{ 
var xmlDoc=xmlhttp.responseXML; 
//alert(xmlDoc.toString()); 
if(xmlDoc == null) 
{ 
//alert("執(zhí)行到這里了嗎"); 
return "暫無數(shù)據(jù)！"; 
} 
var requestNode=xmlDoc.getElementsByTagName("response")[0]; 
var node=requestNode.firstChild.nodeValue; 
//alert(node); 
return node 
} 
// --></ script> 

說明：第一個函數(shù)createXMLHttpRequest用來創(chuàng)建XMLHttpRequest對象，關(guān)于該對象的詳細(xì) 說明可以參考相關(guān)文章，現(xiàn)在只要明白當(dāng)我們使用http請求發(fā)送數(shù)據(jù)，并使用xml來傳遞數(shù)據(jù)時要用到該對象，聲明好后我們就可以在下面使用了
第二個函數(shù)是用來發(fā)送http請求，一般情況下url都帶有參數(shù)，通過 xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);這句話我們可以看出來是向Ajax.aspx發(fā)送帶參數(shù)的請求，Ajax.aspx捕獲此參數(shù)，然后根據(jù)此參數(shù)在數(shù)據(jù)庫中執(zhí)行查詢，具體處理過程我們下面細(xì)說。
在這個函數(shù)中我們還要注意一句話view plaincopy to clipboardprint?
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態(tài)發(fā)生改變時調(diào)用此方法
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態(tài)發(fā)生改變時調(diào)用此方法
因為xmlhttp對象在執(zhí)行的過程中要分為幾個階段，每個階段都對應(yīng)不同的狀態(tài)值：0 表示初始化，1表示正在加載，，2表示已加載，3表示交互中，4表示完成
所以上面那段代碼表示只要xmlhttp的對象的狀態(tài)發(fā)生變化就執(zhí)行 handleStateChange方法，它具體實現(xiàn)的功能如下：
這個方法首先找到顯示數(shù)據(jù)的個div標(biāo)簽（ret），然后判斷xmlhttp的執(zhí)行狀態(tài)，當(dāng)狀態(tài)值變成4并且xmlhttp.status==200 (status是服務(wù)器的http狀態(tài)碼 200對應(yīng)OK 404對應(yīng)Not Found，如果你對xmlhttprequest對象不是很熟，建議你先熟悉一下)
顯然當(dāng)xmlhttp.onready==4并且xmlhttp.stauts==200說明已經(jīng)在服務(wù)器端把所有的數(shù)據(jù)讀出來了，此時數(shù)據(jù)放在一個xml文件中，這個xml文件是我們在服務(wù)器端生成的。
程序執(zhí)行到現(xiàn)在已經(jīng)萬事俱備了，現(xiàn)在只欠從瀏覽器中讀取這個xml文件了。這時要注意，也就是下面我們要說的最后一個函數(shù)GetText()
這個函數(shù)首先告訴瀏覽器我們要讀取是個xml對象（當(dāng)然你也可以設(shè)置成字符串格式的，例如：var xmlDoc=xmlhttp.responseText）;我們之所以把數(shù)據(jù)集設(shè)置成xml格式是因為此時它可以被解析為一個DOM對象，這樣我們在下面對它的處理就相當(dāng)靈活了。
到現(xiàn)在我們已經(jīng)把客戶端的代碼說完了，下面說一下服務(wù)器端的執(zhí)行過程，這個過程是在Ajax.aspx的后置代碼中完成的
1.首先我們在Page_Load事件中獲取url中的參數(shù)，該參數(shù)從AjaxTest6.aspx中發(fā)送。然后根據(jù)此參數(shù)執(zhí)行查詢，具體代碼我就不再詳細(xì)解釋，大家一看就明白，代碼如下：

復(fù)制代碼代碼如下:

 
private static readonly string sql = "server=xxx;database=xxx;uid=sa;pwd=xxx"; 
protected void Page_Load(object sender, EventArgs e) 
{ 
string id=Request.QueryString["cateid"]; 
System.Threading.Thread.Sleep(2000); 
GetTitle(Convert.ToInt32(id)); 
} 

private DataTable GetLogs(int cateid) 
{ 
using (SqlConnection con = new SqlConnection(sql)) 
{ 
con.Open(); 
string select = "SELECT Id,CateId,LogTitle FROM Logs WHERE CateId = " + cateid; 
SqlDataAdapter sda = new SqlDataAdapter(select, con); 
DataTable dt = new DataTable(); 
sda.Fill(dt); 
con.Close(); 
return dt; 
} 
} 

public void GetTitle(int id) 
{ 
DataTable dt = GetLogs(id); 
StringBuilder sb = new StringBuilder(); 
if (dt != null && dt.Rows.Count>0) 
{ 
for (int i = 0; i < dt.Rows.Count;i++ ) 
{ 
sb.AppendLine(dt.Rows[i][2].ToString()); 
} 
CreateResponse(sb.ToString()); 
} 
} 
private static readonly string sql = "server=xxx;database=xxx;uid=sa;pwd=xxx"; 
2 protected void Page_Load(object sender, EventArgs e) 
3 { 
4 string id=Request.QueryString["cateid"]; 
5 System.Threading.Thread.Sleep(2000); 
6 GetTitle(Convert.ToInt32(id)); 
7 } 
8 
9 private DataTable GetLogs(int cateid) 
{ 
using (SqlConnection con = new SqlConnection(sql)) 
{ 
con.Open(); 
string select = "SELECT Id,CateId,LogTitle FROM Logs WHERE CateId = " + cateid; 
SqlDataAdapter sda = new SqlDataAdapter(select, con); 
DataTable dt = new DataTable(); 
sda.Fill(dt); 
con.Close(); 
return dt; 
} 
} 

public void GetTitle(int id) 
{ 
DataTable dt = GetLogs(id); 
StringBuilder sb = new StringBuilder(); 
if (dt != null && dt.Rows.Count>0) 
{ 
for (int i = 0; i < dt.Rows.Count;i++ ) 
{ 
sb.AppendLine(dt.Rows[i][2].ToString()); 
} 
CreateResponse(sb.ToString()); 
} 
} 

說明：通過GetTitle（int id）可以看出，我把從庫里讀出的數(shù)據(jù)轉(zhuǎn)換成字符串交給CreateResponse方法（這里可能不太合適，因為當(dāng)數(shù)據(jù)量大時可能不太安全），下面就是關(guān)于把數(shù)據(jù)轉(zhuǎn)化成xml文件的操作

您可能感興趣的文章: