AJAX IN ASP.NET

Here the javasript file Ajax.js

ajaxpage()

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="<a href="http:///">http://"+window.location.hostname</a>
var bustcacheparameter=""
function ajaxpage(url, containerid)
{
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari, Firefox, Opera 8.0+, Safari
    page_request = new XMLHttpRequest()
else if (window.ActiveXObject) // ifInternet Explorer\
    { 
    try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
    catch (e)
    {
    try{
            page_request = new ActiveXObject("Microsoft.XMLHTTP")
        }
    catch (e){}
        }
    }
else
    return false
    
    document.getElementById(containerid).innerHTML=loadstatustext
    page_request.onreadystatechange=function()
    {
         loadpage(page_request, containerid)
    }
if (bustcachevar) //if bust caching of external page
    bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState != 4)
{return;}
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
//alert(page_request.responseText)
}

What is this methods do?

We create a variable page_request to hold the XMLHttpRequest object. Then try to create the object with XMLHttp=new XMLHttpRequest (). This is for the Firefox, Opera, and Safari browsers. If that fails, try xmlHttp=new ActiveXObject ("Msxml2.XMLHTTP") which is for Internet Explorer 6.0, I think you can figure out what the rest is doing.

Note: This code above is work with the most browsers.

The onreadystatechange Property

The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed

if (page_request.readyState != 4) //requset is Completed

The responseText Property

The data sent back from the server can be retrieved with the responseText property we retrieve using this code:

document.getElementById(containerid).innerHTML=page_request.responseText;

Sending a Request to the Server

The open () method takes three parameters; the first defines which method to use when sending the request (GET or POST). The second specifies the URL of the server-side script. The third specifies that the request should be handled asynchronously. The send () method sends the request off to the server.

How to Use this method:

• Include the Ajax file ajax.js in you application witch contain the function we will call.

• Include a picture Loading.gif in the images folder witch will be shown while the page being requested.

• Create tow pages witch we will called from another page/page ajaxpage1.aspx and ajaxpage2.aspx the two destination file.

• Create a display page display.aspx were we will call the other 2 pages

• When creating the page ajaxpage1.aspx we remove all html elements-except the page directive- and simply put a div and write inside it "this is the Ajaxpage1" and simply does in the second page the same but write inside it " this is the ajaxpage2", so we can know witch page we are calling.

This how the HTML page will look like:

<%@ Page Language="C#" AutoEventWireup="true"CodeFile="ajaxpage1.aspx.cs" Inherits="_Default" %>
<div style="width: 100px; height: 100px">
this is the first page
</div>

In the display.aspx page we will call the other 2pages using the function that u see above in the ajax.js file. We create a DIV and give it ID="Main1" this container where the other page will be displayed, and we put two buttons button1 will call the AjaxPage1.aspx and button2 will call the ajaxpage2.aspx and after the page directive we will put the following code:

<script src="ajax.js"></script>
<script>
var loadstatustext="  <img src='images/loading.gif' /><Font Class='Content'>   &#1580;&#1575;&#1585;&#1609; &#1575;&#1604;&#1578;&#1581;&#1605;&#1610;&#1604;   </font>";
function Page1()
{
var links="AjaxPage1.aspx";
var container1="Main1";
ajaxpage(links,container1);
}
function page2()
{
var links="AjaxPage2.aspx";
var container1="Main1";
ajaxpage(links,container1);
}
</script>

as you can see the first script called the ajax.js file and then we have a variable called loadstatustext witch is the GIF image that will be displayed while the page been requested, and then in function page1 () we define a variable Links witch is the desired webpage that will be displayed in the current page, and another variable called container1 where we want the page to be displayed and here I give it the id of the DIV where I want the data to be displayed.

Then we want to register the script to the two buttons so double click in the button1 that will create the click events handler and put this code to lunch the function page1()

protected void Button1_Click(object sender, EventArgs e)
{
Page.RegisterStartupScript("StartUp", "<script>page1( );</script>");
}

And do the same with button2 to lunch the function page2()