|
|
/**//// <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();
}
關于Ajax的話題網(wǎng)上已經(jīng)很多很多了，但好多都是利用控件開源框架來實現(xiàn)，特別是vs2008更是集成了好多ajax控件，把ajax的執(zhí)行過程封裝的嚴嚴實實。本人也用過這些框架和控件，感覺就是爽。但是近來心血來潮，想看看ajax到底是如何執(zhí)行的，就想自己動手實現(xiàn)一下，正好也鍛煉一下我的js水平。廢話少說，如題，我們看一下執(zhí)行過程。
1.這次實現(xiàn)總共用了兩個頁面：AjaxTest6.ASPx和Ajax.ASPx
其中AjaxTest6.ASPx是發(fā)起請求的頁面，Ajax.ASPx獲取AjaxTest6.ASPx的請求，并進行處理的頁面。
處理過程：（1）AjaxTest6.ASPx發(fā)起http請求--->（2）Ajax.ASPx獲取url中的參數(shù)，根據(jù)此參數(shù)在數(shù)據(jù)庫中執(zhí)行查詢操作并返回結果（數(shù)據(jù)集） --->（3）把返回的數(shù)據(jù)集進行xml處理通過response輸出。注意現(xiàn)在輸出數(shù)據(jù)的格式是xml ---（4）AjaxTest6.ASPx獲得Ajax.ASPx輸出xml數(shù)據(jù)并顯示
2.AjaxTest6.ASPx中的js代碼
復制代碼 代碼如下:
< 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ù)加載中/" /><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ù)加載中/" /><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對象，關于該對象的詳細 說明可以參考相關文章，現(xiàn)在只要明白當我們使用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í)行查詢，具體處理過程我們下面細說。
在這個函數(shù)中我們還要注意一句話view plaincopy to clipboardprint?
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態(tài)發(fā)生改變時調(diào)用此方法
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態(tài)發(fā)生改變時調(diào)用此方法
因為xmlhttp對象在執(zhí)行的過程中要分為幾個階段，每個階段都對應不同的狀態(tài)值：0 表示初始化，1表示正在加載，，2表示已加載，3表示交互中，4表示完成
所以上面那段代碼表示只要xmlhttp的對象的狀態(tài)發(fā)生變化就執(zhí)行 handleStateChange方法，它具體實現(xiàn)的功能如下：
這個方法首先找到顯示數(shù)據(jù)的個div標簽（ret），然后判斷xmlhttp的執(zhí)行狀態(tài)，當狀態(tài)值變成4并且xmlhttp.status==200 (status是服務器的http狀態(tài)碼 200對應OK 404對應Not Found，如果你對xmlhttprequest對象不是很熟，建議你先熟悉一下)
顯然當xmlhttp.onready==4并且xmlhttp.stauts==200說明已經(jīng)在服務器端把所有的數(shù)據(jù)讀出來了，此時數(shù)據(jù)放在一個xml文件中，這個xml文件是我們在服務器端生成的。
程序執(zhí)行到現(xiàn)在已經(jīng)萬事俱備了，現(xiàn)在只欠從瀏覽器中讀取這個xml文件了。這時要注意，也就是下面我們要說的最后一個函數(shù)GetText()
這個函數(shù)首先告訴瀏覽器我們要讀取是個xml對象（當然你也可以設置成字符串格式的，例如：var xmlDoc=xmlhttp.responseText）;我們之所以把數(shù)據(jù)集設置成xml格式是因為此時它可以被解析為一個DOM對象，這樣我們在下面對它的處理就相當靈活了。
到現(xiàn)在我們已經(jīng)把客戶端的代碼說完了，下面說一下服務器端的執(zhí)行過程，這個過程是在Ajax.ASPx的后置代碼中完成的
1.首先我們在Page_Load事件中獲取url中的參數(shù)，該參數(shù)從AjaxTest6.ASPx中發(fā)送。然后根據(jù)此參數(shù)執(zhí)行查詢，具體代碼我就不再詳細解釋，大家一看就明白，代碼如下：
復制代碼 代碼如下:
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ù)轉換成字符串交給CreateResponse方法（這里可能不太合適，因為當數(shù)據(jù)量大時可能不太安全），下面就是關于把數(shù)據(jù)轉化成xml文件的操作
JavaScript技術：Javascript+XMLHttpRequest+asp.net無刷新讀取數(shù)據(jù)庫數(shù)據(jù)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
