Internet Explorer 8

Neue Funktionen: Web Slices, Schnellinfos und Suchanbieter

Daron Yöndem

Codedownload verfügbar in der MSDN-Codegalerie
Code online durchsuchen

Dieser Artikel basiert auf einer Vorabversion von Internet Explorer 8. Änderungen an allen Informationen in diesem Artikel sind vorbehalten.

Inhalt

Definieren von Seitenbereichen mit Web Slices
Ablauf- und Aktualisierungsfrequenz
Beschleuniger
Suchvorschläge
AJAX-Navigation
DOM-Storage
Offline- und Online-Arbeitsmodi
Timeouts von XMLHttpRequest
Schlussbemerkung

Internet Explorer 8 repräsentiert einen wichtigen Schritt in der Entwicklung des Produkts. Es sind neue Endbenutzerfeatures wie Web Slices, Beschleuniger und Suchvorschläge sowie zusätzlich fortschrittlichere Entwicklerfeatures wie AJAX-Navigation und DOM-Storage enthalten.

In diesem Artikel wird ausführlich auf diese Features eingegangen, um festzustellen, wie Internet Explorer 8 sowohl Entwicklern als auch Benutzern das Leben erleichtern kann. Sie werden sehen, wie Sie mit diesen neuen Features Bereiche einer Seite definieren und deren Ablauf- und Aktualisierungsfrequenz steuern, die Such- und Navigationsfunktionen für den Benutzer verbessern können und vieles mehr.

Definieren von Seitenbereichen mit Web Slices

Mithilfe von Web Slices können Sie eine Webseite in Stücke aufteilen, sodass Sie nur die Teile anzeigen und aktualisieren können, die für Sie von Interesse sind. Web Slices können eine nützliche Lösung für einen Benutzer sein, der die Aktualisierungen von Ihrer Website verfolgen, aber keinen RSS-Reader verwenden möchte. RSS-Reader können für einige Endbenutzer ein wenig kompliziert sein und sind nicht immer geeignet.

Web Slices sind programmgesteuert definierte Bestandteile einer Webseite, die Benutzer aufdecken, indem sie die Maus über den Bildschirm bewegen oder in der Symbolleiste auf die Schaltfläche „Web Slice abonnieren“ klicken. Diese Aktion ist in Abbildung 1 dargestellt.

Abbildung 1 Aufdecken eines Web Slice durch Hovering

Nachdem der Benutzer einen Web Slice abonniert hat, wird der Titel des Slice in der Favoritenleiste von Internet Explorer 8 angezeigt. Internet Explorer kontaktiert die Onlinequelle immer wieder und informiert den Benutzer über Aktualisierungen, indem der Titel des Slice fett formatiert wird. Wenn Sie auf den Titel klicken, wird der Inhalt des Slice in einem Popupfenster wie in Abbildung 2 angezeigt.

Abbildung 2 Das aktuelle Gebot für eine Auktion in einem Web Slice finden

Ein wichtiger Vorteil von Web Slices besteht darin, dass Benutzer eine Webseite nicht fortlaufend aktualisieren müssen, um Änderungen auf der Website nachzuverfolgen. Ferner können Ihre Web Slices, je nachdem, wie Sie die Datenquellen dafür strukturieren, zur Schonung von Ressourcen auf dem Webserver beitragen, da nur relevante Daten aktualisiert werden und nicht die ganze Seite. Außerdem kann Ihr System mithilfe von Web Slices genauere Statistiken dazu bereitstellen, wie Benutzer auf verschiedene Bereiche einer Webseite zugreifen. Dies kann sich auf weitere Entwurfsentscheidungen auswirken.

Wie bereits erwähnt, werden Web Slices vom Entwickler vordefiniert. Wie werden diese Teile also definiert? Zuerst müssen Sie mit dem hslice-Klassennamen ein HTML-div-Element als Web Slice-Container markieren. Das hslice-Element enthält alle übrigen Definitionen, die für den Web Slice erforderlich sind. Hier sehen Sie eine leere Web Slice-Definition:

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

Jeder Web Slice muss eine eindeutige ID haben, da Internet Explorer die Slices auf einer Seite dadurch voneinander unterscheidet. Wenn sich die ID eines Web Slice ändert, nachdem Benutzer diesen abonniert haben, kann Internet Explorer diesen nicht mehr finden und den Inhalt der Favoritenleiste nicht aktualisieren.

