Ajax示例_改变页面局部的颜色

    学习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);
%>

你可能感兴趣的:(JavaScript,html,Ajax,jsp,Microsoft)