AJAX 中的图像旋转器
0/5 (0投票)
Ajax 图片旋转器 步骤1： 在此示例中，有一个图片（img1）和一个文本框（TextBox1）。<br
AJAX 中的图像旋转器
步骤1: 在此示例中，有一个图片（img1）和一个文本框（TextBox1）。
<img id="img1" src="Image/1.jpg" /><br />
<asp:TextBox ID="TextBox1"runat="server">1</asp:TextBox>
步骤2:我们在<body>标签的onloadevent事件中调用一个名为ChangeImage()的函数。因此，当页面加载时，函数会自动调用。
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;
}
我们设置TextBox1的Text属性
<asp:TextBox ID="TextBox1"runat="server">1</asp:TextBox>
现在我们来编写ChangeImage()函数
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;
}
现在我们可以编写 GetXmlHttpObject()来检查浏览器
function GetXmlHttpObject() {
var objXMLHttp = null
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest()
}
else if(window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
步骤3:在Page_Load事件中
if(Request.QueryString["iname"] != null)
{
stringi = Request.QueryString["iname"].ToString();
stringstr = "1";
if(i == "2")
{
str = "2";
}
Response.Clear();
Response.Write(str);
Response.End();
}
完整程序
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();
}
}