Jeder Web Slice sollte ein Element zum Identifizieren des Slice-Titels enthalten. Der Titel wird durch den Titel des Eintrags der CSS-Klasse identifiziert. Dieser Inhalt wird in der Favoritenleiste und im Befehlleistenmenü „Feedsuche“ angezeigt. Der Text des Titels des Eintrags kann bei Bedarf geändert werden, wenn der Web Slice sich selbst aktualisiert.

Um das Erstellen Ihres ersten Web Slice abzuschließen, muss nur noch ein Element hinzugefügt werden: der Inhalt des Eintrags. Der Web Slice und der Titel sind definiert, doch dem Benutzer wird kein Inhalt angezeigt. Definieren Sie den Inhalt des Web Slice, indem der Inhalt des Eintrags der CSS-Klasse auf den Inhalt angewendet wird, der dem Benutzer angezeigt werden soll:

<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>

In Abbildung 3 wird die Web Slice-Definition für dieses Beispiel angezeigt. Der Web Slice, „ProductID1“ genannt, hat einen Titel und Inhalt.

Abbildung 3 Ein einfacher Web Slice

Mit visuellen Elementen und Inline- (oder globalen) CSS-Stilen können Sie die Benutzerfreundlichkeit des Web Slice weiter erhöhen. Die einzige Einschränkung besteht darin, dass keine Skripterstellung oder ActiveX-Steuerelemente (einschließlich Silverlight) zulässig sind. Wenn Sie ActiveX benötigen, müssen Sie eine alternative Anzeigequelle verwenden. Im Containerelement für den Inhalt des Web Slice-Eintrags kann eine alternative Anzeigequelle definiert werden.

Wie hier gezeigt, müssen Sie den Inhalt nicht im entry-content-Element platzieren. Sie leiten den Web Slice einfach um und teilen dem Browser mit, dass der Inhalt von einer anderen URL bereitgestellt wird:

<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>

Auf diese Weise können Sie nachverfolgen, wie oft jeder Web Slice aktualisiert wird und wie viele Benutzer welche Slices verfolgen, indem Sie einfach die Anzeigequellenseiten verfolgen. Auf der Zielseite „alternative_display.aspx“ können Sie außerdem ActiveX-Steuerelemente verwenden.

Ablauf- und Aktualisierungsfrequenz

Manchmal werden Sie Web Slices benötigen, die zeitgerecht ablaufen, selbst wenn der Benutzer offline ist und der Web Slice nicht aktualisiert werden kann. Dies trifft insbesondere auf Websites für Onlineauktionen oder Onlineverkaufskampagnen zu. Sie können die Endzeit eines Web Slice festlegen, indem Sie den endtime-Klassennamen und den entsprechenden Datums-/Zeitwert in einem HTML-Abkürzungselement festlegen, etwa so:

<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>

Benutzer können die Aktualisierungsfrequenz festlegen, indem sie in der Favoritenleiste mit der rechten Maustaste auf den Titel des Web Slice und dann auf den Befehl „Eigenschaften“ klicken. Wie in Abbildung 4 dargestellt sind benutzerdefinierte Zeitpläne zulässig.

Abbildung 4 Benutzer können die Aktualisierungsfrequenz eines Web Slice festlegen

Zusätzlich zu den benutzerdefinierten Einstellungen können Sie programmgesteuerte Frequenzen angeben, indem Sie eine Gültigkeitsdauer (ttl-Wert) festlegen:

<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>

Um eine Frequenz anzugeben, wurde für dieses Beispiel ein DIV-Element mit der CSS-Klasse „ttl“ und dem Inhalt 15 erstellt. Dadurch wird der Browser angewiesen, den Inhalt dieses Web Slice alle 15 Minuten auf mögliche Aktualisierungen zu überprüfen. Beachten Sie, dass in der Entwurfsauswahl die Sichtbarkeit des DIV-Elements auf „nicht sichtbar“ festgelegt wurde, indem der Wert der CSS-Anzeige auf „Kein“ gesetzt wurde.

