Atlas快速入門之實戰Atlas
隨著ajax技術的出現，web 2.0時代已經來臨，目前已經涌現了大量的web 2.0的網站，比如live.com,fclickr相冊網站，google Map等等。那什么是ajax呢？AJAX技術其實是舊瓶裝新酒了，它使用了異步JavaScript+XML。這種技術首先由微軟在1999年引入，并以"使用遠程調用的DHTML/JavaScript web應用程序"著稱。這一技術的基本思想是，允許一個互聯網瀏覽器向一個遠程頁面/服務作異步的HTTP調用，并且用收到的結果更新一個當前web頁面而不必刷新整個頁面。根據這種技術創建者的意見，這種技術應能夠改進客戶端的體驗，使得HTTP頁面外觀與使用感覺很類似于Windows桌面應用程序。
目前，已經涌現出了不少關于ajax的技術框架。而在.net 方面，也有不少開源的框架，如ajax.net,magic ajax等。而微軟也推出了自己的ajax框架----Atlas，目前的版本是6月份的CTP版本。在Atlas中，已經封裝好了大量的ajax控件和功能，十分方便。本文中將以兩個實例來說明如何使用Atlas來實現兩個簡單的ajax應用。
首先，我們要下載atlas,可以到 http://atlas.asp.net上去下載atlas的相關安裝文件。我們先來看一個簡單的例子，在這個例子中，
我們通過asp.net 2.0中的日歷控件來說明如何使用atlas.先打開vs.net 2005,選擇"新建web站點",如下圖，這時會發現有"Atlas web site"的模版，這時我們可以輸入要創建應用的名稱，這里我們就用默認的名稱AtlasWebSite1。
在方案解決器中，你會發現vs.net 2005已經預先放置了一些文件，其中，在bin文件夾下包含了Microsoft.Web.Atlas.dll文件，這是支持ajax功能的文件。為了能在設計中使用到ajax控件，必須在TOOLS工具箱中添加一個新的選項卡，命名為Atals,然后右鍵點擊該選項卡，在彈出的菜單中選擇"choose item",然后用瀏覽的功能，選擇atals.dll文件，這樣，就添加了一系列的Atals控件，如下圖：
我們將其中的ScriptManager控件拖拉到頁面中去。ScriptManager控件可以看作是管理Atlas控件的集合，它用來處理頁面上的所有Atlas組件以及局部頁面的更新，生成相關的客戶端腳本，所有需要支持Atlas的ASP.NET頁面上有且只能有一個ScriptManager控件。在ScriptManager控件中我們可以指定需要的腳本庫，或者指定通過JS來調用的Web Service，還可以指定頁面錯誤處理等。
接著，我們拖拉一個日歷控件到頁面中去，放在剛才scriptmanager控件的下面，并且選擇一個喜歡的樣式，如下圖所示：
接下來，我們看下如何在這個日歷控件中使用ajax技術。在.net 的日歷控件中，人們經常抱怨的是，每次選定日歷上的一個日期，都會引發一次postback頁面回傳，需要用戶等待，十分不方便。下面，我們通過Atals控件，來對日歷控件進行改造。
在default.aspx頁中，切換到代碼視圖，在之前的＜atlas:ScriptManager＞控件中，加入EnablePartialRendering屬性，以使得atlas可以對頁面進行局部更新，如下所示
再增加一個＜UpdatePanel＞控件，UpdatePanel是Atlas中一個很重要的控件，功能強大容易使用，可以只做很小的改動就可以向已有的ASP.NET站點添加Ajax功能,我們再將日歷控件拖拉放到updatepanel控件中去，其中要注意到，日歷控件是放到＜ContentTemplate＞的標簽內的，該標簽內放的就是受UpdatePanel控制的控件，如下代碼所示：
為了更好地看到效果，我們增加兩個下拉選擇框，可以讓用戶選擇年份和月份，代碼如下所示
然后在code-behind的代碼中，寫入如下代碼：
在上面的代碼中，分別為月份和年份的下拉選擇框的selectedindexchanged事件寫入了代碼，主要是控制當用戶選擇了月份和年份時，日歷控件中顯示相應的日期。但當我們F5運行時，會發覺頁面依然會引起postback刷新的。因此，我們要定義觸發器triggers。
所謂的觸發器，指定了發生動作的事件源，UpdatePanel提供兩種引發異步PostBack的Trigger ，分別是ControlEventTrigger和ControlEventTrigger。其中ControlEventTrigge是指當某個控件的某個指定的屬性變化時更新，而ControlEventTrigger是指當指定的事件發生時進行更新。則我們修改代碼如下：
這里，分別指定了月份下拉框的屬性觸發器和年份下拉框的事件觸發器，使得無論當用戶選擇哪一個下拉框時，都會引發局部的刷新，而這些刷新全部都通過updatepanel控件來封裝進行處理了。所以當運行程序時，頁面不會象以前那樣要進行一次postback和整體頁面的刷新。
最后，我們再在日歷控件下面，增加一個進度狀態條控件UpdateProgress，用來向用戶反映當前的進度，代碼如下所示
要注意的是，上面我們在進度狀態控件的＜ProgressTemplate＞中，我們只是簡單加入了一個標簽控件，如果有實際需要的話，我們是可以加入圖片的。
到此，我們的程序大功告成了，運行這個日歷程序，選擇月份和年份下拉框，會看到日歷控件沒有象以前那樣引起整個頁面的刷新，而是很快在日歷控件中顯示出相應的日期。
為了加深對Atlas的認識，我們再舉一個例子來說明問題。我們的這個應用，將是在一個頁面中，提供給用戶能通過點選分類主題按鈕的方式，獲得站點上最新的新聞，這是通過讀取站點上的RSS的形式來進行的。
我們首先新建另外的一個頁面，其中也放入scriptmanager控件，接著我們要設計一個簡單的頁面了。比如添加一個好看的BANNER在頁面頭部，并且為了顯示加載的進度，這次我們添加一個有Loading…動畫的GIF，再建立一個一行兩列的大表格，在表格的左邊，放入若干個按鈕。比如這里我們根據每個技術專題，放入了十個按鈕。
然后再拖放一個xmldatasource控件到窗體中，因為我們要讀取網站上的RSS XML文件進行解析。在表格的右邊，放入一個DataList控件，并且將這個DataList控件綁定到xmldatasource控件中去。最后，大致的界面圖如下所示：
接下來對XMLDATASOURCE控件進行設置。我們點選控件右上方的智能感知功能，在彈出的窗口中的XPATH里，選擇Xpath Expression,在這里，我們填入"rss/channel/item"。要注意的是，由于我們想瀏覽的網站提供的RSS 的XML文件里，我們只對每個頻道的最新信息感興趣，因此我磨恩這樣填寫，而完整的該網站的RSS信息在http://services.devx.com/outgoing/devxfeed.xml可以看到。最后，我們的頁面前端代碼如下所示：
在上面的代碼中，我們除了為每一個button按鈕都設置了事件觸發器外，還在DataList控件中，通過＜%#XPath("description") %＞的方式，將讀取并分析好的XML文件綁定顯示出來。下面，我們就開始撰寫后端的處理讀取到的RSS XML文件的代碼。
首先，由于要處理XML，讀取網站上的資源，所以要引入如下幾個命名空間
當用戶點選某個分類主題的按鈕時，將會自動下載該網站中符合主題的RSS XML文件，下載完后再進行解析，再顯示到頁面中去。代碼如下：
上面的兩個方法，分別向網站服務器發出獲取指定URL的信息的請求，并用IO流中的streamreader的方式獲得服務器返回的輸出信息。而下面的LoadRSS()方法，傳入的參數是指定的URL地址，然后分別調用上面的兩個方法，在最后獲得服務器返回的輸出流后，再通過解析XML的方式，選擇合適的結點內容進行返回。代碼如下：
接著，我們還有為10多個按鈕編寫響應的事件，當點選了某個分類主題的按鈕后，則向服務器請求指定的分類主題的RSS XML，代碼如下：
最后，在LOAD事件中,默認讀取最新信息的RSS XML
運行后效果如下圖所示,點選左邊每個分類主題的按鈕，都會自動去該網站下載最新的RSS XML 并且進行解析，最后展示到頁面中去，而這一切都由于用了Atlas而是無刷新的。
目前，已經涌現出了不少關于ajax的技術框架。而在.net 方面，也有不少開源的框架，如ajax.net,magic ajax等。而微軟也推出了自己的ajax框架----Atlas，目前的版本是6月份的CTP版本。在Atlas中，已經封裝好了大量的ajax控件和功能，十分方便。本文中將以兩個實例來說明如何使用Atlas來實現兩個簡單的ajax應用。
首先，我們要下載atlas,可以到 http://atlas.asp.net上去下載atlas的相關安裝文件。我們先來看一個簡單的例子，在這個例子中，
我們通過asp.net 2.0中的日歷控件來說明如何使用atlas.先打開vs.net 2005,選擇"新建web站點",如下圖，這時會發現有"Atlas web site"的模版，這時我們可以輸入要創建應用的名稱，這里我們就用默認的名稱AtlasWebSite1。
在方案解決器中，你會發現vs.net 2005已經預先放置了一些文件，其中，在bin文件夾下包含了Microsoft.Web.Atlas.dll文件，這是支持ajax功能的文件。為了能在設計中使用到ajax控件，必須在TOOLS工具箱中添加一個新的選項卡，命名為Atals,然后右鍵點擊該選項卡，在彈出的菜單中選擇"choose item",然后用瀏覽的功能，選擇atals.dll文件，這樣，就添加了一系列的Atals控件，如下圖：
我們將其中的ScriptManager控件拖拉到頁面中去。ScriptManager控件可以看作是管理Atlas控件的集合，它用來處理頁面上的所有Atlas組件以及局部頁面的更新，生成相關的客戶端腳本，所有需要支持Atlas的ASP.NET頁面上有且只能有一個ScriptManager控件。在ScriptManager控件中我們可以指定需要的腳本庫，或者指定通過JS來調用的Web Service，還可以指定頁面錯誤處理等。
接著，我們拖拉一個日歷控件到頁面中去，放在剛才scriptmanager控件的下面，并且選擇一個喜歡的樣式，如下圖所示：
 |
