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

最新推荐文章于 2021-08-04 00:42:55 发布

HoldBelief

最新推荐文章于 2021-08-04 00:42:55 发布

阅读量566

点赞数

分类专栏： JavaScript&Ajax 文章标签： Ajax JavaScript JSP HTML Microsoft ViewUI

JavaScript&Ajax 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个使用Ajax技术实现在用户点击不同选项时动态更新网页特定区域背景颜色的示例。通过客户端JavaScript与服务器端交互，实现了无需刷新页面即可更新内容的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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