Wie bereits erwähnt, können Sie alternative Anzeigequellen verwenden. Manchmal kann es aber nützlich sein, wenn ein Web Slice seine Daten einfach von einer externen Datenquelle abruft. Bei der Verwendung externer Datenquellen gibt es zwei Möglichkeiten. Eine Option besteht darin, einen externen Web Slice auf einer anderen Seite zu verwenden, wie Sie im nächsten Codeausschnitt sehen.

<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>

Mit dieser Web Slice-Definition wird ein anderer Web Slice aus „extern.aspx“ abgerufen. Der Ziel-Web Slice wird anhand seiner ID gefunden, die „ProductID1“ lautet, und als Anker an die URL angefügt. Durch die Anwesenheit des rel-Attributs im Ankertag wird Internet Explorer angewiesen, die URL des Ankertags als Web Slice-Datenquelle zu verwenden, statt die Inhalte im div-Tag anzuzeigen.

Die zweite Option besteht darin, einen externen RSS-Feed zu verwenden. Internet Explorer verwendet immer das erste Element im RSS-Feed und zeigt den Inhalt des Eintrags der eingehenden RSS-XML an:

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

An dieser Stelle hat der Web Slice einen feedurl-Anker, der auf eine XML-Quelle abzielt. Diese könnte problemlos durch einen generischen Handler ersetzt werden, der in Abhängigkeit von einem Parameter dynamisch XML ausgibt. Dies ist die XML-Quelle aus dem Beispiel:

<?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>

Anstatt die Einstellungen des Web Slice im entry-content-Element des HTML-Codes zu definieren, können Sie sie in der XML-Datenquelle definieren. Im früheren Code stellt die XML-Quelle Werte für ttl- und Titeleigenschaften eines Web Slice bereit. Das description-Tag kann Rich HTML enthalten, ohne Probleme zu verursachen.

Beschleuniger

Beschleuniger sind vorhanden, um häufige Aufgaben beim Durchsuchen des Webs zu beschleunigen und stärker zu automatisieren. Denken Sie zum Beispiel daran, wie oft Sie Inhalt von einer Website kopieren und in eine andere einfügen. Angenommen, Sie haben gerade die gesuchte Adresse auf einer Unternehmenswebsite gefunden und benötigen jetzt eine Wegbeschreibung. Sie kopieren die Adresse, rufen die Website „Live Maps“ auf und fügen die Adresse ein. Mit einem Beschleuniger können Sie diesen Prozess automatisieren.

In Abbildung 5 ist ein Beschleuniger dargestellt, der einen Ort auf der Karte findet, wenn der Benutzer auf die Adresse klickt. Einen eigenen Beschleuniger zu schreiben ist einfach. Als Entwickler müssen Sie nur mithilfe einer XML-OpenService Description-Datei definieren, welche Aufgaben der Beschleuniger übernehmen soll. Sehen Sie sich die Details des OpenService Description-Formats an. Im Folgenden wird eine grundlegende OpenService Description-Datei angezeigt:

<?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>

Abbildung 5 Live Maps-Beschleuniger bietet sofortige Ortssuche

Die Haupteigenschaften eines Beschleunigers sind die homepageUrl-, Anzeige- und Aktivitätstags. Die „homepageUrl“ ist die URL des Diensts, den Sie bereitstellen. Alle URLs, die in anderen Tags und Einstellungen verwendet werden, sollten die gleiche Domäne verwenden wie die „homepageUrl“. Mit dem Anzeigetag werden die visuellen Aspekte der Befehlsschaltfläche eines Beschleunigers im Kontextmenü von Internet Explorer festgelegt. Wenn der Benutzer mit der rechten Maustaste auf die Seite klickt, wird der Name und das Symbol des Beschleunigers angezeigt.

Mit dem Aktivitätselement wird der Dienst definiert, den der Beschleuniger bereitstellt. In diesem Beispiel stellt der Beschleuniger eine Übersetzungsaktivität bereit. Mithilfe unterschiedlicher Kategorien können Sie steuern, wie Internet Explorer Ihren Beschleuniger im Kontextmenü gruppiert, z. B. durch die Verwendung unterschiedlicher Kategorien wie „Hinzufügen“ (zum Hinzufügen eines Links), „Blog“ (um bei einem Remotedienst einen Blog zu erstellen), „Definieren“ (um nach Definitionen zu suchen), „Zuordnen“ (um nach Zuordnungen zu suchen) und „Übersetzen“ (um den ausgewählten Text zu übersetzen). Sie können auch Ihre eigenen Kategorien definieren. Als Regeln für Kategoriedefinitionen wird vorgeschlagen, dass es sich dabei um ein Verb handeln sollte und dass sie generisch genug sein sollten, damit andere Entwickler von Beschleunigern die gleiche Kategorie verwenden können.

