|
|
/**//// <summary>
/// 生成帶CDATA的節(jié)點(diǎn)
/// </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>
/// 向頁(yè)面輸出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é)點(diǎn)
/// </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>
/// 向頁(yè)面輸出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)很多很多了，但好多都是利用控件開(kāi)源框架來(lái)實(shí)現(xiàn)，特別是vs2008更是集成了好多ajax控件，把a(bǔ)jax的執(zhí)行過(guò)程封裝的嚴(yán)嚴(yán)實(shí)實(shí)。本人也用過(guò)這些框架和控件，感覺(jué)就是爽。但是近來(lái)心血來(lái)潮，想看看ajax到底是如何執(zhí)行的，就想自己動(dòng)手實(shí)現(xiàn)一下，正好也鍛煉一下我的js水平。廢話少說(shuō)，如題，我們看一下執(zhí)行過(guò)程。
1.這次實(shí)現(xiàn)總共用了兩個(gè)頁(yè)面：AjaxTest6.ASPx和Ajax.ASPx
其中AjaxTest6.ASPx是發(fā)起請(qǐng)求的頁(yè)面，Ajax.ASPx獲取AjaxTest6.ASPx的請(qǐng)求，并進(jìn)行處理的頁(yè)面。
處理過(guò)程：（1）AjaxTest6.ASPx發(fā)起http請(qǐng)求--->（2）Ajax.ASPx獲取url中的參數(shù)，根據(jù)此參數(shù)在數(shù)據(jù)庫(kù)中執(zhí)行查詢操作并返回結(jié)果（數(shù)據(jù)集） --->（3）把返回的數(shù)據(jù)集進(jìn)行xml處理通過(guò)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)建實(shí)例
{
if(window.ActiveXObject)
xmlhttp=new ActiveXObject('Microsoft.XMLHttp');
else if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
}
function stateRequest(vr1)//狀態(tài)請(qǐng)求
{
//alert('看來(lái)已經(jīng)執(zhí)行了stateRequest了');
createXMLHttpRequest();//引用xmlhttp實(shí)例
xmlhttp.onreadystatechange=handleStateChange;//在請(qǐng)求狀態(tài)發(fā)生改變時(shí)調(diào)用此方法
xmlhttp.open("GET","Tools/Ajax.ASPx?cateid="+vr1,true);
xmlhttp.send(null);
}
function handleStateChange()
{
//alert("看來(lái)已經(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ù)加載中/" /><b>數(shù)據(jù)加載中</b>";
}
function GetText()
{
var xmlDoc=xmlhttp.responseXML;
//alert(xmlDoc.toString());
if(xmlDoc == null)
{
//alert("執(zhí)行到這里了嗎");
return "暫無(wú)數(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)建實(shí)例
{
if(window.ActiveXObject)
xmlhttp=new ActiveXObject('Microsoft.XMLHttp');
else if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
}
function stateRequest(vr1)//狀態(tài)請(qǐng)求
{
//alert('看來(lái)已經(jīng)執(zhí)行了stateRequest了');
createXMLHttpRequest();//引用xmlhttp實(shí)例
xmlhttp.onreadystatechange=handleStateChange;//在請(qǐng)求狀態(tài)發(fā)生改變時(shí)調(diào)用此方法
xmlhttp.open("GET","Tools/Ajax.ASPx?cateid="+vr1,true);
xmlhttp.send(null);
}
function handleStateChange()
{
//alert("看來(lái)已經(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ù)加載中/" /><b>數(shù)據(jù)加載中</b>";
}
function GetText()
{
var xmlDoc=xmlhttp.responseXML;
//alert(xmlDoc.toString());
if(xmlDoc == null)
{
//alert("執(zhí)行到這里了嗎");
return "暫無(wú)數(shù)據(jù)！";
}
var requestNode=xmlDoc.getElementsByTagName("response")[0];
var node=requestNode.firstChild.nodeValue;
//alert(node);
return node
}
// --></ script>
說(shuō)明：第一個(gè)函數(shù)createXMLHttpRequest用來(lái)創(chuàng)建XMLHttpRequest對(duì)象，關(guān)于該對(duì)象的詳細(xì) 說(shuō)明可以參考相關(guān)文章，現(xiàn)在只要明白當(dāng)我們使用http請(qǐng)求發(fā)送數(shù)據(jù)，并使用xml來(lái)傳遞數(shù)據(jù)時(shí)要用到該對(duì)象，聲明好后我們就可以在下面使用了
第二個(gè)函數(shù)是 用來(lái)發(fā)送http請(qǐng)求，一般情況下url都帶有參數(shù)，通過(guò) xmlhttp.open("GET","Tools/Ajax.ASPx?cateid="+vr1,true);這句話我們可以看出來(lái)是向Ajax.ASPx發(fā)送帶參數(shù)的請(qǐng)求，Ajax.ASPx捕獲此參數(shù)，然后根據(jù)此參數(shù)在數(shù)據(jù)庫(kù)中執(zhí)行查詢，具體處理過(guò)程我們下面細(xì)說(shuō)。
在這個(gè)函數(shù)中我們還要注意一句話view plaincopy to clipboardprint?
xmlhttp.onreadystatechange=handleStateChange;//在請(qǐng)求狀態(tài)發(fā)生改變時(shí)調(diào)用此方法
xmlhttp.onreadystatechange=handleStateChange;//在請(qǐng)求狀態(tài)發(fā)生改變時(shí)調(diào)用此方法
因?yàn)閤mlhttp對(duì)象在執(zhí)行的過(guò)程中要分為幾個(gè)階段，每個(gè)階段都對(duì)應(yīng)不同的狀態(tài)值：0 表示初始化，1表示正在加載，，2表示已加載，3表示交互中，4表示完成
所以上面那段代碼表示只要xmlhttp的對(duì)象的狀態(tài)發(fā)生變化就執(zhí)行 handleStateChange方法，它具體實(shí)現(xiàn)的功能如下：
這個(gè)方法首先找到顯示數(shù)據(jù)的個(gè)div標(biāo)簽（ret），然后判斷xmlhttp的執(zhí)行狀態(tài)，當(dāng)狀態(tài)值變成4并且xmlhttp.status==200 (status是服務(wù)器的http狀態(tài)碼 200對(duì)應(yīng)OK 404對(duì)應(yīng)Not Found，如果你對(duì)xmlhttprequest對(duì)象不是很熟，建議你先熟悉一下)
顯然當(dāng)xmlhttp.onready==4并且xmlhttp.stauts==200說(shuō)明已經(jīng)在服務(wù)器端把所有的數(shù)據(jù)讀出來(lái)了，此時(shí)數(shù)據(jù)放在一個(gè)xml文件中，這個(gè)xml文件是我們?cè)?a href=/yuedu/fuwuqi/ target=_blank class=infotextkey>服務(wù)器端生成的。
程序執(zhí)行到現(xiàn)在已經(jīng)萬(wàn)事俱備了，現(xiàn)在只欠從瀏覽器中讀取這個(gè)xml文件了。這時(shí)要注意，也就是下面我們要說(shuō)的最后一個(gè)函數(shù)GetText()
這個(gè)函數(shù)首先告訴瀏覽器我們要讀取是個(gè)xml對(duì)象（當(dāng)然你也可以設(shè)置成字符串格式的，例如：var xmlDoc=xmlhttp.responseText）;我們之所以把數(shù)據(jù)集設(shè)置成xml格式是因?yàn)榇藭r(shí)它可以被解析為一個(gè)DOM對(duì)象，這樣我們?cè)谙旅鎸?duì)它的處理就相當(dāng)靈活了。
到現(xiàn)在我們已經(jīng)把客戶端的代碼說(shuō)完了，下面說(shuō)一下服務(wù)器端的執(zhí)行過(guò)程，這個(gè)過(guò)程是在Ajax.ASPx的后置代碼中完成的
1.首先我們?cè)赑age_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());
}
}
說(shuō)明：通過(guò)GetTitle（int id）可以看出，我把從庫(kù)里讀出的數(shù)據(jù)轉(zhuǎn)換成字符串交給CreateResponse方法（這里可能不太合適，因?yàn)楫?dāng)數(shù)據(jù)量大時(shí)可能不太安全），下面就是關(guān)于把數(shù)據(jù)轉(zhuǎn)化成xml文件的操作
JavaScript技術(shù)：Javascript+XMLHttpRequest+asp.net無(wú)刷新讀取數(shù)據(jù)庫(kù)數(shù)據(jù)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
