送出

邊做邊學Internet Explorer 8：為你的網站穿上新衣 - Internet Ex...

邊做邊學 Internet Explorer 8：為你的網站穿上新衣 - IE 8 新功能

作者：黃忠成

邊做邊學 Internet Explorer 8 範例影片欣賞

Internet Explorer 8 新視野

距上次 Internet Explorer 7 推出，已有相當長一段時間了，於此期間，瀏覽器的發展一直呈現停滯狀態，這個現象跟許多網頁規格一直處於制定中有著絕對的關係。就瀏覽器的發展方向而言，其主要目的自然是支援更多的新網頁規格，及提供給使用者更方便的瀏覽網頁感受，如果網頁規格一直未制定完成，那麼瀏覽器所能做的就僅僅是提升效能及安全性罷了。在 Internet Explorer 7 推出至現今 Internet Explorer 8 開始 Beta 期間，除了 HTML、CSS 的新版制定持續進行中外，基於原本網頁規格而發展的 AJAX 技術也持續發熱中，因此於此時推出新版的瀏覽器，必定得對 AJAX 技術進行更完善的支援。在 Internet Explorer 8 中，除了持續改良 CSS 及 HTML 規格支援的完整性外，也提供了 AJAX 技術的相關支援，例如提供了 Cross-Domain Request、針對 AJAX 技術實作的網頁導覽 (Back、Next) 機制等等。除此之外，Internet Explorer 8 還提出了三個網頁新概念：Web Slice、Accelerators、Search Provider，這三大功能的設計主軸是環繞在提升使用者瀏覽網頁的方便性上。

Web Slice 允許使用者訂閱某一個網頁中的特定區段，一旦訂閱後，該區段便會出現在 Internet Explorer 8 的工具列上，使用者可以直接點擊該按紐查看該區段的內容，更好的是該區段會自動連往原始網頁進行更新。

Accelerators，又稱為加速器，這個功能的運作模式有點像是常見的即時翻譯軟體，允許使用者在選取網頁中的某一段文字後，按下滑鼠右鍵選擇將此段文字交由指定的 Accelerators 來處理，視該 Accelerators 功能而定，其可以對這段文字進行翻譯，或是以這段文字為關鍵字來搜尋。