Jetzt ist es an der Zeit, die „activitiyActions“ in den Aktivitätstags zu definieren. Im Folgenden sehen Sie eine „activityAction“ mit einem Kontextwert von „Auswahl“:

<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>

Das Kontextattribut ist die Hauptkomponente einer „activityAction“. Anhand des Kontexts wird definiert, wann diese Aktion verfügbar ist. Wenn der Beschleuniger keine Aktion bereitstellt, die auf den aktuellen Kontext passt, ist dies im Menü des Beschleunigers in Internet Explorer nicht sichtbar. Die aktuellen Kontextauswahlen sind „Auswahl“ und „Link“. Wenn der Kontext „Auswahl“ ist, muss der Benutzer Text auswählen und das Beschleunigermenü aufrufen, um den Beschleuniger zu verwenden. Wenn der Kontext „Link“ ist, muss der Benutzer mit der rechten Maustaste auf einen Hyperlink klicken, um die Aktion zu starten.

In jedem activityAction-Element kann eine „execute“ und eine „preview“-Definition vorliegen. Die „execute“-Definition wird gestartet, wenn der Benutzer im Beschleunigermenü auf den Beschleunigerbefehl klickt. Die „preview“-Definition wird gestartet, wenn der Benutzer die Maus im Menü über den Beschleunigerbefehl bewegt. Sowohl das Preview- als auch das Execute-Tag können eine action-URL und eine Methode haben. Sie können „get“ und „post“ als Methoden für die Datenübertragung verwenden.

Parameter sind für jede Aktion als Name/Wert-Paar definiert. Die Werte werden automatisch den Schlüsselwörtern in Klammern entnommen. Beispielsweise bedeutet {selection}, dass der vom Benutzer ausgewählte Text der Wert des zugeordneten Parameters sein soll. In Abbildung 6 ist eine Liste möglicher Wert-Schlüsselwörter zu sehen.

Das Vorschaufenster funktioniert wie ein IFrame. Sie können also im Vorschaufenster jegliche Art von Interaktion verwenden. Es ist besser, eine bestimmte Schnittstelle zu entwerfen und zwischen den preview- und execute action-URLs zu unterscheiden.

In Abbildung 7 ist die endgültige OpenService Description-Datei für das Beispiel zu sehen. Jetzt ist es an der Zeit, den Besucher der Website diesen Beschleuniger auf seinem PC installieren zu lassen. Es folgt das Skript, das zum Installieren des Beschleunigers erforderlich ist:

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

Abbildung 7 Die endgültige OpenService Description-Datei

<?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> 

Mit der AddService-Methode wird die URL der OpenService Description-XML-Datei abgerufen und die Installation gestartet. Um herauszufinden, ob bereits ein Beschleuniger installiert ist, können Sie die isServiceInstalled-Methode aufrufen.

Suchvorschläge

Mit Internet Explorer 7.0 wurde ein neues Feature namens „Suchanbieter“ eingeführt. Benutzer konnten verschiedene Suchanbieter in ihre Browser integrieren und problemlos die Suchleiste verwenden, um zu ihrer Lieblingssuchmaschine zu navigieren. Dies ist aufgrund der XML-basierten OpenSearch-Spezifikationsdateien möglich. In Internet Explorer 8 wurde die Suche mit einem Feature namens „Suchvorschläge“ weiter verbessert. Wie der Name schon sagt, macht der Browser Vorschläge, während Sie Ihr Suchschlüsselwort eingeben.

Während der Benutzer tippt, ruft der Browser den ausgewählten Anbieter für Suchvorschläge auf und fordert Vorschläge an, die mit Suchschlüsselwörtern verwandt sind. Die sich ergebenden Daten werden dem Benutzer sofort angezeigt, um die Sucherfahrung zu verbessern (siehe Abbildung 8).

Abbildung 8 Problemloser Zugriff auf Vorschläge für Suchschlüsselwörter, ohne die aktuelle Seite zu verlassen

