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 相关文章推荐
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
使用console进行性能测试
Apr 27 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
JavaScript 截取字符串代码实例
Sep 05 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php模板原理讲解
2013/11/13 PHP
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
Javascript学习指南
2014/12/01 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
js密码强度校验
2015/11/10 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Python中属性和描述符的正确使用
2016/08/23 Python
python下10个简单实例代码
2017/11/15 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python实现log日志的示例代码
2018/04/28 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
高三自我鉴定范文
2013/10/19 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
成绩单家长评语大全
2014/04/16 职场文书
竞赛口号大全
2014/06/16 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