如何仅刷新网站的几个部分

Question

我在我的网页上使用饼图,必须每4秒更新一次,所以我使用了它

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <meta http-equiv="refresh" content="4" />

我的饼图位于页面底部.每次页面刷新时页面都会显示在顶部.当我向下滚动以查看饼图时,它会再次刷新.

    //Passing values to draw pie chart

    var pie1 = new RGraph.Pie('pie1', <%= Session["uStats"] %>);
 // Create the pie object
            pie1.Set('chart.key', ['Read', 'Received', 'Not Received']);
            pie1.Set('chart.key.align', 'right');
            pie1.Set('chart.key.position.x', 200);
            pie1.Set('chart.key.position.y', 100);
            //pie1.Set('chart.gutter.right', 100);
            pie1.Set('chart.colors',['#86cf21', '#eaa600', '#e01600']);
            pie1.Set('chart.title', "Message Status");
            pie1.Set('chart.align', 'left');
            pie1.Set('chart.shadow', true);
            pie1.Set('chart.radius', 70);
            pie1.Set('chart.labels.sticks', false);
             pie1.Set('chart.tooltips.effect', 'fade');
            pie1.Set('chart.tooltips.event', 'onmousemove');
            pie1.Set('chart.highlight.style', '3d'); // Defaults to 3d anyway; can be 2d or 3d


            if (!RGraph.isIE8()) 
            {
                pie1.Set('chart.zoom.hdir', 'center');
                pie1.Set('chart.zoom.vdir', 'up');
                pie1.Set('chart.labels.sticks', false);
                pie1.Set('chart.labels.sticks.color', '#aaa');
            }
            pie1.Draw();
        }
//I add the values to the session. 
Session.Add("uStats", "[" + read + "," + received2 + "," + NotReceived + "]");


 <div id="pie" "top: 165px; left: 536px; width: 74px; position: absolute; height: 529px;">
        <canvas id="pie1" width="400" height="400">[No canvas support]</canvas>        
        </div>

 <asp:Panel runat="server" ID="Panel_Users" ScrollBars="Auto" Style="z-index: 1; left: 748px;
                top: 621px; position: absolute; height: 250px; width: 287px">
                <asp:GridView ID="Grid_UserTable" runat="server" Style="z-index: 1; left: 2px; top: 5px;
                    position: absolute; height: 152px; width: 243px" BorderColor="#666666" AutoGenerateColumns="False"
                    OnRowDataBound="MyGrid_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Status">
                            <ItemTemplate>
                                <asp:Image ID="Status" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="TimeReceived" HeaderText="TimeReceived" InsertVisible="False"
                            ReadOnly="True" SortExpression="TimeReceived" />
                        <asp:BoundField DataField="TimeRead" HeaderText="TimeRead" SortExpression="TimeRead" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                    </Columns>
                </asp:GridView>

        </asp:Panel>

我必须更新表格和饼图

什么是解决方案只刷新网站的所需部分,并使网页保持在准确的位置而不是顶部

Answer 1

什么是仅刷新所需部件的解决方案

AJAX.

您使用的工具取决于您,但概念是相同的.基本上你需要的是页面上的一些JavaScript,偶尔会向服务器资源发出请求以获取更新的数据并更新页面上的相关元素.

下面是一个简单的示例,说明了它在浏览器中的行为以及客户端代码和服务器端代码的交互方式.