Internet Explorer 8: 儲存，至扇形，新功能，及加速您的 Web 應用程式

發行項
10/09/2015

本文章是由機器翻譯。

Internet Explorer 8

儲存，至扇形，新功能，及加速您的 Web 應用程式

Daron Yöndem

可從 MSDN 程式庫的程式碼下載
瀏覽線上的程式碼

本文將告訴您：

Web 切片
快速鍵
DOM 的儲存區
AJAX 巡覽

本文將使用下列技術：
AJAX JavaScript

本文根據搶鮮版的 Internet Explorer 8。所有的資訊有變更。

內容

定義與 Web 切片的頁面區域
到期日和更新頻率
快速鍵
搜尋建議
AJAX 巡覽
DOM 的儲存區
線上和離線工作的模式
XMLHttpRequest 時間出
wrap-up

Internet Explorer 8 會表示一個主要的步驟，在產品的演進。提供新的使用者功能，例如 Web 切片、快速鍵和搜尋建議 — 和也帶來更多的進階開發人員功能，例如 AJAX 巡覽和 DOM 儲存。

我這的篇文章將尋找到這些功能，查看如何 Internet Explorer 8 可以方便，為您的開發人員與類似的使用者的詳細資料。您會看到如何這些新功能可讓您定義頁面的部分並控制其更新的頻率和到期日、改善使用者的搜尋和巡覽的經驗和許多更多。

定義與 Web 切片的頁面區域

Web 切片可讓您，成片段，這樣您可以顯示和更新只有您感興趣部分剪下的網頁。Web 切片可以是使用者想要從您的網站中遵循更新程式中，但不想要使用的 RSS 讀取器好用的解決方案。RSS 讀取器可以是有點複雜，某些使用者，而且永遠不適當。

Web 切片] 是網頁的以程式設計方式定義的部分，使用者會發現透過切片移動滑鼠或按一下工具列上的 [」訂閱 Web 的配量」] 按鈕。[圖 1 ] 顯示這個動作中。

[圖 1 Discovering Web 切割暫留

之後訂閱 Web 的配量，使用者能夠看到 Internet Explorer 8 的 [我的最愛] 列上的 [切片] 標題。Internet Explorer 會保持連絡警示使用者關於更新與線上來源進行配量的標題文字的粗體。當您按一下標題時，切片的內容會顯示在快顯視窗中，如 [圖 2 ] 所示。

[圖 2]， 尋找最新的牌，在一個 Web 切片的拍賣上

Web 切片的一個主要優點是，使用者不需要保留重新整理 Web 網頁以追蹤網站上的變更。此外，根據如何您將資料來源結構為您的 Web 切片，它們可以協助節省在 Web 伺服器上的資源，因為只能有相關的資料不是整個頁面將會更新。此外，利用 Web 切片您的系統可以提供有關如何使用者存取 Web 網頁可能會影響其他設計決策的不同部分的更深層統計資料。

如我稍早所述，Web 切片的預先定義開發人員。您如何定義這些組件？先，您要標記的 HTML div 項目，為 [Web 切片容器使用 hslice 類別名稱。hslice 項目將會包含所有其他的定義，您需要您的網頁配量。以下是一個空的 Web 切片定義：

<div class="hslice" id="ProductID1">  </div>

每個 Web 切片必須唯一的識別碼，因為這是 Internet Explorer 如何區分從其他的頁面上。如果 Web 的配量的識別碼會變更使用者訂閱之後，Internet Explorer 將會無法能夠再找到它，並且不會是無法更新在 [我的最愛] 列上的內容。

每個 Web 配量應該包含識別標題，切片的項目；標題識別 CSS 類別項目的標題)。此內容會顯示 [我的最愛] 列和摘要的探索的命令列功能表上。如果您喜歡可以變更項目的標題文字，自行更新的 Web 的配量時。

若要完成建立我必須將一個多個項目加入我第一個 Web 切片：項目的內容。我有 Web 的配量和標題的定義，但是我沒有任何內容，以顯示給使用者]。藉由套用 CSS 類別項目的內容，應該顯示給使用者的內容上，我們定義 Web 切片內容：