Bevor Sie mehr darüber erfahren, wie Suchvorschläge funktionieren, benötigen Sie einen Suchanbieter. Ein Suchanbieter besteht aus drei Hauptelementen: Name, Such-URL und Symbol. Diese sind alle gut in der OpenSearch-Spezifikations-XML definiert. Im Folgenden sehen Sie einen Suchanbieter mit umfassenden Features, der ohne Suchvorschläge für Internet Explorer 7.0 geschrieben wurde:

<?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>

Das ShortName-Tag enthält den Namen des Suchanbieters, und mit dem URL-Tag wird der Suchpfad der Suchmaschine definiert. Das Schlüsselwort „searchTerms“ im URL-Muster wird durch die Suchschlüsselwörter ersetzt, die vom Benutzer eingegeben werden. Abschließend zeigt das Image-Tag auf eine Symboldatei für den Suchanbieter.

Um einen Suchanbieter zu installieren, müssen Benutzer auf ein HTML-Element auf Ihrer Seite klicken oder den Suchanbieter über das Suchfeld von Internet Explorer 8 aufdecken. Ähnlich wie Beschleuniger können Suchanbieter mithilfe der JavaScript-Funktion „window.external.AddSearchProvider“ installiert werden.

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

Die JavaScript-Funktion „AddSearchProvider“ erfordert die URL der OpenSearch-XML-Datei als Parameter, um den Installationsprozess zu initialisieren.

Alternativ zum ausdrücklichen Verweis auf Ihre OpenSearch-XML-Datei können Sie veranlassen, dass der Browser Ihre Webseite erforscht und Ihren Suchanbieter ermittelt. Um Ihren Suchanbieter feststellbar zu machen, müssen Sie einen verborgenen Link in der OpenSearch-XML-Datei des HTML-Seitenheaders platzieren. Im Folgenden sehen Sie einen verborgenen Link zu einem Suchanbieter:

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

Der Titel des Links ist der Name der Suchmaschine, die im Browser angezeigt wird. Die rel- und type-Eigenschaften des verborgenen Links sollten genau mit den hier verwendeten identisch sein. Daran kann der Browser erkennen, dass es sich bei diesem Link um einen Suchanbieter handelt. Abschließend enthält das href-Attribut eine URL zur OpenSearch Description-XML-Datei.

Da der Suchanbieter jetzt fertiggestellt ist, können Sie ihm Suchvorschläge hinzufügen. Zuerst müssen Sie die OpenSearch Description-XML-Datei ändern und die Datenquelle für Ihre Suchvorschläge angeben:

<?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>

An dieser Stelle sehen Sie, dass der früheren Beschreibungsdatei des Suchanbieters eine zusätzliche Zeile XML hinzugefügt wurde, ein neues URL-Tag mit einem anderen Typwert. Um das Suchvorschlags-Feature zu verwenden, benötigen Sie einen Dienst, mit dem die vom Benutzer bereitgestellten Suchschlüsselwörter evaluiert werden können und der die geeignete Vorschlagsliste bereitstellen kann.

Die Liste kann im XML- oder JSON-Format bereitgestellt werden. In diesem Beispiel wurden dem Vorschlagsdienst mithilfe von JSON Zeiger hinzugefügt. Es hätte jedoch problemlos ein XML-basierter Dienst mit folgendem XML verwendet werden können:

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

Es gibt wichtige Unterschiede zwischen XML- und JSON-Datenquellen. Eine JSON-Datenquelle kann eine Liste von Vorschlägen einschließlich der vorgeschlagenen Ergebnisse bereitstellen, eine Beschreibung jedes Ergebnisses und ggf. eine URL. Hier ist ein Beispiel:

["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"]]

Abbildung 10 Eine Beispielliste mit Suchvorschlägen

Internet Explorer 8 zieht JSON-Daten dynamisch und zeigt die automatisch vervollständigte Liste sofort an. Achten Sie darauf, dass das Suchschlüsselwort in den vom Anbieter zurückgegebenen Daten enthalten sein sollte. Das erste Element im JSON-Beispiel enthält das Suchschlüsselwort „con“.

