Image Rotator In Ajax
Step1: In this Example, there arean Image (img1) and a TextBox(TextBox1).
<img id="img1" src="Image/1.jpg" /><br />
<asp:TextBox ID="TextBox1"runat="server">1</asp:TextBox>
Step 2: We call afunction ChangeImage() on the onloadevent of the <body> tag. So when the page loads the function callautomatiacally.
varxmlHttp
vararr;
functionChangeImage() {
xmlHttp = GetXmlHttpObject()
varurl = "Default.aspx"
url = url + "?iname=" + document.getElementById('TextBox1').value
xmlHttp.onreadystatechange =stateChanged
xmlHttp.open("GET", url, true)
xmlHttp.send(null)
returnfalse;
}
We set the Text property of the TextBox1
<asp:TextBox ID="TextBox1"runat="server">1</asp:TextBox>
Now we write the functionChangeImage()
varxmlHttp
vararr;
functionChangeImage() {
xmlHttp =GetXmlHttpObject()
var url= "Default.aspx"
url = url + "?iname=" + document.getElementById('TextBox1').value
xmlHttp.onreadystatechange= stateChanged
xmlHttp.open("GET", url, true)
xmlHttp.send(null)
return false;
}
Now we can write the GetXmlHttpObject()to check the browser
function GetXmlHttpObject() {
var objXMLHttp = null
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest()
}
else if(window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
Step 3:In the Page_Load Event
if(Request.QueryString["iname"] != null)
{
stringi = Request.QueryString["iname"].ToString();
stringstr = "1";
if(i == "2")
{
str = "2";
}
Response.Clear();
Response.Write(str);
Response.End();
}
Complete Program
Default.aspx
<head runat="server">
<title></title>
<script language="JavaScript" type="text/javascript" >
varxmlHttp
vararr;
functionChangeImage() {
xmlHttp =GetXmlHttpObject()
var url= "Default.aspx"
url = url + "?iname=" + document.getElementById('TextBox1').value
xmlHttp.onreadystatechange= stateChanged
xmlHttp.open("GET", url, true)
xmlHttp.send(null)
return false;
}
functionstateChanged() {
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
varstr;
str =xmlHttp.responseText;
if(str == "1") {
document.getElementById("img1").src = "Image/211825_100000984069347_8367124_q.jpg";
document.getElementById("TextBox1").value = "2";
setTimeout("ChangeImage()", 1000);
}
if(str == "2") {
document.getElementById("img1").src = "Image/17Dec20100846PMfinal33.jpg";
setTimeout("ChangeImage()", 1000);
document.getElementById("TextBox1").value = "1";
}
}
}
functionGetXmlHttpObject() {
varobjXMLHttp = null
if(window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest()
}
else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
returnobjXMLHttp
}
</script>
</head>
<body onload="ChangeImage()">
<form id="form1" runat="server">
<div>
<img alt="" id="img1"
style="height: 156px; width: 233px" src="Image/1.jpg"/><br />
<br />
<asp:TextBox ID="TextBox1" runat="server">1</asp:TextBox>
<br />
</div>
</form>
</body>
</html>
Default.aspx.cs
protected void Page_Load(objectsender, EventArgs e)
{
if (Request.QueryString["iname"] != null)
{
string i = Request.QueryString["iname"].ToString();
string str = "1";
if (i == "2")
{
str= "2";
}
Response.Clear();
Response.Write(str);
Response.End();
}
}
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
Submit an article or tip