<div class="hslice" id="ProductID1">
  <h1 class="entry-title">
  Brand New Product!</h1>
  <div class="entry-content">
    <p>
    This is the product
    definition.</p>
  </div>
</div>

[圖 3 ] 顯示我的 Web 切片定義。呼叫 ProductID1，我 Web 配量會具有標題及內容。

[圖 3 ：簡單的 Web 切片

您可以將更進一步的豐富性加入 Web 配量使用者經驗的視覺元素與內嵌 (或全域) 的 CSS 樣式。在的唯一限制會是會允許任何指令碼] 或 [(包括 Silverlight) 的 ActiveX 控制項。如果您需要 ActiveX，必須使用其他的顯示來源。 Web 的配量的項目的內容的容器項目上，可以定義的替代顯示來源。

如下所示您不必將項目的內容項目中的內容。您只會重新導向 Web 的配量，並告訴瀏覽器，內容將來自另一個 URL：

<div class="hslice" id="ProductID2">
    <h1 class="entry-title">
        Brand New Product</h1>
    <div class="entry-content" href="https://www.contoso.com/web_slice/
        alternative_display.aspx?ID=2">
    </div>
</div>

這種方式您將能夠追蹤更新每個 Web 切片的次數和多少使用者是下列的切片，藉由只追蹤顯示原始頁面。此外，在目標 alternative_display.aspx 網頁中您可以使用 ActiveX 控制項。

到期日和更新頻率

有時候您需要 Web 切片，即使使用者已離線，且無法取得更新 Web 的配量到期及時。這特別是對站台，例如線上 auctions 或線上銷售活動。您可以設定 Web 的配量的結束時間加入 endtime 類別名稱和適當的日期時間值的 HTML 縮寫] 項目中，內就像這樣：

<div class="hslice" id="ProductID1">
  <h1 class="entry-title">
    Brand New Product!</h1>
  <div class="entry-content">
    <p>
      This is the product definition.</p>
        <p>
          This is the end time:
          <abbr class="endtime" title="2008-10-12T11:00:00-12:00:00">
            12:00</abbr></p>
  </div>
</div>

使用者都可以滑鼠右鍵按一下 [我的最愛] 列上，Web 切片標題，並按一下 [內容] 命令來設定更新頻率。如 [圖 4 ] 所示，允許自訂的排程。

[圖 4] 使用者可以設定一個 Web 切片的更新頻率

除了使用者定義的設定中，您以程式設計方式可以藉由提供時間 (ttl) 值，以指定頻率：

<div class="hslice" id="ProductID6">
  <h1 class="entry-title">
    Brand New Product!!!!</h1>
  <div class="entry-content">
    <p>
      This is the product definition.</p>
    <div class="ttl" style="display: none;">
      15</div>
  </div>
</div>

若要以便頻率我已建立 DIV 項目，CSS 的類別 ttl 與內容 15。這會告訴瀏覽器來檢查這個 Web 的配量的內容可能更新每隔 15 分鐘。請注意設計選擇為我設定 DIV 項目的可視性不可見藉由設定為 [無] 的顯示 CSS 值。

如我所述您可以使用替代顯示來源，但有時候它會只擁有一個從外部資料來源中擷取其資料的 Web 切片很有用。使用外部資料來源時，您會有兩個的選擇。其中一個選項是另一個上使用的外部 Web 切片您將會看到下一個程式碼片段。

<div class="hslice" id="ProductID10">
    <div class="entry-title">
        Product Name
    </div>
    <a rel="feedurl" href="https://www.contoso.com/
        external.aspx#ProductID1"></a>
</div>

