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();
}
}
Revision number 3, Saturday, June 18, 2011 12:58:09 PM by codenickel