Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
发布时间:2024-01-17 17:32:18
/**//// <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文件的操作
猜你喜欢
- 1、配置环境支持python2和python3On Linux, Solaris, or FreeBSD, add the /usr/loc
- <script language="javascript">function chang
- 一、旧版本(1.0以下)的卷积函数:tf.nn.conv2d在tf1.0中,对卷积层重新进行了封装,比原来版本的卷积层有了很大的简化。con
- 前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专
- 使用 Python 进行数据处理的时候,常常会遇到判断一个数是否在一个区间内的操作。我们可以使用 if else 进行判断,但是,既然使用了
- 本文实例讲述了Python使用urllib2模块实现断点续传下载的方法。分享给大家供大家参考。具体分析如下:在使用HTTP协议进行下载的时候
- 用了很久的os.path,今天发现竟然还有这么好用的库,记录下来以便使用。1.调用库from pathlib import2.创建Path对
- python中eval和int的区别是什么?下面给大家介绍一下:1.eval()函数eval(<字符串>)能够以Python表达
- Python 基础教程之包和类的用法建立一个文件夹filePackage 在filePackage 文件夹内创建 __init__.py 有
- 这篇文章主要介绍了Python3如何对urllib和urllib2进行重构,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参
- 安装MySQL,留作笔记,不知是否能够安装成功,试试吧。1、 进入mysql官网 地址<下载完毕,接下来就是安装了2、安装找到安装包,
- python版本:3.8class object: """ The most base type "
- 简介模板方法模式,是行为型的设计模式。定义一个操作中的算法的骨架,而将一些步骤延迟到子类当中,使得子类可以不改变一个算法的结构即可重新定义该
- Python 语言的优势在于其功能强大,可以用于网络数据采集、数据分析等各种应用场景。本篇文章将介绍如何使用 Python 获取网络数据、使
- ORA-00600:internal error code,arguments:[num],[?],[?],[?],[?] 产生原因:这种错
- 本文实例为大家分享了python批量处理图片的具体代码,供大家参考,具体内容如下公司的一个项目要求把所有4096x4096的图片全部转化成2
- 这是支持的下载版本,去官网下载2020.3及以上(2021-03-18测试破解有效)官网下载地址:https://www.jetbrains
- 如果你用ODBC connection (DSN or DSN-less)来访问远端的(UNC path)数据库, OLEDB会出现以下错误
- 目录1.查询字符串数据(query string):2. 提取请求体数据2.1 表单类型请求体数据(Form Data)2.2 非表单类型请
- 一、创建excel代码备注:封装好了(可直接调用)"""-*- coding:utf-8 -*-@Time :