這個 Web 的切片定義會提取 external.aspx 從另一個 Web 切片。已 ProductID1 並至的 URL，做為錨點連接其識別碼所找到目標 Web 的配量。錨定標記上的 [關聯] 屬性的存在會指示為 Web 切片的資料來源，而不是在 div 標籤中顯示內容中使用錨點標記的 URL 的 Internet Explorer。

第二個選項是使用外部的 RSS 餵送。 Internet Explorer 會永遠使用 RSS 摘要中的第一個項目，並從傳入的 RSS XML 中顯示項目的內容：

<div class="hslice" id="ProductID10">
    <div class="entry-title">
        Product Name
    </div>
    <a rel="feedurl" href="/slicefeed.xml"></a>
</div>

以下 Web 的配量會有針對 XML 來源無法由泛型處理常式根據某些參數在作業中輸出 XML 輕易取代一個 feedurl 錨點。 XML 來源，在我們的範例如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
  <channel>
    <title>WebSlice RSS</title>
    <ttl>120</ttl>
    <item>
      <title>Product Name Here</title>
      <description>HTML &lt;b&gt;codes&lt;/b&gt; can be used</description>
    </item>
  </channel>
</rss>

而在項目內容的 HTML 程式碼中，定義我們的網頁配量的設定的您可以定義這些 XML 資料來源中。在先前的程式碼 XML 來源提供的 Web 的配量的 ttl] 和 [標題屬性的值。描述標記可包含 HTML，而不會造成任何問題。

快速鍵

快速鍵會存在瀏覽網站時進行更快且更自動化的一般工作。例如，思考您複製和貼上到另一個從一個網站內容的頻率。讓我們假設您就可以找到您要尋找在公司的網站的位址，而且現在需要出發的路線指引。您複製位址，啟動 Live 對應的 Web 站台，並在 [位址中貼上。您可以將使用的快速鍵這個程序自動化。

[圖 5 ] 顯示尋找在地圖上的一個位置，當使用者按一下位址上的快速鍵。撰寫您自己的快速鍵很簡單。為開發人員只要使用您的需要來定義您快速鍵就會執行使用 XML OpenService 描述檔。讓我們深入 OpenService 描述格式的詳細資料。以下顯示基本 OpenService 描述檔：

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="https://www.microsoft.com/schemas/
  openservicedescription/1.0">
  <homepageUrl>https://www.contoso.com/</homepageUrl>
  <display>
    <name>Translate it with Contoso</name>
    <icon>https://www.contoso.com/favicon.ico</icon>
  </display>
  <activity category="translate">
    ...
  </activity>
</openServiceDescription>

[圖 5 Live 導覽快速鍵提供立即的位置搜尋

在主要的屬性，快速鍵的會是在 homepageUrl、顯示和活動標記。在 homepageUrl 會是您所提供的服務的 URL。在其他的標記和設定中使用的所有 URL 也應該都使用相同的網域做為 homepageUrl。顯示標籤組上 Internet Explorer, 的快速鍵的命令按鈕的視覺外觀] 功能表上按一下滑鼠右鍵。當使用者以滑鼠右鍵按一下頁面上時，快速鍵將會顯示其名稱和圖示。

在活動項目會定義快速鍵提供之服務。在這個的範例中，快速鍵將會提供一個轉譯的活動。您可以控制 Internet Explorer 如何群組您快速鍵在 [內容] 功能表藉由使用不同的類別，像是將加入至加入連結) 上, (以 blog 在遠端的服務上) 的部落格定義 (尋找定義)，對應至尋找對應)，轉譯成轉譯所選取的文字)。您也可以定義自己的類別。類別定義，建議的規則是它們應該是動詞命令和足夠的泛型，讓其他的快速開發人員使用相同的類別中。

現在是定義在我們的活動標記我們 activitiyActions 時間。這裡您可以看到選取的內容值的一個 activityAction：