Search Provider，又稱為搜尋提供者，整合搜尋引擎是近年來瀏覽器發展的主要項目之一，在 Internet Explorer 8 的工具列中，特別提供了一個供使用者鍵入搜尋字串的區域，與其它瀏覽器不同，Internet Explorer 8 並未限定使用者僅能設定單一搜尋引擎，而是採開放性設計，開發者透過定義 XML 文件，將特定的搜尋引擎整合到 Internet Explorer 8 中。當然！對一般使用者而言，定義 XML 文件或許有困難，不過也不用過於擔心，Microsoft 及許多開發人員早就為知名的搜尋引擎如 Wiki、Google、Yahoo、PC Home 等做好 Search Provider 的 XML 文件，使用者只要連上 Internet Explorer 8 的服務網站 (http://ieaddons.com)，即可為 Internet Explorer 8 添加新的搜尋提供者，如 Google、Yahoo、Wiki 等等。

值得一提的是，Search Provider 還提供了一個新概念，也就是 Visual Search 概念，一般來說，當我們於瀏覽器提供的搜尋框中輸入文字後，瀏覽器便會開啟搜尋引擎的網頁，讓使用者查看搜尋結果，在 Internet Explorer 8 中，除了原有行為不變外，在使用者鍵入文字期間，還會顯示搜尋關鍵字建議，這點與 Google 等大型搜尋網站的行為模式相同，但 Internet Explorer 8 除了提供關鍵字建議外，還允許搜尋提供者針對搜尋關鍵字提供圖形，大幅提升了搜尋時的視覺效果及方便性，這就是 Visual Search 概念。

在本文中，我將針對這三大功能進行演示，並討論如何將現行網頁提升至符合 Internet Explorer 8 相容規格，讓使用者在使用貴公司網站時，擁有不同於其它網站的新視野。

Web Slice 演示
Accelerators (加速器)演示
Search Provider (搜尋提供者)演示
從程式開發看三大功能
Web Slice 的開發 -ASP.NET
Web Slice 的開發 -PHP
Accelerators (加速器)的開發 - ASP.NET
Accelerators (加速器) 的開發 - PHP
Search Provider (搜尋提供者) 的開發 - ASP.NET
Search Provider (搜尋提供者)的開發 - PHP
後記

Web Slice 演示

如前文所提，Web Slice 其實是一個網頁區段訂閱機制，目前支援此功能的網站有 EBay、MSN 等等，只要安裝好 Internet Explorer 8 後，進入 ie8.ebay.com 網站並於【Start a Web Slice enabled search】中鍵入搜尋產品關鍵字後，即可得到以下的畫面。

EBay

注意到這個符號了嗎？這就代表著此區段是 Web Slice 區域，我們可以於點擊該圖示來進行此 Web Slice 的訂閱。

訂閱 Web Slice

按下確定後，此 Web Slice 便會出現在 Internet Explorer 8 的工具列上。

以滑鼠單點該項目，可開出預覽畫面。

按紐可前往該網站，而按紐可更新此 Web Slice 的預覽內容，你也可以將預覽視窗拉大。

視 Web Slice 的定義而異，Internet Explorer 8 會照 Web Slice 的建議的更新區間，定時連往指定的網站更新 Web Slice 的預覽內容，使用者也可以透過用右鍵選取於工具列上的 Web Slice，再點選內容項目來調整。

Accelerators (加速器)演示

加速器的行為模式類似即時翻譯軟體，不同的是即時翻譯只能以選取字翻譯，而加速器可以依據定義，對選取字串做搜尋或是翻譯動作，這有點像是把即時翻譯軟體取選取字串的功能粹取出來，然後把後續的處理設計成開放式的架構。Microsoft 為 Internet Explorer 8 提供了許多加速器的實作，只要上 http://ieaddons.com 網站，即可找尋適合你的加速器，此節我們將以 Wiki 為例來演示加速器。

點擊 Define With Wikipedia 項目下的【Install Accelerator】連結後，Internet Explorer 8 會提示即將安裝指定的加速器。

選擇安裝後，任意開啟一個網頁，並選取網頁中特定區段文字後，即會見到如下圖的畫面。

注意到的圖示了嗎？這就是允許使用加速器的圖示，點擊該圖示後，便可使用Wiki加速器來以選取文字進行處理。

在點擊 Define with Wikipedia 項目後，Internet Explorer 8 即會開啟 Wiki 網頁來顯示結果。

是不是很方便呢？

Search Provider (搜尋提供者)演示

搜尋提供者可以讓 Internet Explorer 8 內建的搜尋框整合其它搜尋引擎來進行查詢，要取得如 Google 等搜尋引擎的搜尋提供者，可於 http://www.ieaddons.com/en/searchproviders/ 網站取得。

與 Accelerators 的安裝方式相同，點擊 Install Search Provider 連結後，即可安裝該搜尋提供者。完成後可於 Internet Explorer 8 的搜尋框中點擊圖示後，切成 Google Search Provider。

接著鍵入一些文字，在鍵入文字的同時，搜尋框也會提供關鍵字建議，這是由 Google Search Provider 所提供的。

那什麼是 Visual Search 呢？請於安裝 Google Search Provider 的網頁中，尋找【EBay Visual Search】並安裝，接著選用其來進行搜尋，即可得到以下畫面。

見到了嗎？除了關鍵字外，EBay 還提供了圖形顯示，這就是 Visual Search。

從程式開發看三大功能

是的，Internet Explorer 8雖然提供了這三大功能，但是這三大功能能否派上用場，仍然得仰賴各大網站的支持，畢竟這三大功能除了 Search Provider 是使用 Open Search 這個公開規格外，Web Slice、Accelerators 都是 Internet Explorer 8 獨有的規格。因此，如果想讓現有的網站支援 Internet Explorer 8 所提出的新功能，必然得對現行網站做一些調整，不過別擔心，這其實並不難，這三大功能立基於 HTML 及 XML、JavaScript 之上，這也代表著不管你的網站是使用 PHP、JSP、CGI、ASP、ASP.NET，只要進行些許調整，即可讓你的網站晉升 Internet Explorer 8 相容的新境界。本文將持續以程式觀點，使用 ASP.NET 及 PHP 4 來介紹如何讓你的網站支援 Internet Explorer 8 的三大功能。

Web Slice 的開發 -ASP.NET

說穿了，Web Slice 其實只是一個簡單的 HTML Element 定義而已，透過特定的 CSS Class 指定，就可以讓網頁的某個區段變成 Web Slice。以 ASP.NET 為例，在用 Visual Studio 2008 建立一個 Web Application 後，只要於 Default.aspx 中鍵入以下的程式碼，即可讓該網頁支援 Web Slice。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
     Inherits="FirstSlice._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id="slice1" class="hslice">
         <h2 class="entry-title">Times</h2>
         <div class="entry-content">
            <%= DateTime.Now.ToString("g") %>
            </p>
            <img src="http://sin.stb01.s-msn.com/i/48/23559E271728628A31199AA4442B3.gif" />
         </div>
      </div>
    </div>
    </form>
</body>
</html>

請注意紅字粗體區段，此區段定義了一個 DIV Element，並將 class 指定為【hslice】，這就是 Web Slice 定義的 CSS Class，Internet Explorer 8 在遭遇此指定 CSS Class 的 HTML Element 時，便會將其視為一個 Web Slice，接下來指定 entity-title class 的 H2 Element，即是顯示於 Internet Explorer 8 工具列上的 Web Slice 標題，最後指定為 entity-content class 的 DIV Element 即是使用者點選該 Web Slice 標題後顯示的預覽內容，在這個 entity-content 中，可以放置任意的 HTML Element，以本例而言，就借用了 MSN 的圖示來演示圖形的顯示。完成後執行此網站，即可得到以下的畫面。

點擊符號後，即可進行 Web Slice 的訂閱。

完成訂閱後，便可於工具列上見到此 Web Slice。

如果你想要設定此 Web Slice 的建議更新區間，可以加上 ttl 屬性設定，如下所示：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FirstSlice._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div id="slice1" class="hslice">
         <h2 class="entry-title">Times</h2>         
         <div class="entry-content">
            <%= DateTime.Now.ToString("g") %>
            </p>
            <img src="http://sin.stb01.s-msn.com/i/48/23559E271728628A31199AA4442B3.gif" />
         </div>
         <p style="visibility:hidden">Updates occur every <span class="ttl">60</span> minutes.</p>
      </div>
    </div>
    </form>
</body>
</html>

此程式將建議 Internet Explorer 8 每隔 60 分鐘進行更新 Web Slice 預覽資訊，訂閱此 Web Slice 後查看其內容，將如下圖所示。

有一點需特別注意，IE8 對於 TTL 屬性的設定採建議值，當設定 TTL 值小於 15 分鐘時，便視同 15 分鐘，當 TTL 大於 15 分鐘時，則由 IE8 計算出近似的建議值。例如設定 TTL 為 16 分鐘時，最後的建議值會是 20 分鐘。另外也請注意，視網路頻寬而定，TTL 的設定值僅能做為參考用，實務上不太可能完全依照設定值，毫秒不差的進行週期更新。

Web Slice 的開發 -PHP

前面說過，Internet Explorer 8 的三大功能並不僅限於特定網站平台才能使用，以 PHP 而言，只要能夠定義 DIV、CSS Class，那麼支援 Web Slice 也是很簡單的，下面的 PHP 4 程式便可達到此目的。

<html>
 <head>
  <title>PHP Slice Test</title>
 </head>
 <body>
  <div id="slice1" class="hslice">
         <h2 class="entry-title">Times</h2>
         <div class="entry-content">
            <?php echo 'current time:' .date('Y-M-D') ?>
            </p>
            <img src="http://sin.stb01.s-msn.com/i/48/23559E271728628A31199AA4442B3.gif" />
         </div>
      </div>
 </body>
</html>

一樣，處理手法一樣是使用 hslice CSS Class，不同的是此例使用 PHP 4 語言。執行後可得到下列畫面。

安裝 Web Slice 後的結果如下圖。

如何？是不是很簡單呢？趕快為你的 PHP 網頁添上新衣吧。

Accelerators (加速器) 的開發 - ASP.NET

加速器的開發比起Web Slice來麻煩些，我們必須定義一個XML文件檔案，來描述加速器的能力及指定將選取字送往那個網站處理，本節以巴哈姆特這個游戲網站為例，該網站提供了查詢功能，如下圖所示。

由此網頁我們得知，此搜尋必須傳入 kw 及 s 兩個參數，因此我們可以定義如下的 XML 文件檔案。

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription
  xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://acg.gamer.com.tw/</homepageUrl>
  <display>
    <name>巴哈姆特</name>
    <icon>http://pic.bahamut.com.tw/inside_w/bahamut2.jpg</icon>
    <description>巴哈姆特</description>
  </display>
  <activity category="share">
    <activityAction context="selection">
      <preview action="http://acg.gamer.com.tw/search.php">
        <parameter name="kw" value="{selection}" />
        <parameter name="s" value="1" />
      </preview>
      <execute method="get" action="http://acg.gamer.com.tw/search.php" >
        <parameter name="kw" value="{selection}" type="text"/>
        <parameter name="s" value="1" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

homepage 區段描述此加速器的 Domain，請注意，這個 Domain 限制了接下來網站的存取權限，所以要特別小心，如果接下來設定選取字送往的網站與此 Domain 不同，搜尋將會失敗。

display 區段則描述了加速器的資訊，例如名稱、圖示、及說明簡介。

activity 區段是最重要的一部份，這裡描述了兩個區段，一個是 preview，這是當使用者移往加速器圖示時顯示的預覽畫面，Internet Explorer 8 會依據 action 的定義，將選取字送往該網頁，參數的定義就如 parameter 區段所描述，以巴哈姆特而言，kw 參數代表查詢字串，所以此處將 kw 的資料來源(value)定義為【{selection}】，此處的 {selection} 指的便是使用者選取的文字，接下來的 s 參數則是搜尋類別，此處預設為 1，也就是搜尋巴哈姆特的資料庫。

接下來的 execute 區段則是當使用者按下加速器後導向的網頁，定義上與 preview 區段類似。

完成此 XML 文件後，我們便可建立一個網頁，將此 XML 文件放入網站，並於 Default.aspx 頁面上放入一個 Button 後鍵入以下的程式碼。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FirstAcc._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server"  Text="Install"
          OnClientClick="window.external.addService('http://localhost:64428/Acc1.xml')"/>
    </div>
    </form>
</body>
</html>

請注意紅字部份，【windows.external.addService】函式是 Internet Explorer 8 內建的 JavaScript 函式，呼叫此函式並傳入一個 XM L文件檔的 URL 後，Internet Explorer 8 即會提示使用者安裝 Accelerators。完成後執行此網站，並按下按紐後即可得到如下的畫面。

完成安裝後，前往任一網站並選取關鍵字後，即可使用此加速器。

由於加速器的預覽畫面有大小限制，所以現行巴哈姆特的搜尋網頁內容仍太大，我們直接點擊加速器來前往該網頁，看看是否正常運作。

是否有種資訊隨手可得的感受呢？

在實際應用上，加速器連結的網站最好能提供一個長寬較小的網頁，用來顯示預覽畫面用，也就是 preview 區段所設定的網址，然後於 execute 區段放入較大的完整網頁網址。

Accelerators (加速器) 的開發 - PHP

基於前例，我們知道加速器其實是 XML+JavaScript 的架構，因此要用 PHP 4 來實現就不困難了，下例是一個簡單的範例。

<html>
 <head>
  <title>PHP 加速器</title>
 </head>
 <body>
   <input type=button value='Install' onclick="window.external.addService('http://localhost/test3/acc1.xml')"/>
 </body>
</html>

呵，連 PHP 語法都不用，直接用 HTML 即可表示，下圖是執行結果。

Search Provider (搜尋提供者) 的開發 - ASP.NET

比起前面兩個功能，Search Provider 的實作麻煩多了，別誤會，就現行的搜尋引擎提供 Search Provider 並不難，難的是要結合 Visual Search 概念，目前 Google 並未提供此服務，只有 EBay 有提供。那我們要實作這類功能的話，又要怎麼做呢？本節將從一個搜尋器開始建立，此搜尋器將提供使用者查詢北風資料庫中的員工資料，並且於搜尋健議中提供圖形，下面是搜尋引擎的程式碼。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchEmp.aspx.cs" Inherits="FirstSP.SearchEmp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [LastName], [FirstName], [Photo], [EmployeeID] FROM [Employees] WHERE ([FirstName] LIKE '%' + @FirstName + '%')">
            <SelectParameters>
                <asp:QueryStringParameter Name="FirstName" QueryStringField="kw" 
                    Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:Button ID="Button1" runat="server" OnClientClick="window.external.AddSearchProvider('http://localhost:64546/SProvider.xml')"  
Text="Install Search Provider" />
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
            AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" 
            BorderWidth="1px" CellPadding="2" DataKeyNames="EmployeeID" 
            DataSourceID="SqlDataSource1" ForeColor="Black" GridLines="None" Width="398px">
            <Columns>
                <asp:BoundField DataField="LastName" HeaderText="LastName" 
                    SortExpression="LastName" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                    SortExpression="FirstName" />
                <asp:ImageField DataImageUrlField="EmployeeID" 
                    DataImageUrlFormatString="ImageShow.ashx?ID={0}">
                </asp:ImageField>
            </Columns>
            <FooterStyle BackColor="Tan" />
            <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" 
                HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
            <HeaderStyle BackColor="Tan" Font-Bold="True" />
            <AlternatingRowStyle BackColor="PaleGoldenrod" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

如你所見，只是簡單的運用 SqlDataSource 及 GridView 控件而已。重頭戲是下面提供搜尋建議的程式碼。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchSuggestion.aspx.cs" Inherits="FirstSP.SearchSuggestion" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace FirstSP
{
    public partial class SearchSuggestion : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["kw"] != null)
            {
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[
                               "NorthwindConnectionString"].ConnectionString))
                {
                    conn.Open();
                    SqlCommand cmd = new SqlCommand(
              "SELECT EmployeeID,FirstName,LastName FROM Employees WHERE FirstName LIKE @ID", 
              conn);
                    cmd.Parameters.AddWithValue("@ID", "%"+Request["kw"]+"%");
                    using (SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection))
                    {
                        string xml = "<?xml version=\"1.0\"?>" +
"<SearchSuggestion version=\"2.0\" xmlns=\"http://opensearch.org/searchsuggest2\">";
                        xml += "<Query>" + Request.QueryString["kw"] + "</Query><Section>";
                         
                        while (reader.Read())
                        {
                            xml += "<Item>"+                                   "<Text>"+reader.GetString(reader.GetOrdinal("FirstName"))+"</Text>"+
"<Description>"+reader.GetString(reader.GetOrdinal("LastName"))+"</Description>"+                                  "<Url>http://localhost:64546/SearchEmp.aspx?kw="+HttpUtility.UrlEncode(reader.GetString(r
                                     eader.GetOrdinal("FirstName")))+"</Url>"+
                                   "<Image source=\"http://localhost:64546/ImageShow.ashx?ID="+
                                      reader.GetInt32(reader.GetOrdinal("EmployeeID")).ToString()+
                                   "\" alt=\"Image\""+
                                   " height=\"50\" width=\"50\" align=\"middle\"/></Item>";
                        }
                        xml += "</Section></SearchSuggestion>";
                        Response.Clear();
                        Response.ContentType = "text/xml";
                        Response.Write(xml);
                        Response.Flush();
                        Response.End();
                        return;
                    }
                }
            }
        }
    }
}

