管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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文件的操作

教程首页 更多教程