INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

AJAX

How do I refresh data dynamically without refreshing the entire page? by djjd47130
Posted: 1 Feb 11

This can be done through using AJAX. AJAX isn't a programming language, but a technique and combination of different languages for a common practice. It can be considered the core basics behind server/client communication in a web page. AJAX stands for "Asynchronous JavaScript And XML", meaning it uses both JavaScript and XML.

Note: This code was written and assembled directly in this website, and is not tested. It's mostly copied from existing code and modified.

Original code was written in Microsoft Visual Studio 2010 Professional using ASP.NET with C#

First of all, most of the code will be generated through JavaScript. The page you will design will barely have any content in it. Start by creating an empty web page and replacing it with the code below.

ASPX File: Default.aspx

CODE

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DJJD.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="JavaScript" src="MyAJAX.js"></script>
    <script type="text/javascript" language="JavaScript">
        window.onload = function () {
            GetMyData();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="MyDiv">
            <br />
        </div>
    </div>
    </form>
</body>
</html>

There is a div on this page named MyDiv, which has <br /> in it only. The <br /> is only to make the div visible when there is no data, otherwise the div would not show at all. JavaScript is declared in the page's header assigning a method to the page's onload event. This function simply calls a function in the next file MyAJAX.js. The page also declares this file in the header as well.

JavaScript File: MyAJAX.js

CODE

var XmlHttp; //Object which retrieves data from server
var MyDataDBID = new Array(); //List of received Database ID's
var MyDataCaption = new Array(); //List of received Captions
function GetMyData() {
    //Identify type of browser and handle accordingly
    if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
    {
        XmlHttp = new XMLHttpRequest();
    }
    else // code for IE6, IE5
    {
        XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //Assign response method    
    XmlHttp.onreadystatechange = ReceiveMyData;
    //Open and send request to server
    XmlHttp.open("GET", "/Command.aspx?CMD=GETDATA", true);
    XmlHttp.send();
}
function ReceiveMyData() {
    //Check if data is ready, if so, continue to reading the data
    if (XmlHttp.readyState == 4 && XmlHttp.status == 200) {        
        var xmlDoc = XmlHttp.responseXML; //Get xml data from response
        var x; //Temporary object to hold xml sub-data
        var NewCount = 0; //Temporary variable - how many new records are in XML
        //Don't read if nothing exists
        if (xmlDoc != null) {
            x = xmlDoc.getElementsByTagName("ID"); //Get list of all instances of the database id, or 'ID' from XML data
            NewCount = x.length; //Set new count to number of new records
            if (NewCount > 0) {
                //Loop through all instances of 'ID'
                for (i = 0; i < NewCount; i++) {
                    MyDataDBID[i] = x[i].childNodes[0].nodeValue; //Assign DBID array value
                }
                //Get list of all instances of 'Caption' from XML data
                x = xmlDoc.getElementsByTagName("Caption");
                //Loop through all instances of 'Caption'
                for (i = 0; i < NewCount; i++) {
                    NewCaption[i] = DecodeString(x[i].childNodes[0].nodeValue);
                }
                //Loop through all new records and create HTML for each
                var R = "<div style=\"width: 100%;\">"; //Temporary HTML code
                for (i = 0; i < NewCount; i++) {
                    R += "<div style=\"width: 100%; text-align: center; border: 1px solid;\">";
                    R += "DBID: " + MyDataDBID[i] + " | Caption: " + MyDataCaption[i];
                    R += "</div>";
                }
                R += "</div>";
                //Replace contents of 'MyDiv' with new HTML data
                document.getElementById("MyDiv").innerHTML = R;
            }
        }
    }    
}

Now we need to create the server page which receives the request from the user's page. This page is not visible, and is not intended to be browsed, but is simply there to receive the request from the client.

ASPX File: Command.aspx

CODE

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Command.aspx.cs" Inherits="DJJD.Command" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

C# File: Command.aspx.cs

CODE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Xml;

namespace DJJD
{
    public partial class Command : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string Cmd = Request.QueryString["CMD"].ToString();
            if (Cmd == "GETDATA")
            {
                using (MemoryStream S = new MemoryStream())
                {
                    XmlTextWriter XmlDoc = new XmlTextWriter(S, System.Text.Encoding.ASCII);
                    //Start the document
                    XmlDoc.WriteStartDocument();
                    XmlDoc.WriteStartElement("Items");

                    //You would put a loop here adding the XML data record by record

                        //Instead, I will create the records manually for this example

                        var X = 1;
                        XmlDoc.WriteStartElement("Item");
                        XmlDoc.WriteElementString("ID", X.ToString());
                        XmlDoc.WriteElementString("Caption", "This is the first record");
                        XmlDoc.WriteEndElement();

                        X = 2;
                        XmlDoc.WriteStartElement("Item");
                        XmlDoc.WriteElementString("ID", X.ToString());
                        XmlDoc.WriteElementString("Caption", "This is the second record");
                        XmlDoc.WriteEndElement();

                        X = 3;
                        XmlDoc.WriteStartElement("Item");
                        XmlDoc.WriteElementString("ID", X.ToString());
                        XmlDoc.WriteElementString("Caption", "This is the third record");
                        XmlDoc.WriteEndElement();

                    //End the document
                    XmlDoc.WriteEndElement();
                    XmlDoc.WriteEndDocument();
                    XmlDoc.Flush();
                    //Prepare the response
                    byte[] Data = S.ToArray();
                    Response.Clear();
                    Response.AppendHeader("Content-Disposition", "filename=MyAJAXTest.xml");
                    Response.AppendHeader("Content-Length", Data.Length.ToString());
                    Response.ContentType = "text/xml";
                    //Send the response
                    Response.BinaryWrite(Data);
                    XmlDoc.Close();
                }
            }
        }
    }
}

And that should be about it! When the page loads, it calls the function which sends the request. When the response is received, it will read the XML packet and display the data on the page.

 

Back to Microsoft: ASP.NET FAQ Index
Back to Microsoft: ASP.NET Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close