看程式碼或許不是那麼清楚，其實 Search Provider 的定義是要求提供建議的網頁必須輸出一個 XML 文件或是 JSON 格式，此例以 XML 文件為例，格式大略如下所示。

其中 Query 區段必須符合關鍵字(這很重要，不同將會出現查詢錯誤)，其次是每條建議必須以 Item Element 描述，而 Item 必須放在 Section 中，Item 內可以描述此建議的顯示文字、簡介、連結及圖型。SearchSuggesions.aspx 就是負責依據查詢字串產生此文件而已。由於我們想於建議窗中提供圖形顯示，因此需要另一個網頁來取出內嵌於資料庫中的員工圖形。

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Xml.Linq;

namespace FirstSP
{
    /// <summary>
    /// $codebehindclassname$ 的摘要描述
    /// </summary>
    public class ImageShow : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.QueryString["ID"] != null)
            {
                using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[
                                     "NorthwindConnectionString"].ConnectionString))
                {
                    conn.Open();
                    SqlCommand cmd = new SqlCommand(
                       "SELECT Photo FROM Employees WHERE EmployeeID = @ID", conn);
                    cmd.Parameters.AddWithValue("@ID", context.Request["ID"]);
                    using (SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection))
                    {
                        if (reader.Read())
                        {
                            context.Response.ContentType = "image/bmp";
                            byte[] buff = new byte[16384];
                            reader.GetBytes(0, 0, buff, 0, 78);
                            long startIndex = 78;
                            while(true)
                            {
                                long readSize = reader.GetBytes(0,startIndex,buff,0,16384);                                
                                context.Response.OutputStream.Write(buff,0,(int)readSize);
                                if(readSize != 16384) break;                                
                                startIndex+= readSize;
                            }
                            context.Response.Flush();
                            context.Response.End();
                        }
                    }
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

