Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2023-06-13 09:14:11 时间
/**////<summary>
///生成带CDATA的节点
///</summary>
///<paramname="xDocument">XmlDocument</param>
///<paramname="elementName">元素名称</param>
///<paramname="cdataValue">CDATA值</param>
///<returns>XmlElement</returns>
publicstaticXmlElementCreateXmlNodeCDATA(XmlDocumentxDocument,stringelementName,stringcdataValue)
{
try
{
XmlElementxElement=xDocument.CreateElement(elementName);
XmlCDataSectioncdata=xDocument.CreateCDataSection(cdataValue);
xElement.AppendChild(cdata);
returnxElement;//返回
}
catch(Exceptionex)
{
throwex;
}
}
Helper#regionHelper
/**////<summary>
///创建Ajax返回信息
///</summary>
///<paramname="result"></param>
privatevoidCreateResponse(stringresult)
{
XmlDocumentxDocument=newXmlDocument();
XmlDeclarationdeclare=xDocument.CreateXmlDeclaration("1.0","UTF-8","yes");
XmlElementroot=xDocument.CreateElement("root");
XmlElementeleResponse=CreateXmlNodeCDATA(xDocument,"response",result);
root.AppendChild(eleResponse);
xDocument.AppendChild(declare);
xDocument.AppendChild(root);
ResponseXML(xDocument);
System.Web.HttpContext.Current.Response.End();
}
/**////<summary>
///向页面输出xml内容
///</summary>
///<paramname="xmlnode">xml内容</param>
privatevoidResponseXML(XmlDocumentxmlNode)
{
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>
///<paramname="xDocument">XmlDocument</param>
///<paramname="elementName">元素名称</param>
///<paramname="cdataValue">CDATA值</param>
///<returns>XmlElement</returns>
publicstaticXmlElementCreateXmlNodeCDATA(XmlDocumentxDocument,stringelementName,stringcdataValue)
{
try
{
XmlElementxElement=xDocument.CreateElement(elementName);
XmlCDataSectioncdata=xDocument.CreateCDataSection(cdataValue);
xElement.AppendChild(cdata);
returnxElement;//返回
}
catch(Exceptionex)
{
throwex;
}
}
Helper#regionHelper
/**////<summary>
///创建Ajax返回信息
///</summary>
///<paramname="result"></param>
privatevoidCreateResponse(stringresult)
{
XmlDocumentxDocument=newXmlDocument();
XmlDeclarationdeclare=xDocument.CreateXmlDeclaration("1.0","UTF-8","yes");
XmlElementroot=xDocument.CreateElement("root");
XmlElementeleResponse=CreateXmlNodeCDATA(xDocument,"response",result);
root.AppendChild(eleResponse);
xDocument.AppendChild(declare);
xDocument.AppendChild(root);
ResponseXML(xDocument);
System.Web.HttpContext.Current.Response.End();
}
/**////<summary>
///向页面输出xml内容
///</summary>
///<paramname="xmlnode">xml内容</param>
privatevoidResponseXML(XmlDocumentxmlNode)
{
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代码
<scriptlanguage="javascript"type="text/javascript"><!--
varxmlhttp;
functioncreateXMLHttpRequest()//为xmlhttp创建实例
{
if(window.ActiveXObject)
xmlhttp=newActiveXObject("Microsoft.XMLHttp");
elseif(window.XMLHttpRequest)
{
xmlhttp=newXMLHttpRequest();
}
}
functionstateRequest(vr1)//状态请求
{
//alert("看来已经执行了stateRequest了");
createXMLHttpRequest();//引用xmlhttp实例
xmlhttp.onreadystatechange=handleStateChange;//在请求状态发生改变时调用此方法
xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);
xmlhttp.send(null);
}
functionhandleStateChange()
{
//alert("看来已经执行了handleStateChange()了");
vardivRet=document.getElementById("ret");
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
vartext=GetText();
divRet.innerHTML=text;
}
}
else
divRet.innerHTML="<imgsrc="\"src="\""images/loading.gif\"alt=\"数据加载中\"/><b>数据加载中</b>";
}
functionGetText()
{
varxmlDoc=xmlhttp.responseXML;
//alert(xmlDoc.toString());
if(xmlDoc==null)
{
//alert("执行到这里了吗");
return"暂无数据！";
}
varrequestNode=xmlDoc.getElementsByTagName("response")[0];
varnode=requestNode.firstChild.nodeValue;
//alert(node);
returnnode
}
//--></script>
<scriptlanguage="javascript"type="text/javascript"><!--
varxmlhttp;
functioncreateXMLHttpRequest()//为xmlhttp创建实例
{
if(window.ActiveXObject)
xmlhttp=newActiveXObject("Microsoft.XMLHttp");
elseif(window.XMLHttpRequest)
{
xmlhttp=newXMLHttpRequest();
}
}
functionstateRequest(vr1)//状态请求
{
//alert("看来已经执行了stateRequest了");
createXMLHttpRequest();//引用xmlhttp实例
xmlhttp.onreadystatechange=handleStateChange;//在请求状态发生改变时调用此方法
xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);
xmlhttp.send(null);
}
functionhandleStateChange()
{
//alert("看来已经执行了handleStateChange()了");
vardivRet=document.getElementById("ret");
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
vartext=GetText();
divRet.innerHTML=text;
}
}
else
divRet.innerHTML="<imgsrc="\"src="\""images/loading.gif\"alt=\"数据加载中\"/><b>数据加载中</b>";
}
functionGetText()
{
varxmlDoc=xmlhttp.responseXML;
//alert(xmlDoc.toString());
if(xmlDoc==null)
{
//alert("执行到这里了吗");
return"暂无数据！";
}
varrequestNode=xmlDoc.getElementsByTagName("response")[0];
varnode=requestNode.firstChild.nodeValue;
//alert(node);
returnnode
}
//--></script>
说明：第一个函数createXMLHttpRequest用来创建XMLHttpRequest对象，关于该对象的详细说明可以参考相关文章，现在只要明白当我们使用http请求发送数据，并使用xml来传递数据时要用到该对象，声明好后我们就可以在下面使用了
第二个函数是用来发送http请求，一般情况下url都带有参数，通过xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);这句话我们可以看出来是向Ajax.aspx发送带参数的请求，Ajax.aspx捕获此参数，然后根据此参数在数据库中执行查询，具体处理过程我们下面细说。
在这个函数中我们还要注意一句话viewplaincopytoclipboardprint?
xmlhttp.onreadystatechange=handleStateChange;//在请求状态发生改变时调用此方法
xmlhttp.onreadystatechange=handleStateChange;//在请求状态发生改变时调用此方法
因为xmlhttp对象在执行的过程中要分为几个阶段，每个阶段都对应不同的状态值：0表示初始化，1表示正在加载，，2表示已加载，3表示交互中，4表示完成
所以上面那段代码表示只要xmlhttp的对象的状态发生变化就执行handleStateChange方法，它具体实现的功能如下：
这个方法首先找到显示数据的个div标签（ret），然后判断xmlhttp的执行状态，当状态值变成4并且xmlhttp.status==200(status是服务器的http状态码200对应OK404对应NotFound，如果你对xmlhttprequest对象不是很熟，建议你先熟悉一下)
显然当xmlhttp.onready==4并且xmlhttp.stauts==200说明已经在服务器端把所有的数据读出来了，此时数据放在一个xml文件中，这个xml文件是我们在服务器端生成的。
程序执行到现在已经万事俱备了，现在只欠从浏览器中读取这个xml文件了。这时要注意，也就是下面我们要说的最后一个函数GetText()
这个函数首先告诉浏览器我们要读取是个xml对象（当然你也可以设置成字符串格式的，例如：varxmlDoc=xmlhttp.responseText）;我们之所以把数据集设置成xml格式是因为此时它可以被解析为一个DOM对象，这样我们在下面对它的处理就相当灵活了。
到现在我们已经把客户端的代码说完了，下面说一下服务器端的执行过程，这个过程是在Ajax.aspx的后置代码中完成的
1.首先我们在Page_Load事件中获取url中的参数，该参数从AjaxTest6.aspx中发送。然后根据此参数执行查询，具体代码我就不再详细解释，大家一看就明白，代码如下：
privatestaticreadonlystringsql="server=xxx;database=xxx;uid=sa;pwd=xxx";
protectedvoidPage_Load(objectsender,EventArgse)
{
stringid=Request.QueryString["cateid"];
System.Threading.Thread.Sleep(2000);
GetTitle(Convert.ToInt32(id));
}
privateDataTableGetLogs(intcateid)
{
using(SqlConnectioncon=newSqlConnection(sql))
{
con.Open();
stringselect="SELECTId,CateId,LogTitleFROMLogsWHERECateId="+cateid;
SqlDataAdaptersda=newSqlDataAdapter(select,con);
DataTabledt=newDataTable();
sda.Fill(dt);
con.Close();
returndt;
}
}
publicvoidGetTitle(intid)
{
DataTabledt=GetLogs(id);
StringBuildersb=newStringBuilder();
if(dt!=null&&dt.Rows.Count>0)
{
for(inti=0;i<dt.Rows.Count;i++)
{
sb.AppendLine(dt.Rows[i][2].ToString());
}
CreateResponse(sb.ToString());
}
}
privatestaticreadonlystringsql="server=xxx;database=xxx;uid=sa;pwd=xxx";
2protectedvoidPage_Load(objectsender,EventArgse)
3{
4stringid=Request.QueryString["cateid"];
5System.Threading.Thread.Sleep(2000);
6GetTitle(Convert.ToInt32(id));
7}
8
9privateDataTableGetLogs(intcateid)
{
using(SqlConnectioncon=newSqlConnection(sql))
{
con.Open();
stringselect="SELECTId,CateId,LogTitleFROMLogsWHERECateId="+cateid;
SqlDataAdaptersda=newSqlDataAdapter(select,con);
DataTabledt=newDataTable();
sda.Fill(dt);
con.Close();
returndt;
}
}
publicvoidGetTitle(intid)
{
DataTabledt=GetLogs(id);
StringBuildersb=newStringBuilder();
if(dt!=null&&dt.Rows.Count>0)
{
for(inti=0;i<dt.Rows.Count;i++)
{
sb.AppendLine(dt.Rows[i][2].ToString());
}
CreateResponse(sb.ToString());
}
}
说明：通过GetTitle（intid）可以看出，我把从库里读出的数据转换成字符串交给CreateResponse方法（这里可能不太合适，因为当数据量大时可能不太安全），下面就是关于把数据转化成xml文件的操作
相关文章
- JavaScript Array的map方法
- ScriptSrc.net：快速复制常用 JavaScript 库
- MongoDB 使用.NET开发充分利用数据库性能（mongodb.net）
- javascript setinterval的缺陷详解编程语言
- Redis从入门到精通：.NET实现指南（redis.net书籍）
- VB.NET构建多层数据库应用：使用MSSQL（vb.net mssql）
- .net下的数据库连接SQLServer驱动在.NET平台下的数据库连接简明介绍（sqlserver驱动在）
- Net与Oracle构建连接的数据价值（.net 链oracle）
- NET环境下操作Oracle数据库的技巧（.net操作oracle）
- 数据使用NET改变Oracle数据库的奥秘（net修改oracle）
- CMySQL与NET技术融会贯通（c mysql .net）
- Net调用MySQL技术实践（.net 调用mysql）
- NET操作MySQL数据库快速入门（.net读写mysql）
- NET环境下MySQL数据库的使用实践（.net支持mysql吗）
- Net和MySQL互相受益的强大组合（.net 与mysql）
- javascript函数使用说明
- Javascript类库的顶层对象名用户体验分析
- javascript事件冒泡详解和捕获、阻止方法
- JavaScript中的函数重载深入理解