Javascript+XMLHttpRequest+asp.net無重新整理讀取資料庫資料

複製代碼 代碼如下:/**//// <summary>
/// 產生帶CDATA的節點
/// </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>
/// 建立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內容
/// </summary>
/// <param name="xmlnode">xml內容</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的節點
/// </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>
/// 建立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內容
/// </summary>
/// <param name="xmlnode">xml內容</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的話題網上已經很多很多了，但好多都是利用控制項開源架構來實現，特別是vs2008更是整合了好多ajax控制項，把ajax的執行過程封裝的嚴嚴實實。本人也用過這些架構和控制項，感覺就是爽。但是近來心血來潮，想看看ajax到底是如何執行的，就想自己動手實現一下，正好也鍛煉一下我的js水平。廢話少說，如題，我們看一下執行過程。
1.這次實現總共用了兩個頁面：AjaxTest6.aspx和Ajax.aspx
　　其中AjaxTest6.aspx是發起請求的頁面，Ajax.aspx擷取AjaxTest6.aspx的請求，並進行處理的頁面。
　　處理過程：（1）AjaxTest6.aspx發起http請求--->（2）Ajax.aspx擷取url中的參數，根據此參數在資料庫中執行查詢操作並返回結果（資料集） --->（3）把返回的資料集進行xml處理通過response輸出。注意現在輸出資料的格式是xml ---（4）AjaxTest6.aspx獲得Ajax.aspx輸出xml資料並顯示
2.AjaxTest6.aspx中的js代碼 複製代碼 代碼如下:< script language="javascript" type="text/javascript"><!--
var xmlhttp;
function createXMLHttpRequest() //為xmlhttp建立執行個體
{
if(window.ActiveXObject)
xmlhttp=new ActiveXObject('Microsoft.XMLHttp');
else if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
}
function stateRequest(vr1)//狀態請求
{
//alert('看來已經執行了stateRequest了');
createXMLHttpRequest();//引用xmlhttp執行個體
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態發生改變時調用此方法
xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);
xmlhttp.send(null);
}
function handleStateChange()
{
//alert("看來已經執行了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=\"資料載入中\" /><b>資料載入中</b>";
}
function GetText()
{
var xmlDoc=xmlhttp.responseXML;
//alert(xmlDoc.toString());
if(xmlDoc == null)
{
//alert("執行到這裡了嗎");
return "暫無資料！";
}
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建立執行個體
{
if(window.ActiveXObject)
xmlhttp=new ActiveXObject('Microsoft.XMLHttp');
else if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
}
function stateRequest(vr1)//狀態請求
{
//alert('看來已經執行了stateRequest了');
createXMLHttpRequest();//引用xmlhttp執行個體
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態發生改變時調用此方法
xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);
xmlhttp.send(null);
}
function handleStateChange()
{
//alert("看來已經執行了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=\"資料載入中\" /><b>資料載入中</b>";
}
function GetText()
{
var xmlDoc=xmlhttp.responseXML;
//alert(xmlDoc.toString());
if(xmlDoc == null)
{
//alert("執行到這裡了嗎");
return "暫無資料！";
}
var requestNode=xmlDoc.getElementsByTagName("response")[0];
var node=requestNode.firstChild.nodeValue;
//alert(node);
return node
}
// --></ script>

說明：第一個函數createXMLHttpRequest用來建立XMLHttpRequest對象，關於該對象的詳細 說明可以參考相關文章，現在只要明白當我們使用http請求發送資料，並使用xml來傳遞資料時要用到該對象，聲明好後我們就可以在下面使用了
第二個函數是 用來發送http請求，一般情況下url都帶有參數，通過 xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);這句話我們可以看出來是向Ajax.aspx發送帶參數的請求，Ajax.aspx捕獲此參數，然後根據此參數在資料庫中執行查詢，具體處理過程我們下面細說。
在這個函數中我們還要注意一句話view plaincopy to clipboardprint?
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態發生改變時調用此方法
xmlhttp.onreadystatechange=handleStateChange;//在請求狀態發生改變時調用此方法
因為xmlhttp對象在執行的過程中要分為幾個階段，每個階段都對應不同的狀態值：0 表示初始化，1表示正在載入，，2表示已載入，3表示互動中，4表示完成
所以上面那段代碼錶示只要xmlhttp的對象的狀態發生變化就執行 handleStateChange方法，它具體實現的功能如下：
這個方法首先找到顯示資料的個div標籤（ret），然後判斷xmlhttp的執行狀態，當狀態值變成4並且xmlhttp.status==200 (status是伺服器的http狀態代碼 200對應OK 404對應Not Found，如果你對xmlhttprequest對象不是很熟，建議你先熟悉一下)
顯然當xmlhttp.onready==4並且xmlhttp.stauts==200說明已經在伺服器端把所有的資料讀出來了，此時資料放在一個xml檔案中，這個xml檔案是我們在伺服器端產生的。
程式執行到現在已經萬事俱備了，現在只欠從瀏覽器中讀取這個xml檔案了。這時要注意，也就是下面我們要說的最後一個函數GetText()
這個函數首先告訴瀏覽器我們要讀取是個xml對象（當然你也可以設定成字串格式的，例如：var xmlDoc=xmlhttp.responseText）;我們之所以把資料集設定成xml格式是因為此時它可以被解析為一個DOM對象，這樣我們在下面對它的處理就相當靈活了。
到現在我們已經把用戶端的代碼說完了，下面說一下伺服器端的執行過程，這個過程是在Ajax.aspx的後置代碼中完成的
1.首先我們在Page_Load事件中擷取url中的參數，該參數從AjaxTest6.aspx中發送。然後根據此參數執行查詢，具體代碼我就不再詳細解釋，大家一看就明白，代碼如下： 複製代碼 代碼如下: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）可以看出，我把從庫裡讀出的資料轉換成字串交給CreateResponse方法（這裡可能不太合適，因為當資料量大時可能不太安全），下面就是關於把資料轉化成xml檔案的操作