接著如同加速器一般，我們必須提供一個 XML 文件，描述此 Search Provider 的功能定義。

<?xml version="1.0" encoding="utf-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Employees Search</ShortName>
  <Description>Searching Employees</Description>
  <Tags>Samples</Tags>
  <Contact>code6421@mail.tw</Contact>>
  <Url type="text/html"  template="http://localhost:64546/SearchEmp.aspx?kw={searchTerms}"/>
  <Url type="application/x-suggestions+xml"  
         template="http://localhost:64546/SearchSuggestion.aspx?kw={searchTerms}" />
  <LongName>Search Employees</LongName>
  <Developer>code6421</Developer>
  <Attribution>
    Copyright 2008, CT Inc., All Rights Reserved
  </Attribution>
  <SyndicationRight>open</SyndicationRight>
  <AdultContent>false</AdultContent>
  <Language>zh-TW</Language>
  <OutputEncoding>UTF-8</OutputEncoding>
  <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

這是遵循 Open Search 規格的定義文件，其中除了描述 Search Provider 的名稱及作者、公司外，最重要的是 Url 區段，第一個 Url 區段是當使用者直接鍵入文字並跳往搜尋頁面時參數的傳遞方式，第二個則是使用者鍵入文字期間，取得建議字的網址及參數傳遞'方式。完成這個文件的定義後，最後只需如加速器般建立一個網頁，讓使用者可以安裝此 Search Provider 即可，這是透過 Internet Explorer 8 的內建 JavaScript 函式【window.external.AddSearchProvider】完成，本例將此功能結合於 SearchEmp.aspx 中，執行結果如下所示。