Wenn Sie Internet Explorer Listen mit Suchvorschlägen im XML-Format bereitstellen, können Sie einen Titel für die Ergebnisliste auswählen, die Ergebnisse mit Trennzeichen unterteilen und auch visuelle Vorschläge anbieten.

Zuerst wird eine Liste mit Suchvorschlägen mit nur zwei Ergebnissen und einem Trennzeichen bereitgestellt. Die XML-Antwort in Abbildung 9 enthält das gesendete Schlüsselwort in den Query-Tags und stellt in einem Section-Tag zwei Elemente bereit. Das Section-Tag hat einen Titel, und jedes Element hat einen Text, eine Beschreibung und eine URL zum Navigieren.

Abbildung 9 XML für Suchvorschläge

<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>

Sie können Trennzeichentags mit Titeln verwenden, um im Feld für Suchvorschläge verschiedene Ergebnislisten bereitzustellen. Die URLs werden verwendet, wenn der Benutzer auf ein vorgeschlagenes Element in der Liste klickt. In Abbildung 10 können Sie sehen, wie die XML-Daten in Internet Explorer 8 angezeigt werden.

Zusätzlich zu der klassischen Ansicht einer Liste mit Suchvorschlägen können Sie die Benutzerfreundlichkeit mit Bildern verbessern und mit jedem Vorschlag ein Bild bereitstellen. Sie müssen lediglich den entsprechenden Item-Tags ein Image-Tag hinzufügen, etwa so:

<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-Navigation

AJAX ist eine der Hauptkomponenten von Rich Internet Applications (RIA) und wird dies auch bleiben, solange HTML verwendet wird. Mithilfe von AJAX können Sie Teile der Benutzeroberfläche aktualisieren, ohne dass die gesamte Seite aktualisiert werden muss und ohne dass für jede Benutzeraktion Server-Client-Zyklen erforderlich sind. Doch AJAX hat auch Nachteile.

Wenn Sie Ihren Webseiteninhalt mit AJAX ändern, werden Sie feststellen, dass sich die Adressleiste nicht ändert. Das ist logisch. Doch was ist, wenn der Benutzer eine konsistente URL des Zustands der aktuellen Seite haben möchte, um Favoriten hinzuzufügen und so weiter? Was ist, wenn der Benutzer in seinem Browser auf die Schaltfläche „Zurück“ klickt? Er wird zu der Website geschickt, die er vorher besucht hat.

Irgendwie muss die URL-Änderung widergespiegelt werden, ohne die Website zu aktualisieren. Hier kommt der Fragmentbezeichner ins Spiel. Der Fragmentbezeichner macht genau das, was sein Name besagt: er identifiziert den Zustand eines Teils der Seite.

