Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据


Posted in Javascript onAugust 09, 2009
/**//// <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文件的操作
Javascript 相关文章推荐
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 #Javascript
jQuery 解析xml文件
Aug 09 #Javascript
ext 代码生成器
Aug 07 #Javascript
JavaScript 的方法重载效果
Aug 07 #Javascript
JQuery 小练习(实例代码)
Aug 07 #Javascript
js正确获取元素样式详解
Aug 07 #Javascript
JavaScript 乱码问题
Aug 06 #Javascript
You might like
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
js实现星星海特效的示例
2020/09/28 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python实现彩票系统
2020/06/28 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python中的With语句的使用及原理
2020/07/29 Python
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
大学同学聚会邀请函
2014/01/29 职场文书
优秀家长自荐材料
2014/08/26 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
公司业务员管理制度
2015/08/05 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle