Here the javasript file Ajax.js
ajaxpage()
var bustcachevar=1
var loadedobjects=""
var rootdomain="<a href="http:
var bustcacheparameter=""
function ajaxpage(url, containerid)
{
var page_request = false
if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else if (window.ActiveXObject)
{
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)
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
}
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:
Destination HTML Page
<%@ 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'> جارى التحميل </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()
When run the display.aspx and press the button1 it will displayed
This is first the Ajax page1!!
And when press the button2 it will displayed
This is the second Ajax page1!
And you can notice the loadin.gif image while process.
Conclusion
In This article I want to show how you can use AJAX technology in ASP.NET application in simple way .Ajax is a new technology and its worth to be used in your website I think you have now along road to do all what is coming to your when you know what this technology can do very easily. Thank you for reading my article you will find a source code with the article witch contains all the files I mention here and you can run it easily and I am waiting for your comment: D.
References:
You can find here an application illustarate this article and a copy of the article.
hope to enjoy the article and hope to you best wishes