安裝後，便可於搜尋框中選到我們的 Search Provider。

Search Provider (搜尋提供者)的開發 - PHP

除開資料庫存取議題外，Search Provider 用 PHP 4 來實作並不困難，本節將同樣以北風資料庫員工搜尋為例，透過 PHP 4 連結 SQL Server 2005 來實做 Search Provider，下面是搜尋本體頁面。

<html>
 <head>
  <title>PHP Slice Test</title>
 </head>
 <body>
 <input type=button value="Install Provider" onclick="window.external.AddSearchProvider('http://localhost/test3/sp.xml')"/>
 <table border=1>
 <tr>
 <td>FirstName</td>
 <td>LastName</td>
 <td></td>
 </tr>
 <?php
   $cnx = odbc_connect( 'DRIVER={SQL Server};SERVER=JEFFRAY;DATABASE=Northwind' , 'sa', '' );
   $qstr = "SELECT * FROM Employees WHERE FirstName LIKE '%";
   $conv = iconv('UTF-8','BIG5',urldecode($_GET['kw']));
   if ($conv)
   {
      $qstr.=$conv;
   }
   else
   { 
      $qstr.= $_GET['kw'];
   }
   $qstr.= "%'";
   $cur= odbc_exec( $cnx, $qstr );
   while( odbc_fetch_row( $cur ) )
   {
      echo '<tr>';
      echo '<td>'.odbc_result($cur,'FirstName').'</td>';
      echo '<td>'.odbc_result($cur,'LastName').'</td>';
 echo '<td><img src="http://localhost/test3/imageshow.php?kw='.odbc_result($cur,'EmployeeID').'"/></td>';
      echo '</tr>';
   }   
   echo '</table>';
 ?>    
 </table> 
 </body>