<activityAction context="selection" >
  <preview action="https://www.contoso.com/translateacc.aspx" method=" get" >
    <parameter name="word" value="{selection}" />
  </preview>
  <execute action=" https://www.contoso.com/translate.aspx " method=" post" >
    <parameter name="word" value="{selection}" />
  </execute>
</activityAction>

內容屬性將是 activityAction 的您，金鑰的元件。內容會定義當這個動作將會是可用。如果快速鍵不提供適用於目前內容的動作，它不會顯示在 Internet Explorer 的快速鍵功能表上。目前的內容選擇都是選取範圍] 和 [連結。如果內容選取使用者需要以選取文字，然後才能使用您的快速鍵進入快速鍵功能表中。如果內容連結使用者應該使用滑鼠上超連結以啟動該動作。

在每個 activityAction 您可以為執行和預覽定義。執行使用者按一下快速鍵功能表的 [快速] 命令時，會啟動。當使用者將滑鼠停留功能表上，快速鍵命令時，會啟動預覽的動作。這兩個預覽和執行標記可以有一個動作 URL] 和 [方法。您可以使用 GET 或 POST 以方法的資料傳輸。

參數定義為名稱 / 值組每個動作。值會自動來自於關鍵字 (在括弧中。執行個體，{選取範圍} 表示使用者所選取的文字會關聯參數的值。[圖 6 所示的可能值的關鍵字清單。

[圖 6 關鍵字選項

名稱	描述
documentDomain	目前頁面的網域位址。
documentTitle	目前的頁面的標題。
documentUrl	目前的頁面的完整 URL。
連結	如果使用者按一下連結，這會提供連結的完整位址。
linkdomain	如果使用者按一下連結，這就會提供連結的網域位址。
linkRel	如果使用者按一下連結，這會提供連結的關聯屬性。
linkText	如果使用者按一下連結，這會提供連結的文字。
選取範圍	在目前的頁面上選取的文字。

預覽視窗的運作類似的 IFrame 這表示您可以在 [預覽] 視窗使用任何類型的互動。就更適合設計特定的介面，區別預覽和執行動作的 URL。

最終 OpenService 描述檔範例如 [圖 7 ] 所示。現在的時候，讓我們的網站的造訪者她的電腦上安裝此快速鍵。以下是安裝快速鍵所需的指令碼：

<div>
    <input id="Button1" type="button" 
    value="Click to Install" 
    onclick="window.external.AddService('myaccelerat.xml');" /> 
</div>

圖 7]：最後的 OpenService 描述檔案

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="https://www.microsoft.com/schemas/
  openservicedescription/1.0">
  <homepageUrl>https://www.contoso.com/</homepageUrl>
  <display>
    <name>Translate with Contoso</name>
    <icon>https://www.contoso.com/favicon.ico</icon>
  </display>
  <activity category="translate">
    <activityAction context="selection" >
      <preview action="https://www.contoso.com/translate.asp">
        <parameter name="Word" value="{selection}" />
      </preview>
      <execute action="https://www.contoso.com/translate.asp">
        <parameter name="Word" value="{selection}" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

AddService) 方法會取得我們 OpenService 描述的 XML 檔案的 URL，並啟動安裝。為了要尋找出如果的快速鍵已經安裝，您可以呼叫 isServiceInstalled 方法。

搜尋建議

Internet Explorer 7.0 引進了新功能，稱為搜尋提供者。使用者是能夠整合他們的瀏覽器的不同的搜尋提供者，並使用 [搜尋] 列輕易地巡覽至其偏好的搜尋引擎。這可能因為是以 XML 為基礎的 OpenSearch 規格檔案。Internet Explorer 8 進一步改善搜尋，與功能，稱為搜尋建議。正如名稱所示，瀏覽器提出一些建議時，您可以輸入您的搜尋關鍵字。

為使用者型別中，瀏覽器會移至選取的搜尋建議提供者，並要求與搜尋關鍵字相關的建議。所產生的資料會立即顯示給使用者建立更好的搜尋經驗 (請參閱 [圖 8 )。

[圖 8 輕鬆存取的建議，而不瀏覽離開目前的頁面的搜尋關鍵字的

取得到的搜尋建議的運作方式詳細資料之前, 您必須搜尋提供者。搜尋提供者包含三個主要項目：名稱、在的搜尋 URL 和圖示。這些是 OpenSearch XML 規格中定義的所有良好。下列是專為 Internet Explorer 7.0，而搜尋建議功能完整的搜尋提供者：

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Contoso Search</ShortName>
  <Url type="text/html" template="https://www.contoso.com/?key2search=
    {searchTerms}"/>
  <Image height="16" width="16" type="image/icon">
    https://www.contoso.com/favicon.ico</Image>
</OpenSearchDescription>

ShortName 標記包含搜尋提供者名稱，並在 URL 標記定義搜尋引擎的搜尋路徑]。 URL 模式中的 searchTerms 關鍵字將會由撰寫使用者的搜尋關鍵字所取代。最後，Image 標記指向圖示檔的搜尋提供者。

若要安裝搜尋提供者，使用者必須按一下 [在您的頁面上的 HTML 項目，或將發現搜尋提供者透過 Internet Explorer 8 的 [搜尋] 方塊。而以類似的方式為快速鍵，搜尋提供者可以安裝使用 window.external.AddSearchProvider 的 JavaScript 函式：

<a href="#" onclick="window.external.AddSearchProvider('http://
    www.contoso.com/provider.xml')">  Add Search Provider  </a>

請注意 AddSearchProvider JavaScript 函式需要 OpenSearch XML 檔案的 URL 做為參數以初始化安裝程序。

做為您 OpenSearch XML 檔案，明確參考的替代方案，您可以讓瀏覽器瀏覽您的網頁，並探索您的搜尋提供者。若要讓您的搜尋提供者能探查使用，您要在隱藏的連結放至您的 HTML 頁面標頭中的 OpenSearch XML 檔案。下列是隱藏的搜尋提供者連結：

<link title="Contoso Search" rel="search" type="application/
opensearchdescription+xml" href="https://www.contoso.com/provider.xml" />

連結的標題會是瀏覽器中顯示的搜尋引擎的名稱。隱藏連結的 [關聯] 和 [型別] 屬性應該要完全相同我已經在這裡使用。這是瀏覽器如何知道它是一個搜尋提供者的連結。最後，href 屬性會包含至 OpenSearch 描述的 XML 檔案的 URL。

既然您已準備好您的搜尋提供者，您可以繼續，將加入的搜尋建議。首先，您將需要修改 OpenSearch 描述 XML 檔案，並指定您的搜尋建議的資料來源：

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Contoso Search</ShortName>
  <Url type="text/html" template="https://www.contoso.com/?key2search=
    {searchTerms}"/>  
  <Url type="application/x-suggestions+json" template="http://
  www.contoso.com/json.ashx? key2search ={searchTerms}"/>
  <Image height="16" width="16" type="image/icon">http://
    www.contoso.com/favicon.ico</Image>
</OpenSearchDescription>

在此您會看到我已加入 XML 一個額外的一行至先前的搜尋提供者描述檔) 新的 URL 標記，以不同的型別值。為了使用搜尋建議] 功能，您將需要的服務，可以評估使用者提供搜尋關鍵字，並能提供適當的建議清單。

以 XML 或 JSON 格式，可提供清單。在範例中，我有加入至建議服務使用 JSON 的指標。不過，我無法有輕鬆地使用下列 XML 的 XML 為基礎服務：

<Url type="application/x-suggestions+xml" template="http://
  www.contoso.com/xml.ashx? 
  key2search  ={searchTerms}"/>

有重要 (XML 與 JSON 資料來源之間的差異)。 JSON 資料來源可以提供建議包括建議的結果，每個搜尋結果的 URL，如果需要一個描述的清單。以下是範例：

["con",
["contoso soft", "contoso books", "contoso rent"],
["software company", "book store", "rent a car"],
["https://www.contoso.com/soft", "https://www.contoso.com/books", "https://www.contoso.com/rent"]]

[圖 10 ：範例搜尋建議] 清單

Internet Explorer 8 會在作業中提取 JSON) 資料，並立即顯示自動完成清單中。要注意應包含搜尋關鍵字，在從提供者傳回資料。在我們的 JSON 範例中第一個項目會包含我們的搜尋關鍵字"con 」。

如果選擇使用 XML 格式提供的 Internet Explorer 的搜尋建議清單就可以選擇您搜尋結果清單分隔符號，分割結果，並提供 Visual 建議標題。

首先我將提供搜尋建議清單，只有兩個的結果與一個分隔符號。[圖 9 ] 中的，XML 回應會包含送出關鍵字，[查詢] 標籤中的，並提供中的區段標記的兩個項目。區段標記具有標題且每個項目文字、說明和 URL，以巡覽。

[圖 9] 的搜尋建議的 XML

<SearchSuggestion>
    <Query>con</Query>
    <Section title="First Section">
        <Item>
            <Text>Result 1</Text>
            <Description>Description 1</Description>
            <Url>https://www.contoso.com?id=1</Url>
        </Item>
        <Separator title="Others"/>
        <Item>
            <Text>Result 2</Text>
            <Description>Description 2</Description>
            <Url>https://www.contoso.com?id=2</Url>
        </Item>
    </Section>
</SearchSuggestion>

您可以使用與標題的分隔符號的標記，以提供不同的結果，在 [搜尋] 方塊中建議的清單。使用者按一下清單中的一個建議的項目時，會使用 URL。在 [圖 10 ，您可以看到如何將 XML 資料將會顯示 Internet Explorer 8。

除了傳統的搜尋建議] 清單檢視，您可以使用影像增強使用者經驗，並提供每個建議的影像。您只需要是]，然後在適當的項目，標記中加入之映像標記就像這樣：

