学习Ajax,下面是《深入浅出Ajax》示例,
工程名称:Project3_1_4
包括代码清单:3_7 P88、代码清单 3-8 P90
效果:点击页面上某一处的radioButton,页面上对应的区域的颜色改变。
页面部分代码:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=GBK">
<title>Insert title
here</title>
<script language="javascript"
type="text/javascript">
var
xmlHttp;
function
createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp =
new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp =
new XMLHttpRequest();
}
}
//发送更新颜色的请求
function
getPart()
{
createXMLHttpRequest();
var
timestamp = new Date().getTime();
var url =
"/Project3_1_4/updatePartServer.jsp?timestamp="+timestamp;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = changePart;
xmlHttp.send(null);
}
//改变对应页面部分的颜色
function
changePart()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)//信息已经成功返回,开始处理信息
{
var colorHex
= xmlHttp.responseText;
//alert(choosePart());
document.getElementById(choosePart()).setAttribute('bgcolor',colorHex);
//alert(document.getElementById(choosePart()).getAttribute('bgcolor'));
}
}
}
//选择需要更新的部分
function
choosePart()
{
var parts =
document.getElementsByName('part');
for(i = 0; i
< parts.length; i++)
{
if(parts[i].checked)
{
return
parts[i].value;
}
}
}
</script>
</head>
<body>
请选择需要更新颜色的部分:<p>
<input type="radio" id="part" name="part"
value="part1"
onClick="getPart()">第一部分<br>
<input type="radio" id="part" name="part"
value="part2"
onClick="getPart()">第二部分<br>
<input type="radio" id="part" name="part"
value="part3"
onClick="getPart()">第三部分<br>
<input type="radio" id="part" name="part"
value="part4"
onClick="getPart()">第四部分<br>
<p>
<table border="1" width="400">
<tr>
<td height="100" bgColor="#FF0000"
id="part1">第一部分</td><td
height="100" bgColor="#FFFF00"
id="part2">第二部分</td>
</tr>
<td height="100" bgColor="#0000FF"
id="part3">第三部分</td><td
height="100" bgColor="#C0C0C0"
id="part4">第四部分</td>
<tr>
</tr>
</table>
</body>
</html>
服务器端的代码如下:
updatePartServer.jsp
<%@ page contentType="text/html;charset=GBK"
%>
<%
int colorValue = 0;
String hexChars =
"0123456789ABCDEF";
String hex = "";
for(int
i=0;i<3;i++)
{
colorValue =
new Double(255 * Math.random()).intValue();
int a =
colorValue % 16;
int b =
(colorValue - a)/16;
hex +=
hexChars.substring(b-1,b) + hexChars.substring(a-1,a);
}
out.write(hex);
%>
Ajax示例_改变页面局部的颜色
最新推荐文章于 2021-08-04 00:42:55 发布