</html>

接下來是圖形取出頁面。

<?php
header("content-type:image/bmp"); 
$cnx = odbc_connect( 'DRIVER={SQL Server};SERVER=JEFFRAY;DATABASE=Northwind' , 'sa', '' );
$qstr = "SELECT Photo FROM Employees WHERE EmployeeID= '";
$qstr.= $_GET['kw'];
$qstr.= "'";
$cur= odbc_exec( $cnx, $qstr );
odbc_longreadlen($cur, 65535); 
odbc_binmode($cur, ODBC_BINMODE_RETURN);
$Images = odbc_result($cur, 1);
echo substr($Images,78);
?>

接著是搜尋建議提供者的頁面。

<?php
header("Content-type:text/xml;charset=utf-8");
echo '<?xml version="1.0" encoding="utf-8"?>'; 
echo '<SearchSuggestion version="2.0" xmlns="http://opensearch.org/searchsuggest2">';
echo '<Query>'.$_GET['kw'].'</Query>';
echo '<Section>';
$cnx = odbc_connect( 'DRIVER={SQL Server};SERVER=JEFFRAY;DATABASE=Northwind' , 'sa', '' );
$qstr = "SELECT * FROM Employees WHERE FirstName LIKE '%";
$qstr.= iconv('UTF-8','BIG5',urldecode($_GET['kw']));
$qstr.= "%'";
$cur= odbc_exec( $cnx, $qstr );
while( odbc_fetch_row( $cur ) )
{      
      echo '<Item>';
      echo '<Text>'.iconv('BIG5','UTF-8',odbc_result($cur,'FirstName')).'</Text>';      
      echo '<Description>'.iconv('BIG5','UTF-8',odbc_result($cur,'FirstName')).'---'.iconv('BIG5','UTF-8',odbc_result($cur,'LastName')).'</Description>';
      echo '<Url>http://localhost/test3/search.php?kw='.iconv('BIG5','UTF-8',odbc_result($cur,'FirstName')).'</Url>';
      echo '<Image source="http://localhost/test3/imageshow.php?kw='.odbc_result($cur,'EmployeeID').'" height="50" width="50" />';
      echo '</Item>';     
}