Jede URL kann einen Fragmentbezeichner haben. Sie müssen nur ein Rautensymbol (#) an das Ende der URL anfügen (zum Beispiel www.contoso.com/default.aspx\#5). Wenn Sie den Inhalt nach dem #-Zeichen ändern, wird die Webseite nicht aktualisiert, aber die Änderung wird im Verlaufsprotokoll des Browsers aufgezeichnet und stellt Navigation nach vorn und zurück bereit.

In Internet Explorer 8 wird dieses Feature mit der window.location.hash-Eigenschaft und dem neuen hashChanged-Ereignis bereitgestellt. Immer wenn Sie die window.location.hash-Eigenschaft ändern, wird die Adressleiste aktualisiert, und der Inhalt der Hasheigenschaft wird hinter dem #-Zeichen platziert. Wenn der Benutzer versucht, mithilfe der Browserschaltflächen zu einer anderen Webseite zu navigieren, wird das hashChanged-Ereignis ausgelöst, das den Zielhashwert bereitstellt. Das ist der Wert nach dem #-Zeichen der Zielseite.

Erstellen Sie eine einfache Website mit einer „WebMethod“, um AJAX-Aufrufe zu bedienen. Diese Beispielwebsite enthält eine HTML-Schaltfläche und ein DIV-Element. Jedes Mal, wenn jemand auf die HTML-Schaltfläche klickt, wird der numerische Inhalt des DIV-Elements an „WebMethod“ gesendet:

<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>

Fügen Sie folgendes JavaScript hinzu, um den Dienst aufzurufen:

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

Erstellen Sie „WebMethod“ schließlich in der CodeBehind-Datei der Seite, um den Ganzzahlparameter zu erhöhen und diesen an den AJAX-Aufrufer zurückzugeben:

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

Die JavaScript-Methode namens „GetNext“ führt einen XMLHttpRequest an den Server durch. Die Parameter für die GetNext-Methode sind schlicht der Inhalt des DIV-Elements und eine Rückrufmethode. Wenn die Rückrufmethode „Done“ infolge der Dienstantwort aufgerufen wird, wird der neue Wert einfach wieder im DIV-Element platziert.

Jetzt wird es interessant. Nachdem die Webseite mit dem neuen Inhalt verändert wurde, wird der window.location.hash-Eigenschaft ein eindeutiger Bezeichner zugewiesen, um den aktuellen Zustand der Webseite zu identifizieren. Für dieses einfache Beispiel ist der Wert die gleiche Zahl, die im DIV-Element angezeigt wird. Wenn Sie sich nach dem Ändern der Hasheigenschaft den Browserverlauf ansehen, sehen Sie die neuen Einträge, die jetzt dort aufgeführt sind.

Wenn der Benutzer im Browserverlauf nach vorn oder zurück navigiert, wird die Hasheigenschaft an eine JavaScript-Funktion zurückgegeben, die das onhashchange-Ereignis verarbeitet. Dies wird mit der folgenden Codezeile erreicht:

<body onhashchange="HashChanged();">

Diese Funktion wird immer dann aufgerufen, wenn der Benutzer nach vorn oder zurück navigiert. Internet Explorer 8 aktualisiert die window.location.hash-Eigenschaft gemäß den Werten im Browserverlauf. Dadurch können Sie den Hashwert problemlos abrufen und die Seite aktualisieren. Dabei ist es gleichgültig, ob diese Aktion ebenso einfach ist wie die Aktualisierung der Seite mit den Hashdaten selbst, wie unten dargestellt, oder ob das Anfordern von Daten vom Server auf der Basis eines eindeutigen, im Hash gespeicherten Bezeichners erfolgt:

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

DOM-Storage

Wenn Sie derzeit Daten auf dem Client speichern müssen, besteht die einzig standardisierte Möglichkeit in der alten Hilfsmethode „document.cookie“. Leider ist diese Methode für die heutigen Onlineanwendungen einfach nicht flexibel oder leistungsfähig genug. Einer der bedeutendsten Mängel von Cookies ist die Beschränkung auf 4 KB. Internet Explorer 8 hat eine Antwort darauf: DOM-Storage.

DOM-Storage ist Bestandteil des HTML 5-Arbeitsentwurfs und bietet einen riesigen Datenspeicher (etwa 10 MB) auf der Clientseite. Dieser Speicher kann zum Teil deshalb so viel größer sein, weil die Daten nicht mit jeder Anforderung an den Server gesendet werden, wie dies bei Cookies der Fall ist. Außerdem läuft „localStorage“ nie ab.

Um die Daten im DOM-Storage zu speichern und von dort abzurufen, benötigen Sie lediglich ein Schlüssel/Wert-Paar. Die JavaScript-Klasse „localStorage“ stellt die Methoden „setItem“, „getItem“ und „removeItem“ bereit, um auf alle Features im DOM-Storage zuzugreifen:

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

Mit diesem Code wird das Äquivalent eines Property-Get und -Set-Vorgangs in C# oder Visual Basic durchgeführt, wobei DOM-Storage als Unterstützungsspeicher verwendet wird. Zunächst wird mit der Save-Funktion mit dem Schlüsselnamen „MyItem“ der Wert einer „TextBox“ im DOM-Storage gespeichert. Dann werden mit der Load-Funktion die Daten aus dem DOM-Storage abgerufen, indem der gleiche Schlüsselname bereitgestellt wird.

Offline- und Online-Arbeitsmodi

Wie viele Webentwickler träume ich schon lange von dem Tag, an dem erkennbar ist, ob der aktuelle Benutzer eine solide Verbindung zum Internet hat, um Funktionalität auf entsprechender Ebene bereitstellen zu können. Internet Explorer 8 stellt jetzt mithilfe der onLine-Eigenschaft von „window.navigator“ den Status der Internetverbindung des Host-PCs zur Verfügung. In der Vergangenheit wurde mit dieser Eigenschaft repräsentiert, ob der Benutzer offline arbeitete. Jetzt wird damit angezeigt, ob der aktuelle Benutzer eine Verbindung mit dem Netzwerk hergestellt hat.

Zusätzlich zu der onLine-Eigenschaft hat Internet Explorer 8 jetzt zwei neue Rückrufhandler, „ononline“ und „onoffline“ (siehe ononline-Ereignis und onoffline-Ereignis). Der onoffline-Handler wird ausgelöst, wenn das System die Verbindung zum Netzwerk verliert. Der ononline-Handler wird ausgelöst, wenn die Verbindung wiederhergestellt ist. Sie können Ereignislistener anfügen, mit denen Sie sofort über den Zustand der Verbindung informiert werden. Dadurch können Sie Benutzern sowohl bei Online- als auch bei Offline-Funktionen eine einheitliche Erfahrung bieten.

In Abbildung 11 ist eine einfache Verwendung der ononline- und onoffline-Ereignisse dargestellt, die im Text einer Webseite definiert sind. Jedes Mal, wenn der Benutzer eine Verbindung mit dem Netzwerk herstellt, wird die JavaScript-Methode „Online“ gestartet. Ebenso wird jedes Mal die Offline-Methode ausgelöst, wenn der Benutzer die Verbindung zum Netzwerk trennt.

Abbildung 11 Verwenden der Ononline- und Onoffline-Ereignisse

<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Timeouts von XMLHttpRequest

Das neue XMLHttpRequest-Objekt in Internet Explorer 8 hat eine TimeOut-Eigenschaft und ein ontimeout-Ereignis. Dadurch können Sie XMLHttpRequests definieren, die nach einer bestimmten Zeit ablaufen und anderen Anforderungen ermöglichen, in der Anforderungswarteschlange weiter nach vorn zu gelangen. Anhand des folgenden Codes werden ein neues XmlHttpRequest-Objekt erstellt und die Timeout-Eigenschaft sowie der ontimeout-Ereignislistener festgelegt:

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!");
}