接下來，我們看下如何在這個日歷控件中使用ajax技術。在.net 的日歷控件中，人們經常抱怨的是，每次選定日歷上的一個日期，都會引發一次postback頁面回傳，需要用戶等待，十分不方便。下面，我們通過Atals控件，來對日歷控件進行改造。
在default.aspx頁中，切換到代碼視圖，在之前的＜atlas:ScriptManager＞控件中，加入EnablePartialRendering屬性，以使得atlas可以對頁面進行局部更新，如下所示
| ＜atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /＞ |
再增加一個＜UpdatePanel＞控件，UpdatePanel是Atlas中一個很重要的控件，功能強大容易使用，可以只做很小的改動就可以向已有的ASP.NET站點添加Ajax功能,我們再將日歷控件拖拉放到updatepanel控件中去，其中要注意到，日歷控件是放到＜ContentTemplate＞的標簽內的，該標簽內放的就是受UpdatePanel控制的控件，如下代碼所示：
| ＜atlas:UpdatePanel ID="id1" runat="server"＞ ＜ContentTemplate＞ ＜asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" ... /＞ ＜/asp:Calendar＞ ＜/ContentTemplate＞ ＜/atlas:UpdatePanel＞ |
為了更好地看到效果，我們增加兩個下拉選擇框，可以讓用戶選擇年份和月份，代碼如下所示
| ＜form id="form1" runat="server"＞ ＜atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /＞ ＜asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"＞ ＜asp:ListItem Value="1"＞Jan＜/asp:ListItem＞ ＜asp:ListItem Value="2"＞Feb＜/asp:ListItem＞ ＜asp:ListItem Value="3"＞Mar＜/asp:ListItem＞ ＜asp:ListItem Value="4"＞Apr＜/asp:ListItem＞ ＜asp:ListItem Value="5"＞May＜/asp:ListItem＞ ＜asp:ListItem Value="6"＞Jun＜/asp:ListItem＞ ＜asp:ListItem Value="7"＞Jul＜/asp:ListItem＞ ＜asp:ListItem Value="8"＞Aug＜/asp:ListItem＞ ＜asp:ListItem Value="9"＞Sep＜/asp:ListItem＞ ＜asp:ListItem Value="10"＞Oct＜/asp:ListItem＞ ＜asp:ListItem Value="11"＞Nov＜/asp:ListItem＞ ＜asp:ListItem Value="12"＞Dec＜/asp:ListItem＞ ＜/asp:DropDownList＞ Year ＜asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True"＞ ＜asp:ListItem＞2005＜/asp:ListItem＞ ＜asp:ListItem＞2006＜/asp:ListItem＞ ＜asp:ListItem＞2007＜/asp:ListItem＞ ＜/asp:DropDownList＞＜br /＞ |
然后在code-behind的代碼中，寫入如下代碼：
| Protected Sub DropDownList1_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles DropDownList1.SelectedIndexChanged With Calendar1 .VisibleDate = New Date( _ DropDownList2.SelectedValue, _ DropDownList1.SelectedValue, 1) End With End Sub Protected Sub DropDownList2_SelectedIndexChanged( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles DropDownList2.SelectedIndexChanged With Calendar1 .VisibleDate = New Date( _ DropDownList2.SelectedValue, _ DropDownList1.SelectedValue, 1) End With End Sub |
在上面的代碼中，分別為月份和年份的下拉選擇框的selectedindexchanged事件寫入了代碼，主要是控制當用戶選擇了月份和年份時，日歷控件中顯示相應的日期。但當我們F5運行時，會發覺頁面依然會引起postback刷新的。因此，我們要定義觸發器triggers。
所謂的觸發器，指定了發生動作的事件源，UpdatePanel提供兩種引發異步PostBack的Trigger ，分別是ControlEventTrigger和ControlEventTrigger。其中ControlEventTrigge是指當某個控件的某個指定的屬性變化時更新，而ControlEventTrigger是指當指定的事件發生時進行更新。則我們修改代碼如下：
| ＜atlas:UpdatePanel ID="id1" runat="server"＞ ＜ContentTemplate＞ ＜asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" ... /＞ ＜/asp:Calendar＞ ＜/ContentTemplate＞ ＜Triggers＞ ＜atlas:ControlValueTrigger ControlID="DropDownList1" PropertyName="SelectedValue" /＞ ＜atlas:ControlEventTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" /＞ ＜/Triggers＞ ＜/atlas:UpdatePanel＞ |
這里，分別指定了月份下拉框的屬性觸發器和年份下拉框的事件觸發器，使得無論當用戶選擇哪一個下拉框時，都會引發局部的刷新，而這些刷新全部都通過updatepanel控件來封裝進行處理了。所以當運行程序時，頁面不會象以前那樣要進行一次postback和整體頁面的刷新。
最后，我們再在日歷控件下面，增加一個進度狀態條控件UpdateProgress，用來向用戶反映當前的進度，代碼如下所示
| ＜atlas:UpdateProgress ID="pro" runat="server"＞ ＜ProgressTemplate＞ ＜asp:Label ID="Label1" runat="server" Text="Label"＞ Updating Calendar... ＜/asp:Label＞ ＜/ProgressTemplate＞ ＜/atlas:UpdateProgress＞ |
要注意的是，上面我們在進度狀態控件的＜ProgressTemplate＞中，我們只是簡單加入了一個標簽控件，如果有實際需要的話，我們是可以加入圖片的。
到此，我們的程序大功告成了，運行這個日歷程序，選擇月份和年份下拉框，會看到日歷控件沒有象以前那樣引起整個頁面的刷新，而是很快在日歷控件中顯示出相應的日期。
為了加深對Atlas的認識，我們再舉一個例子來說明問題。我們的這個應用，將是在一個頁面中，提供給用戶能通過點選分類主題按鈕的方式，獲得站點上最新的新聞，這是通過讀取站點上的RSS的形式來進行的。
我們首先新建另外的一個頁面，其中也放入scriptmanager控件，接著我們要設計一個簡單的頁面了。比如添加一個好看的BANNER在頁面頭部，并且為了顯示加載的進度，這次我們添加一個有Loading…動畫的GIF，再建立一個一行兩列的大表格，在表格的左邊，放入若干個按鈕。比如這里我們根據每個技術專題，放入了十個按鈕。
然后再拖放一個xmldatasource控件到窗體中，因為我們要讀取網站上的RSS XML文件進行解析。在表格的右邊，放入一個DataList控件，并且將這個DataList控件綁定到xmldatasource控件中去。最后，大致的界面圖如下所示：
 |
接下來對XMLDATASOURCE控件進行設置。我們點選控件右上方的智能感知功能，在彈出的窗口中的XPATH里，選擇Xpath Expression,在這里，我們填入"rss/channel/item"。要注意的是，由于我們想瀏覽的網站提供的RSS 的XML文件里，我們只對每個頻道的最新信息感興趣，因此我磨恩這樣填寫，而完整的該網站的RSS信息在http://services.devx.com/outgoing/devxfeed.xml可以看到。最后，我們的頁面前端代碼如下所示：
| ＜atlas:UpdatePanel ID="id1" runat="server"＞ ＜ContentTemplate＞ ＜asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="True"＞＜/asp:Label＞ ＜atlas:UpdateProgress ID="pro" runat="server"＞ ＜ProgressTemplate＞ ＜asp:Image ID="Image1" runat="server" ImageUrl="'/loading.gif" /＞ ＜/ProgressTemplate＞ ＜/atlas:UpdateProgress＞ ＜asp:DataList ID="DataList1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" Width="755px"＞ ＜FooterStyle BackColor="Tan" /＞ ＜SelectedItemStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /＞ ＜AlternatingItemStyle BackColor="PaleGoldenrod" /＞ ＜HeaderStyle BackColor="Tan" Font-Bold="True" /＞ ＜ItemTemplate＞ ＜b＞ ＜%#XPath("title")%＞ ＜/b＞ ＜br /＞ ＜i＞ ＜%#XPath("description") %＞ ＜/i＞ ＜%#XPath("pubDate")%＞ ＜br /＞ ＜a href='＜%#XPath("link") %＞'＞Link＜/a＞ ＜br /＞ ＜br /＞ ＜/ItemTemplate＞ ＜/asp:DataList＞ ＜asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="rss/channel/item"＞＜/asp:XmlDataSource＞ ＜/ContentTemplate＞ ＜Triggers＞ ＜atlas:ControlEventTrigger ControlID="Button1" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button2" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button3" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button4" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button5" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button6" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button7" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button8" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button9" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button10" EventName="Click" /＞ ＜atlas:ControlEventTrigger ControlID="Button11" EventName="Click" /＞ ＜/Triggers＞ ＜/atlas:UpdatePanel＞ ... |
在上面的代碼中，我們除了為每一個button按鈕都設置了事件觸發器外，還在DataList控件中，通過＜%#XPath("description") %＞的方式，將讀取并分析好的XML文件綁定顯示出來。下面，我們就開始撰寫后端的處理讀取到的RSS XML文件的代碼。
首先，由于要處理XML，讀取網站上的資源，所以要引入如下幾個命名空間
| Imports System.Net Imports System.IO Imports System.Xml |
當用戶點選某個分類主題的按鈕時，將會自動下載該網站中符合主題的RSS XML文件，下載完后再進行解析，再顯示到頁面中去。代碼如下：
| Public Function SendRequest( _ ByVal URI As String, _ ByVal requestType As String) As HttpWebRequest Dim req As HttpWebRequest = Nothing Try //發起HTTP請求 req = HttpWebRequest.Create(URI) req.Method = requestType Catch ex As Exception Throw New Exception("Error") End Try Return req End Function Public Function GetResponse( _ ByVal req As HttpWebRequest) As String Dim body As String = String.Empty Try //從服務器中獲得響應輸出流 Dim resp As HttpWebResponse = req.GetResponse() Dim stream As Stream = resp.GetResponseStream() //使用streamreader去處理得到的服務器響應 Dim reader As StreamReader = _ New StreamReader(stream, Encoding.UTF8) body = reader.ReadToEnd() stream.Close() Catch ex As Exception Throw New Exception("Error") End Try Return body End Function |
上面的兩個方法，分別向網站服務器發出獲取指定URL的信息的請求，并用IO流中的streamreader的方式獲得服務器返回的輸出信息。而下面的LoadRSS()方法，傳入的參數是指定的URL地址，然后分別調用上面的兩個方法，在最后獲得服務器返回的輸出流后，再通過解析XML的方式，選擇合適的結點內容進行返回。代碼如下：
| Public Function LoadRSS( _ ByVal URI As String) As String Dim req As HttpWebRequest Dim xmlDoc As XmlDocument = Nothing Try XmlDataSource1.DataFile = URI //下載RSS XML文件 req = SendRequest(URI, "GET") Dim xmlData As String = GetResponse(req) xmlDoc = New XmlDocument() xmlDoc.LoadXml(xmlData) //選擇合適的結點 Dim titleNode As XmlNode = _ xmlDoc.DocumentElement.SelectSingleNode("channel/title") Return titleNode.InnerText Catch ex As Exception Return String.Empty End Try End Function |
接著，我們還有為10多個按鈕編寫響應的事件，當點選了某個分類主題的按鈕后，則向服務器請求指定的分類主題的RSS XML，代碼如下：
| Public Sub Button_Click( _ ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Button1.Click, Button2.Click, Button3.Click, _ Button4.Click, Button5.Click, Button6.Click, _ Button7.Click, Button8.Click, Button9.Click, _ Button10.Click, Button11.Click Dim URL As String = String.Empty Select Case CType(sender, Button).Text Case "Database" : URL = _ "http://services.devx.com/outgoing/databasefeed.xml" Case ".NET" : URL = _ "http://services.devx.com/outgoing/dotnet.xml" Case "C++" : URL = _ "http://services.devx.com/outgoing/cplusfeed.xml" Case "Recent Tips" : URL = _ "http://services.devx.com/outgoing/recentTipsFeed.xml" Case "Web Dev" : URL = _ "http://services.devx.com/outgoing/webdevfeed.xml" Case "Latest" : URL = _ "http://services.devx.com/outgoing/devxfeed.xml" Case "Enterprise" : URL = _ "http://services.devx.com/outgoing/enterprisefeed.xml" Case "Wireless / Mobile" : URL = _ "http://services.devx.com/outgoing/wirelessfeed.xml" Case "XML" : URL = _ "http://services.devx.com/outgoing/xmlfeed.xml" Case "Java" : URL = _ "http://services.devx.com/outgoing/javafeed.xml" Case "Open Source" : URL = _ "http://services.devx.com/outgoing/openSourceFeed.xml" End Select Label1.Text = LoadRSS(URL) End Sub |
最后，在LOAD事件中,默認讀取最新信息的RSS XML
| Protected Sub Page_Load( _ ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load Label1.Text = _ LoadRSS("http://services.devx.com/outgoing/devxfeed.xml") End Sub |
運行后效果如下圖所示,點選左邊每個分類主題的按鈕，都會自動去該網站下載最新的RSS XML 并且進行解析，最后展示到頁面中去，而這一切都由于用了Atlas而是無刷新的。
 |