Introduction
Create a simple counter which increases every time a page loads. This uses Ajax and ASP.NET technology. Data is stored and retrieved in am XML file. Once the page is loaded it send a query via ajax to an ASP.NET file, this opens an xml file reads, writes, saves, and sends the result back. Meanwhile Ajax is waiting and listening for a response, once received it displayed and formats it.
More importantly this, simple project shows the power of ajax..and how simple it is to implement in your existing backend code. The
Using the Code
There are 3 parts for the code to work fine
1. CountViews.xml(XML):
="1.0" ="UTF-8"
<CountViews>
<views>1</views>
</CountViews>
This is your data source and will store and save the increment in the value of the counter. If you are not familiar with XML, google "XML tutorial".
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();
try
{
doc.Load(Server.MapPath(thePath));
}
catch (Exception) { Response.Write("Couldn't load XML file. Check its permissions"); }
string xPathID = "/CountViews/views";
XmlElement myItem = (XmlElement)doc.SelectSingleNode(xPathID);
string views = (Convert.ToInt32(myItem.InnerText) + myQQ).ToString();
myItem.InnerText = views;
try
{
doc.Save(Server.MapPath(thePath));
}
catch (Exception) { Response.Write("Couldn't save value check the permissions of your xml file"); }
Response.Write(views);
}
}
This is your typical cs backend code. A series of events happens when ajax delivers the query
1. The XML file is loaded into memory.
2. The current counter value is retrieved from the XML node
3. A simple calculations executes to get new counter value
4. The value is saved to the same XML file
5. The value is also returned which ajax receives.
3. DisplayViews.aspx (Ajax, Javascript, html):
<script type="text/javascript">
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
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 acts like a messenger. It will receive the query from the user rally it to the server then patiently wait for an answer. Once one is detected it displays it , to the user, preferably formatted with css.
The first function GetXmlHttpObject() creates a XMLHttpRequest based on what browser you are using. This is vital for ajax to work.
The next function ajaxUpdate(url, mydiv, QQ) is a method which passes 3 variables via ajax
1. url: The url where the file ajax is to be interacting is .
2. mydiv: The div area you want the result to be displayed
3. QQ: Any extra query you wish to send to your backend script via GET using ajax.
Also on this file (DisplayViews.aspx)is a simple html form which houses the user interface for the user. This has an onload event on the body tag which fires the function in javascript to increase the counter.
Points of Interest
I have also created 2 extra buttons which fires off the same function but with different values. One increases the counter by 10, the other by 100.
It shows how dynamic ajax can be. Did you also notice the speed..this is very obvious because the page doesn't load.