Es gibt zwei Regeln, an die Sie sich halten sollten, wenn Sie Einstellungen für Zeitüberschreitungen definieren: der Timeout-Ereignislistener muss vor dem Öffnen der Anwendung gebunden werden, und die Timeout-Eigenschaft muss nach dem Öffnen der Anforderung festgelegt werden.

Eines der Hauptprobleme, denen Sie beim Entwerfen von AJAX-Anwendungen begegnen werden, betrifft das Kommunizieren mit Diensten in verschiedenen Remotedomänen. Dies ist der Gleicher-Ursprung-Richtlinie zu verdanken.

Es gibt einige Problemumgehungen dafür, doch keine davon hat das zu bieten, was Sie benötigen: eine ebenso einfache wie sichere Kommunikationsmethode. In Internet Explorer 8 wird ein neues clientseitiges Objekt namens „XDomainRequest“ bereitgestellt, mit dem Entwickler auf Remotedomänen zugreifen können, ohne dass die Implementierung eines serverseitigen Proxys erforderlich ist.

Wenn der Remoteserver einen Http-Header namens „Access-Control-Allow-Origin:*“ bereitstellt, können alle anderen Remotewebsites Daten von der aktuellen Webseite anfordern. Die clientseitige Verwendung des XDomainRequest-Objekts ist mit dem gewöhnlichen XmlHttpRequest-Objekt identisch.

Wie Sie sehen, hält Internet Explorer 8 einige Features zum Lösen von Problemen bereit, auf deren Lösung Webentwickler schon seit langem gehofft haben. Ganz gleich, ob es darum geht, Inhalt und Dienste stärker in den Browser zu integrieren oder neue Browserplattformdienste zu nutzen, um nahtlosere Benutzerfunktionen bereitzustellen: Internet Explorer 8 gibt Ihnen die Tools an die Hand, eine umfassendere, nahtlosere Funktionalität für den Benutzer zu erstellen.

Daron Yöndem ist der Gründer von Deveload Software. Das Unternehmen hat seinen Sitz in der Türkei. Daron Yöndem ist Microsoft Regional Director und MVP für ASP.NET. Dazu hält er Vorträge auf internationaler Ebene, leitet das INETA MEA Speaker Bureau und ist Autor zweier Bücher über ASP.NET AJAX.