<Item>
<Text>Result 1</Text>
<Description>Description 1</Description>
<Url>https://www.contoso.com?id=1</Url>
<Image Source=https://www.contoso.com/image.jpg
    alt="A picture is worth thousand words" width="70"></Image>
</Item>

AJAX 巡覽

AJAX 應用程式 (RIA) 時，是豐富型的網際網路的主要元件之一，並將 (只要是在使用的 HTML 保留。您可以使用 AJAX，更新 UI 的部分，而不需要整個頁面重新整理] 和 [伺服器的用戶端的週期，為每個使用者動作。但 AJAX 有其缺點。

當您使用 AJAX 修改您的 Web 網頁內容您將請注意 [網址] 列並不會變更。這很合理。但是，如果使用者想要有一致的目前頁面的狀態，等等將加入至 [我的最愛] 的假設 URL？如果使用者中就按一下 [上一步]] 按鈕，在她的瀏覽器中嗎？她會傳送到她的先前瀏覽過的網站。

以某種方式，您必須反映 URL 變更，而不重新整理 Web 網站。輸入片段識別項。片段識別項會完全起來像它一樣 — 識別網頁的一部分的狀態。

每個 URL 都可以有片段的識別項，，您就需要附加至的 URL (例如，www.contoso.com/default.aspx#5) 的結尾的井字號 # 」。如果您是在 # 符號之後變更內容，Web 網頁將會無法重新整理，但是瀏覽器的歷程記錄會記錄變更，並提供來回的巡覽。

在 [Internet Explorer 8，這項功能提供 window.location.hash 屬性與新 hashChanged 事件。當您變更 window.location.hash 屬性時，請 [網址] 列將會取得更新，並雜湊屬性的內容將會放置在 # 符號之後。當使用者嘗試巡覽至另一個 Web 網頁，透過 [瀏覽] 按鈕時，hashChanged 事件就會引發，並提供目標的雜湊值也就是在目標網頁 # 符號之後的值。

讓我們建立一個 WebMethod 使用簡單的網站，才能服務 AJAX 呼叫。這個範例的網站將會包含 HTML 按鈕] 及 [DIV 項目。每次有人按一下 [HTML] 按鈕，DIV 項目的數值的內容會傳送到 [WebMethod：

<form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" 
        runat="server">
    </asp:ScriptManager>
<div>
    <input id="Button1" onclick="GetNext();" type="button" value="button" />
    <div id="content">0</div>
</div>
</form>

為了呼叫服務，新增下列的 JavaScript：

function GetNext() {
    PageMethods.GetNext($get("content").innerHTML, Done);
}
function Done(sender) {
    $get("content").innerHTML = sender;
    window.location.hash = sender;
}

為了遞增整數參數，並將它傳回給 AJAX 呼叫端的頁面的程式碼後置檔案中，最後，建立 [WebMethod：

<System.Web.Services.WebMethod()> _
Public Shared Function GetNext(ByVal x As Integer) As Integer
    Return x + 1
End Function

名為 GetNext，JavaScript 方法讓伺服器的 XMLHttpRequest。只要 DIV 項目和回呼 (Callback) 方法的內容會用 GetNext 方法的參數。當服務回應的呼叫回呼方法，執行，時新的值是直接放入回 DIV 項目。

以下是有趣的點。修改 Web 網頁，以新內容後, 我指派唯一識別項給 window.location.hash 屬性以識別我的 Web 網頁的目前狀態。這個簡單的範例的值會是相同的數，顯示在 [我的 DIV 項目。變更雜湊屬性後, 如果您看瀏覽器歷程記錄中您會注意到所現在有列出，新項目。

每次使用者巡覽瀏覽器歷程記錄中的上一步] 或 [向前時, 雜湊屬性將會回傳處理 onhashchange 事件 JavaScript 函式。使用下列程式碼行完成：

<body onhashchange="HashChanged();">

使用者，巡覽向後或向前，Internet Explorer 8 會更新 window.location.hash 屬性根據瀏覽器歷程記錄中的值時，會呼叫這個函式。這可讓我輕鬆的取得雜湊值，並更新我的頁面是否只要更新雜湊資料本身，頁面，如下所示，或是否需要從伺服器根據唯一識別項儲存在雜湊要求資料的動作：

function HashChanged() {
    $get("content").innerHTML = window.location.hash;
}

DOM 的儲存區

目前，如果要在用戶端、唯一的標準化的方式和舊的待命狀態中儲存資料是使用 document.cookie。不幸的是，這個方法不是直接彈性或功能強大，今天的線上應用程式。其中一個最重要的缺點，Cookie 的會是 4KB 的限制。 Internet Explorer 8 有回應，DOM 儲存。

DOM 的儲存區會是 HTML 5 的工作草稿的一部分，並提供用戶端大型資料存放區 (關於 10MB)。此儲存區可以因此較大部分，因為資料不會傳送每個要求到伺服器因為它是使用 Cookie。再加上，the localStorage 永不過期。

為了儲存，並從 DOM 的儲存區擷取資料，您需要是索引鍵 / 值組。 localStorage 的 JavaScript 類別會提供方法 setItem、 getItem 和 removeItem 存取 DOM 的儲存區的所有功能：

function Save() {
    localStorage.setItem("MyItem", $get("Text1").value);
}
function Load() {
    $get("Text1").value = localStorage.getItem("MyItem");
}

這個程式碼執行屬性取得的對等用法，並設定作業在 C# 或 Visual Basic 支援的存放區中用作 DOM 儲存。先，儲存函式會儲存 MyItem 的金鑰名稱 TextBox DOM 儲存的值。然後載入函式擷取資料從 DOM 的儲存體藉由提供相同的金鑰名稱。

線上和離線工作的模式

像許多 Web 項 o 人員我已經長時間已沈溺的一天，我無法偵測目前的使用者如果 [狀況良好] 連線到網際網路，並提供適當的功能層級的當。現在，Internet Explorer 8 所提供的主機電腦的網際網路連線的狀態，線上的屬性] 視窗。導覽。在過去這個屬性，表示是否使用者選擇離線，工作，它現在指出目前的使用者是否具有的已建立的連線到網路。

除了線上的屬性 Internet Explorer 8 會有現在兩個新的回呼處理常式 ononline 」和「 onoffline (請參閱 ononline 事件「和」 onoffline 事件"). 時，系統會失去網路連線，且 ononline 處理常式引發還原連線時，會引發 onoffline 處理常式)。您可以附加事件接聽程式，並會收到警告立即連線的狀態，您可以提供您的使用者是混合的經驗在線上和離線功能。

[圖 11 ] 顯示 ononline] 和 [onoffline Web 網頁的本文中所定義的事件的一個簡單的使用方式。每次使用者取得連線到網路，線上的 JavaScript 方法會啟動。同樣地，每次使用者中斷的網路離線的方法會引發。

[圖 11 使用 Ononline 和 Onoffline 事件

<html >
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function Online() {
            alert("I'm online");
        }
        function Offline() {
            alert("I'm offline");
        }
    </script>
</head>
<body ononline="Online();" onoffline="Offline();">
    <form id="form1" runat="server">
    </form>
</body>
</html>

XMLHttpRequest 時間出

新的 XMLHttpRequest，Internet Explorer 8 中會有一個 TimeOut 屬性] 和 [ontimeout 事件。這可讓您定義 XMLHttpRequests，將逾時]，並允許其他的要求，在進行中移動，要求 queue.in 下列程式碼時，我會建立新的 XmlHttpRequest，並設定逾時屬性和 ontimeout 事件接聽程式：

function GetAReqeust() {
    var MyRequest = XMLHttpRequest();
    MyRequest.ontmeout = TimeOutHere;
    MyRequest.open("GET","https://www.contoso.com/data.xml");
    MyRequest.timeout = 2000;
    MyRequest.send(null);
}
function TimeOutHere() {
    alert("Request to Contoso timed out!");
}

有兩個規則，您真的應該遵循時逾時設定的定義：開啟要求，並將逾時屬性應該設定之前開啟要求之後，接聽程式應該會繫結的事件逾時。

其中一個主要當設計您的 AJAX 應用程式時，您還會遇到的問題牽涉到歸功於各種不同的遠端網域中的服務與通訊，相同原始原則.

有一些因應措施，您無法執行，但在都提供您需要：同時在直接和通訊的安全性方法。 Internet Explorer 8 提供新的用戶端物件，以便呼叫可讓開發人員存取遠端網域，而不需要實作的 XDomainRequest 在伺服器端的 Proxy。

如果遠端伺服器提供呼叫的存取控制-允許-來源的 HTTP 標頭： * 其他所有的遠端站台就會要求資料從目前的 Web 頁面。用戶端使用 XDomainRequest 物件是一般的 XmlHttpRequest 為相同的。

您可以看到則 Internet Explorer 8 會提供了許多功能，可以解決許多問題，網頁開發人員有已希望解決的很長的時間。是否的更多深入整合您的內容和服務瀏覽器或運用新的瀏覽器平台服務提供更順暢的使用者經驗的 Internet Explorer 8 會讓您建置更豐富、更順暢的經驗，為您的使用者工具。

Deveload 軟體基礎的土耳其的創始者 Daron Yöndem 。他是 Microsoft 地區主管和 ASP.NET 的 MVP。前置字元的兩個 ASP.NET AJAX 的書籍的作者與 INETA MEA 喇叭機構的國際演說 Daron。

其他資源