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

holdbelief

浏览: 709586 次
性别:
来自: 北京

最近访客更多访客>>

fengqingyebai

qq470497848

praise_song

my_program

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript&Ajax

Ajax JavaScript JSP HTML Microsoft

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

分享到：

关于XMLHttpRequest.open()设置提交方式 ( ... | setTimeout调用有返回值的函数

2008-07-29 22:49
浏览 2042
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论