ASP.NET, AJAX 和 XML：创建一个简单的计数器
这篇文章简单演示了如何使用 asp.net 和 Ajax 与 XML 文件交互
引言
创建一个简单的计数器，每次页面加载时递增。这使用了 Ajax 和 ASP.NET 技术。数据存储和检索在 XML 文件中。页面加载后，它通过 ajax 向 ASP.NET 文件发送一个查询，该文件打开一个 xml 文件进行读取、写入、保存，并将结果发回。与此同时，Ajax 正在等待并侦听响应，一旦收到，它就会显示并格式化它。
更重要的是，这个简单的项目展示了 ajax 的强大功能..以及在现有的后端代码中实现它有多么简单。
Using the Code
代码要正常工作，需要 3 个部分
1. CountViews.xml (XML)
<?xml version="1.0" encoding="UTF-8"?>
<CountViews>
<views>1</views>
</CountViews>
这是您的数据源，将存储和保存计数器值的增量。如果您不熟悉 XML，请在 Google 上搜索“XML 教程”。
2. CountViews.cs (C#)
public partial class CountViews : System.Web.UI.Page
{
public string QQ = HttpContext.Current.Request.QueryString["QQ"];
public string thePath = "CountViews.xml";
protected void Page_Load(object sender, EventArgs e)
{
count(Convert.ToInt32(QQ));
}
public void count(int myQQ)
{
XmlDocument doc = new XmlDocument();
//LOAD XML FILE
try
{
doc.Load(Server.MapPath(thePath));
}
catch (Exception) { Response.Write("Couldn't load XML file. Check its permissions"); }
//FIND THE REQUIRED NODE
string xPathID = "/CountViews/views";
XmlElement myItem = (XmlElement)doc.SelectSingleNode(xPathID);
//GET CURRENT VALUE AND ADD INCREAMENT
string views = (Convert.ToInt32(myItem.InnerText) + myQQ).ToString();
myItem.InnerText = views;
try
{
//SAVE INCREASED VALUE
doc.Save(Server.MapPath(thePath));
}
catch (Exception) { Response.Write("Couldn't save value check the permissions of your xml file"); }
//OUTPUT NEW VALUE
Response.Write(views);
}
}
这是您典型的 cs 后端代码。当 ajax 传递查询时，会发生一系列事件
1. XML 文件被加载到内存中。
2. 当前计数器值从 XML 节点中检索
3. 执行一个简单的计算来获取新的计数器值
4. 该值被保存到同一个 XML 文件中
5. 该值也被返回，Ajax 接收。
3. DisplayViews.aspx (Ajax, Javascript, html)
<script type="text/javascript">
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function ajaxUpdate(url, mydiv, QQ) {
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
if (xmlhttp) {
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4 || xmlhttp.readyState == 'complete') && xmlhttp.status == 200) {
document.getElementById(mydiv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", url + "?q=" + Math.random()+ "&QQ="+QQ, true);
xmlhttp.send(null);
}
}</script>
<body onload="javascript:ajaxUpdate('CountViews.aspx','show_div','1');">
<form name="frmServerTime" id="frmServerTime">
<table border="0" cellpadding="4" cellspacing="0" id="Table2">
<tr><td>
<input type="button" name="btnTime" value=" +10 " id="btnTime"
onclick="javascript:ajaxUpdate('CountViews.aspx','show_div','10');" />
<input type="button" name="btnTime" value=" +100 " id="Button1"
onclick="javascript:ajaxUpdate('CountViews.aspx','show_div','100');" />
</td>
</tr>
<tr>
<td><div id="show_div" style="border:1px solid RED; width:100px; height:20px;"></div></td>
</tr>
</table></form>
</body>
Ajax 就像一个信使。它将从用户那里接收查询，将其传递给服务器，然后耐心等待答案。一旦检测到，它会将其显示给用户，最好使用 css 格式化。
第一个函数 GetXmlHttpObject() 根据您使用的浏览器创建一个 XMLHttpRequest。这对 ajax 的工作至关重要。
下一个函数 ajaxUpdate(url, mydiv, QQ) 是一个通过 ajax 传递 3 个变量的方法
1. url: 文件 ajax 要与之交互的 url。
2. mydiv: 您希望显示结果的 div 区域
3. QQ: 您希望通过 GET 使用 ajax 发送到后端脚本的任何额外查询。
此外，在这个文件 (DisplayViews.aspx) 上还有一个简单的 html 表单，其中包含用户界面。这在 body 标签上有一个 onload 事件，它触发 javascript 中的函数来增加计数器。
关注点
我还创建了 2 个额外的按钮，它们触发相同的函数，但具有不同的值。一个将计数器增加 10，另一个增加 100。
它展示了 ajax 可以有多么动态。您是否也注意到了速度..这很明显，因为页面不会加载。