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
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)
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.
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.
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.