echo '</Section>';
echo '</SearchSuggestion>';

if (odbc_error())
{
    echo odbc_errormsg($cnx);
}
?>

最後只要提供對應的XML文件即可。

<?xml version="1.0" encoding="utf-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Employees Search</ShortName>
  <Description>Searching Employees</Description>
  <Tags>Samples</Tags>
  <Contact>code6421@mail.tw</Contact>>
  <Url type="text/html"  template="http://localhost/test3/search.php?kw={searchTerms}"/>
  <Url type="application/x-suggestions+xml"  template="http://localhost/test3/suggestions.php?kw={searchTerms}" />
  <LongName>Search Employees</LongName>
  <Developer>code6421</Developer>
  <Attribution>
    Copyright 2008, CT Inc., All Rights Reserved
  </Attribution>
  <SyndicationRight>open</SyndicationRight>
  <AdultContent>false</AdultContent>
  <Language>zh-TW</Language>
  <OutputEncoding>UTF-8</OutputEncoding>
  <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

下面兩張圖是執行畫面及搜尋畫面。

如果你曾經嘗試用 PHP 4 來建立 Search Provider，但苦於中文問題的話，那麼請仔細查看 Suggestions.php 及 search.php 兩個檔案，裡面的 Query 區段是不編碼的，但其它區段則必須編為 UTF-8，另外！Search 進行的動作分成兩種，一是鍵入文字後按下 Enter，這會變成以 URL 編碼方式來傳送查詢字，另一種則是點選搜尋建議，這是以 UTF-8 原碼傳遞，因為 ASP.NET 會自動判別此差異性，所以前例並未做特殊處理，但 PHP 4 不會，因此你會於 search.php、suggestions.php 中看到轉碼動作。

後記

Internet Explorer 8 的三項新功能，未來將會改變人們使用瀏覽器的方式，原因很簡單，我們都喜歡資訊隨手可得的感覺，而 Internet Explorer 8 做到了這點，接下來便是等各大網站支援這些功能了。

範例下載

http://code6421.myweb.hinet.net/IE8/IE8_Examples.zip

參考資料

What's New in Internet Explorer 8