Cet article a fait l'objet d'une traduction automatique.
Internet Explorer 8
Nouvelles fonctionnalités pour stocker et accélérer vos applications Web
Daron Yöndem
Téléchargement de code disponible de la bibliothèque de code MSDN
Parcourir le code en ligne
Cet article présente :
|
Cet article utilise les technologies suivantes : AJAX, JavaScript |
Cet article est basé sur une version préliminaire de Internet Explorer 8.Toutes les informations sont sujets à modification.
Contenu
Définition des zones de page avec des secteurs du Web
Expiration et la fréquence de mise à jour
Raccourcis
Suggestions de recherche
Navigation AJAX
Stockage DOM
Modes de travail hors connexion et en ligne
Fichiers extraits temps XMLHttpRequest
Wrap-Up
Internet Explorer 8 représente une étape majeure de l'évolution du produit.Il fournit des fonctionnalités telles que Web secteurs, accélérateurs et les suggestions de recherche nouvel utilisateur final et offre également avec lui plus développeur fonctionnalités avancées telles que AJAX navigation et de stockage du modèle DOM.
Dans cet article, je recherche dans les détails de ces fonctionnalités pour voir comment Internet Explorer 8 peuvent faciliter vie pour les développeurs et utilisateurs.Vous verrez comment ces nouvelles fonctionnalités de pouvoir définir les parties d'une page et contrôler la fréquence de mise à jour et d'expiration, améliorer l'utilisateur recherche et l'expérience de navigation et beaucoup plus.
Définition des zones de page avec des secteurs du Web
Secteurs Web permettent de couper une page Web en pièces afin que vous pouvez afficher et mettre à jour uniquement les parties qui que vous intéressent.Secteurs Web peuvent être une solution pratique pour un utilisateur qui souhaite suivre les mises à jour du votre site Web mais ne souhaitez utiliser un lecteur RSS.Lecteurs RSS peuvent être un peu compliquées pour certains les utilisateurs finaux et ne sont pas toujours appropriées.
Secteurs Web sont définies par programmation parties d'une page Web que les utilisateurs découvrir en déplaçant leur souris sur le secteur ou sur le bouton « S'abonner à un Web secteur » dans la barre d'outils.figure 1 illustre en action.
Figure 1 découverte d'un site Web découper en flottante
Après l'abonnement à un secteur Web, l'utilisateur pourra voir le titre de secteur dans la barre Favoris d'Internet Explorer 8.Internet Explorer conserver contacter la source en ligne et une alerte l'utilisateur sur les mises à jour en modifiant le texte du titre secteur en gras.Lorsque vous cliquez sur le titre, le contenu de la tranche s'affichera dans une fenêtre contextuelle comme illustré figure 2 .
La figure 2 recherche le dernier enchérir sur un appel d'offres dans un secteur Web
Un des principaux avantages de secteurs Web sont que les utilisateurs ne devez à conserver l'actualisation d'une page Web pour le suivi des modifications sur le site.En outre, selon la façon dont vous structurez les sources de données pour votre secteurs Web, ils peuvent aider à économiser les ressources sur le serveur Web car mises à jour pour les données uniquement, pas la page entière.De plus, en utilisant les secteurs Web, votre système peut fournir des statistiques approfondi sur comment les utilisateurs accéder différentes parties d'une page Web, qui peut influer sur autres décisions de conception.
Comme je L'AI mentionné précédemment, secteurs Web sont prédéfinis par le développeur.Comment pour définir ces parties ?Tout d'abord, vous devez marquer un élément div HTML comme un conteneur secteur Web en utilisant le nom de classe hslice.L'élément hslice va contenir tout le reste des définitions que vous avez besoin pour votre secteur Web.Voici une définition de secteur Web vide :
<div class="hslice" id="ProductID1"> </div>
Chaque secteur Web doit être un ID unique, comme cela est comment Internet Explorer distingue un dans l'autre sur une page. Si l'ID d'un secteur Web change lorsque les utilisateurs s'y abonner, Internet Explorer ne sera pas en mesure de trouver plus et ne peut pas mise à jour le contenu de la barre des Favoris.
Chaque secteur Web doit contenir un élément pour identifier le titre de la tranche ; le titre est identifié par l'entrée de classe CSS à titre. Ce contenu s'affichera sur la barre des Favoris et le menu barre de commande découverte de flux. Le texte de titre d'entrée peut être modifié si vous le souhaitez lorsque le secteur Web met à jour elle-même.
Pour finir de créer mon premier secteur Web je dois ajouter qu'un seul élément plus : l'écriture-contenu. J'ai le secteur Web et le titre défini, mais je n'ai pas tout contenu pour afficher à l'utilisateur. Ainsi, commençons par définir le contenu Web secteur en appliquant l'entrée de classe CSS à contenu sur le contenu qui doit être affiché à l'utilisateur :
<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>
la figure 3 illustre ma définition secteur Web. Mon secteur Web, appelé ProductID1, présente un titre et le contenu.
La figure 3 un secteur Web simple
Vous pouvez ajouter richesse supplémentaire à l'expérience utilisateur Web secteurs avec des éléments visuels et en ligne ou global styles CSS. La limite uniquement est qu'aucun script ou des contrôles ActiveX (y compris Silverlight) ne sont autorisées. Si vous avez besoin d'ActiveX, vous devrez peut-être utiliser une source autre affichage. Une source autre affichage peut être définie sous l'élément de conteneur de contenu de l'écriture du secteur Web.
Comme illustré ici, inutile placer le contenu de l'élément de contenu de l'écriture. Vous sont simplement rediriger le secteur Web et indiquant le navigateur que le contenu est issu d'une autre 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>
Ainsi vous pourrez suivre les combien de fois chaque secteur Web est mis à jour et combien d'utilisateurs est suivant les secteurs en simplement les pages d'affichage source. En outre, dans la page alternative_display.aspx cible vous ne pouvez utiliser des contrôles ActiveX.
Expiration et la fréquence de mise à jour
Parfois, vous devez secteurs Web expiration dans le délai imparti, même si l'utilisateur est en mode hors connexion et le secteur Web ne peut pas mis à jour. Cela est particulièrement vrai pour les sites tels qu'auctions en ligne ou en ligne les campagnes de vente. Vous pouvez définir l'heure de fin d'un secteur Web en ajoutant le nom de la classe Heure_fin et la valeur de date approprié de temps dans un élément abréviation HTML, comme suit :
<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>
Les utilisateurs peuvent définir la fréquence de mise à jour en cliquant avec le bouton droit sur le titre Web secteur dans la barre des favoris en cliquant sur la commande Propriétés. Comme le montre la figure 4 , prévisions personnalisées sont autorisées.
La figure 4 les utilisateurs peuvent définir la fréquence de mise à jour d'un secteur Web
En outre aux paramètres définis par l'utilisateur, vous pouvez spécifier par programmation fréquences en fournissant la durée de vie (ttl) valeurs :
<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>
Pour spécifier une fréquence, j'ai créé un élément DIV avec la ttl de classe CSS et le contenu 15. Ceci indique le navigateur pour vérifier le contenu de ce secteur Web 15 minutes les mises à jour possibles. Notez que comme un choix de conception J'AI défini la visibilité de l'élément DIV à invisible en définissant la valeur CSS Affichage sur aucun.
Comme je L'AI déjà mentionné, vous pouvez utiliser afficher d'autres sources, mais parfois, il peut être utile de suffit un secteur Web extraire ses données d'une source de données externe. Vous avez deux possibilités lorsque vous utilisez des sources de données externes. Une option consiste à utiliser un secteur Web externe sur une autre page, comme vous le verrez dans l'extrait de code suivant.
<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>
Cette définition secteur Web est extraire une autre secteur Web d'external.aspx. La cible Web secteur est trouvé par le code qui est ProductID1 et connecté comme point d'ancrage à l'URL. La présence de l'attribut rel sur la balise d'ancrage indique à Internet Explorer pour utiliser URL la balise d'ancrage en tant que la source de données secteurs Web au lieu d'afficher le contenu dans la balise div.
La deuxième option consiste à utiliser un flux RSS externe. Internet Explorer utilisera toujours le premier élément dans le flux RSS et afficher le contenu entrée à partir de la XML RSS entrant :
<div class="hslice" id="ProductID10">
<div class="entry-title">
Product Name
</div>
<a rel="feedurl" href="/slicefeed.xml"></a>
</div>
Ici, le secteur Web a une ancre feedurl ciblant une source XML, qui pourrait facilement être remplacée par un gestionnaire d'événements générique qui XML à la volée en fonction de certains paramètres. La source XML dans notre exemple est illustrée ci-dessous :
<?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 <b>codes</b> can be used</description>
</item>
</channel>
</rss>
Au lieu de définir les paramètres de notre secteur Web dans le code HTML contenu de l'écriture, vous pouvez les définir dans votre source de données XML. Dans le code précédent, la source XML fournit les valeurs des propriétés ttl et titre d'un secteur Web. La balise de description peut contenir HTML enrichi sans provoquer des problèmes.
Raccourcis
Raccourcis existent afin que les tâches courantes plus rapides et plus automatisées naviguant sur le Web. Par exemple, pensez à la fréquence à laquelle vous copiez et collez du contenu d'un site Web à l'autre. Imaginons que vous avez trouvé simplement l'adresse que vous recherchez sur un site Web d'entreprise et que vous devez maintenant pilote directions. Vous copiez l'adresse, lancez le site Web de cartes Live et coller dans l'adresse. Vous pouvez automatiser ce processus à l'aide d'un raccourci.
la figure 5 illustre un accélérateur recherche un emplacement sur la carte lorsque l'utilisateur clique sur l'adresse. Écrire votre propre raccourci est simple. Un développeur, que vous devez définir le votre raccourci fait utilisant un fichier XML OpenService description. Nous allons aller dans les détails du format OpenService description. Voici un fichier de description OpenService base :
<?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>
La figure 5 cartes Live accélérateur permet la recherche instantanée emplacement
Les propriétés principales d'un Accélérateur sont les balises homepageUrl, affichage et activité. Le homepageUrl est l'URL du service que vous fournissez. Toutes les URL utilisées dans les autres balises et les paramètres doivent utiliser le même domaine que celle de la homepageUrl. Les jeux de balises Affichage les aspects visuels de bouton de commande un raccourci d'Internet Explorer cliquez avec le bouton droit sur menu. Lorsque l'utilisateur clique avec le bouton droit sur la page, l'accélérateur est révélé par son nom et une icône.
L'élément d'activité définit le service qui fournit l'accélérateur. Dans cet exemple, l'accélérateur fournit une activité de traduction. Vous pouvez contrôler comment Internet Explorer regroupe votre raccourci dans le menu contextuel en utilisant des différentes catégories comme ajouter (pour ajouter un lien) blog (sur le blog sur un service à distance), définir (pour rechercher définition), faire (pour rechercher des carte) et de traduction (pour traduire du texte sélectionné). Vous pouvez également définir vos propres catégories. Les règles de suggestions pour les définitions de catégorie sont qu'ils doivent être un verbe et un suffisamment générique pour permettre à autres développeurs accélérateur utiliser la même catégorie.
Est le temps pour définir nos activitiyActions dans notre balises activité maintenant. Ici, vous pouvez voir un activityAction avec une valeur de contexte de sélection :
<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>
L'attribut contexte est le composant clé d'un activityAction. Le contexte définit lorsque cette action sera disponible. Si l'accélérateur ne fournit pas une action adaptée pour le contexte actuel, il ne peut visible dans menu le raccourci dans Internet Explorer. Les choix de contexte en cours sont sélection et lien. Si le contexte est sélection, l'utilisateur doit sélectionner du texte et accédez au menu raccourcis afin d'utiliser l'accélérateur. Si le contexte est lien, cliquez avec le bouton l'utilisateur doit droit sur un lien hypertexte pour démarrer l'action.
Dans chaque activityAction vous pouvez avoir une exécution et une définition d'aperçu. Exécuter est lancé lorsque l'utilisateur clique sur la commande raccourci du menu Raccourcis. Action de l'aperçu est lancée lorsqu'il place la souris sur la commande de raccourci dans le menu. Balises le Aperçu et l'exécution peuvent avoir une URL d'action et une méthode. Vous pouvez utiliser GET ou POST comme méthodes de transfert de données.
Paramètres sont définis pour chaque action en tant que paires name/value. Les valeurs proviennent automatiquement des mots-clés dans entre crochets. Par exemple, {sélection} signifie que le texte sélectionné par l'utilisateur sera la valeur du paramètre associé. Une liste de mots-clés valeur possible est illustrée figure 6 .
| La figure 6 mot clé Options |
| Nom | Description |
| documentDomain | L'adresse de domaine de la page en cours. |
| documentTitle | Titre de la page en cours. |
| documentUrl | URL complète de la page en cours. |
| lien | Si l'utilisateur a cliqué sur un lien, cela fournit l'adresse complète du lien. |
| linkDomain | Si l'utilisateur a cliqué sur un lien, cela fournit l'adresse de domaine du lien. |
| linkRel | Si l'utilisateur a cliqué sur un lien, il fournit la propriété rel du lien. |
| linkText | Si l'utilisateur a cliqué sur un lien, il fournit le texte du lien. |
| sélection | Le texte sélectionné sur la page en cours. |
La fenêtre d'aperçu fonctionne comme un IFrame, ce qui signifie que vous pouvez utiliser n'importe quel type d'interaction dans la fenêtre d'aperçu. Il est plus judicieux de créer une interface spécifique et distinguer l'aperçu et exécuter les URL d'action.
Le fichier de description OpenService final de l'exemple est illustré figure 7 . Il est maintenant temps pour permettre au visiteur de notre site Web installer cet accélérateur sur son PC. Voici le script nécessaire pour installer le raccourci :
<div>
<input id="Button1" type="button"
value="Click to Install"
onclick="window.external.AddService('myaccelerat.xml');" />
</div>
Figure 7 le fichier de description OpenService final
<?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>
La méthode AddService renvoie l'URL de notre fichier de OpenService description XML et commence l'installation. Pour rechercher sortie si un raccourci est déjà installé vous pouvez appeler la méthode isServiceInstalled.
Suggestions de recherche
Internet Explorer 7.0 a introduit une nouvelle fonctionnalité appelée moteurs de recherche. Les utilisateurs pouvaient intégrer plusieurs moteurs de recherche dans leur navigateur et utiliser la barre de recherche pour naviguer facilement vers leur moteur de recherche favori. Ceci est possible en raison des fichiers spécification OpenSearch basé sur XML. Internet Explorer 8 plus améliore la recherche par une fonctionnalité appelée suggestions de recherche. Comme son nom l'indique, le navigateur suggère lorsque vous tapez votre mot clé de recherche.
Mesure que l'utilisateur tape le navigateur se place sur le fournisseur de suggestions de recherche sélectionné et demandes de suggestions permettant les mots-clés de recherche. Les données résultantes sont instantanément montrées à l'utilisateur pour créer une meilleure expérience de recherche (voir figure 8 ).
La figure 8 facilement Access suggestions pour rechercher les mots clés sans la navigation dans rangement à partir de la page active
Avant de récupérer dans les détails de fonctionnement des suggestions de recherche, il vous faudra un moteur de recherche. Un fournisseur de recherche consiste en trois éléments principaux : un nom, une URL de recherche et une icône. Ce sont tout bien définis dans la spécification OpenSearch XML. Voici un fournisseur de recherche complètes écrites pour Internet Explorer 7.0 sans suggestions de recherche :
<?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>
La balise ShortName comprend le nom de fournisseur de recherche et la balise URL définit le chemin de recherche du moteur de recherche. Le mot clé searchTerms dans le modèle D'URL sera remplacé par les mots-clés de recherche écrits par l'utilisateur. Enfin, la balise Image pointe vers un fichier d'icône pour le fournisseur de recherche.
Afin d'installer un moteur de recherche, les utilisateurs devrez cliquer sur un élément HTML de votre page ou de découvrir le moteur de recherche dans la boîte de recherche de Internet Explorer 8. Et de manière similaire comme raccourcis, fournisseurs de recherche peuvent être installés à l'aide la fonction JavaScript window.external.AddSearchProvider :
<a href="#" onclick="window.external.AddSearchProvider('http://
www.contoso.com/provider.xml')"> Add Search Provider </a>
Notez que la fonction JavaScript AddSearchProvider nécessite l'URL de fichier XML OpenSearch en tant que paramètre pour initialiser le processus d'installation.
Comme alternative à la référence explicite à votre fichier XML OpenSearch, vous pouvez laisser le navigateur Explorez votre page Web et découvrir votre fournisseur de recherche. Pour rendre votre fournisseur de recherche détectable, vous devrez placer un lien masqué à votre fichier XML OpenSearch dans l'en-tête de pages HTML. Celui-ci est un lien masqué vers un moteur de recherche :
<link title="Contoso Search" rel="search" type="application/
opensearchdescription+xml" href="https://www.contoso.com/provider.xml" />
Le titre de la liaison est le nom du moteur de recherche affichent dans le navigateur. Les rel et type Propriétés du lien masqué doivent avoir exactement la même que j'ai utilisé ici. Voici comment le navigateur sait que qu'il est un lien vers un moteur de recherche. Enfin, l'attribut href contient une URL vers le fichier OpenSearch description XML.
Maintenant que vous avez votre moteur de recherche prêt, vous pouvez accédez sur et lui ajouter des suggestions de recherche. Tout d'abord, vous devez modifier le fichier XML de description OpenSearch et spécifier votre source de données recherche suggestion :
<?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>
Ici, vous verrez que J'AI avez ajouté une ligne supplémentaire de XML au fichier recherche fournisseur description précédente, une nouvelle balise URL avec une valeur de type différent. Afin d'utiliser la fonctionnalité de suggestions de recherche, vous devez un service peut évaluer les mots-clés de recherche est fournis par l'utilisateur et peut fournir la liste de suggestion approprié.
La liste peut être fournie au format XML ou JSON. Dans l'exemple, j'ai ajouté pointeurs au service de suggestion de l'utilisation de JSON. Cependant, je peut ont facilement consommer un service basé sur XML avec le code XML suivant :
<Url type="application/x-suggestions+xml" template="http://
www.contoso.com/xml.ashx?
key2search ={searchTerms}"/>
Il existe importantes différences entre les sources de données XML et JSON. Une source de données JSON peut fournissent une liste de suggestions, notamment les résultats suggérés, une description chaque résultat ainsi que, une URL si nécessaire. Voici un exemple :
["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"]]
La figure 10 de liste de suggestions exemple recherche
Internet Explorer 8 va extraire les données JSON à la volée et afficher la liste Saisie semi-automatique immédiatement. N'oubliez pas que le mot clé de recherche doit figurer dans les données renvoyées à partir du fournisseur. Le premier élément dans notre exemple JSON contient notre recherche mot clé « canular. »
Si vous choisissez d'utiliser le format XML pour fournir des listes de suggestion de recherche pour Internet Explorer, vous pourrez choisir un titre pour votre liste de résultat, pour répartir les résultats avec les séparateurs et pour proposer des suggestions visual ainsi.
Dans un premier temps que je fournir une liste de suggestions recherche uniquement deux résultats et un séparateur. La réponse XML dans la figure 9 contient le mot clé soumis dans les balises de requête et fournit deux articles dans une balise de section. La balise de section a un titre et chaque élément dispose d'un texte, description et une URL pour accéder.
La figure 9 XML pour les suggestions de recherche
<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>
Vous pouvez utiliser balises du séparateur avec des titres pour fournir des listes différentes de résultats dans la zone de suggestion de recherche. Les URL sont utilisé lorsque l'utilisateur clique sur un élément suggéré dans la liste. Dans la figure 10 , vous pouvez visualiser comment les données XML sont affichera dans Internet Explorer 8.
En outre l'affichage classique d'une liste de suggestions de recherche, vous pouvez utiliser images pour améliorer l'expérience utilisateur et fournir une image avec chaque suggestion. Il vous suffit est et ajouter une balise d'image aux balises article appropriées, comme suit :
<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>
Navigation AJAX
AJAX est un des composants principaux de riches applications Internet (FINS) et restera, tant que HTML est en cours d'utilisation. Vous pouvez utiliser AJAX pour mettre à jour parties de l'interface utilisateur sans nécessiter d'actualisation de la page entière et cycles serveur-client pour chaque action d'utilisateur. Mais AJAX a ses inconvénients.
Lorsque vous utilisez AJAX pour modifier le contenu de page Web, vous remarquerez que la barre d'adresses ne change pas. C'est logique. Mais que se passe-t-il si l'utilisateur souhaite avoir une URL cohérente d'état de la page en cours, par exemple pour ajouter et ainsi de suite à des favoris ? Que se passe-t-il si l'utilisateur clique sur le bouton en différé dans son navigateur ? Elle sera envoyée au site Web elle visitée.
Vous avez une certaine manière à refléter le changement URL sans actualiser le site Web. Entrez l'identificateur de fragment. L'identificateur de fragment n'exactement ce que qu'il semble comme il le fait, identifie l'état de la partie de la page.
Chaque URL pouvez avoir un identificateur de fragment ; vous devez simplement ajouter un signe dièse « # » à la fin de l'URL (par exemple, www.contoso.com/default.aspx\#5). Si vous modifiez le contenu après le signe #, la page Web s'actualise pas mais le journal Historique du navigateur va enregistrer les modifications et fournir avant et arrière navigation.
Dans Internet Explorer 8, cette fonctionnalité est fournie avec la propriété window.location.hash et le nouvel événement hashChanged. Lorsque vous modifiez la propriété window.location.hash, la barre d'adresses obtiendrez une mise à jour et le contenu de la propriété hash sera placé après le signe #. Lorsque l'utilisateur tente d'accéder à une autre page Web via les boutons de navigateurs, l'événement hashChanged déclenche et fournir la valeur de hachage cible qui est la valeur après le signe # pages cible.
Nous allons créer un site Web simple avec un WebMethod $ du correctif de sécurité afin de traiter les appels AJAX. Cet exemple de site Web contient un bouton HTML et un élément DIV. Chaque fois que quelqu'un clique sur le bouton HTML, le contenu numérique de l'élément DIV est envoyé à la 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>
Pour appeler le service, ajouter le JavaScript suivant :
function GetNext() {
PageMethods.GetNext($get("content").innerHTML, Done);
}
function Done(sender) {
$get("content").innerHTML = sender;
window.location.hash = sender;
}
Enfin, créez le WebMethod dans fichier de codebehind la page pour incrémenter le paramètre entier et renvoyer à l'appelant AJAX :
<System.Web.Services.WebMethod()> _
Public Shared Function GetNext(ByVal x As Integer) As Integer
Return x + 1
End Function
La méthode de JavaScript nommée GetNext, un XMLHttpRequest au serveur. Les paramètres de la méthode GetNext sont simplement le contenu de l'élément DIV et une méthode de rappel. Lorsque la méthode de rappel, terminée, est appelée en raison de la réponse de service, la nouvelle valeur est simplement placée en dans l'élément DIV.
Ici, est le point intéressant. Après avoir modifié la page Web avec le nouveau contenu, J'AI attribuer un identificateur unique à la propriété window.location.hash afin d'identifier l'état actuel de ma page Web. Pour cet exemple simple, cette valeur est le même numéro affiché dans mon élément DIV. Après avoir modifié la propriété hash, si vous jetez un œil dans l'historique du navigateur vous remarquerez les nouvelles écritures qui sont désormais répertoriées.
Chaque fois que l'utilisateur accède en ou vers l'avant dans l'historique du navigateur, la propriété hash est transmises au, à une fonction JavaScript qui gère l'événement onhashchange. Cela est effectué à l'aide de la ligne de code suivante :
<body onhashchange="HashChanged();">
Cette fonction sera appelée chaque fois que l'utilisateur navigue vers l'arrière ou vers l'avant et Internet Explorer 8 met à jour la propriété window.location.hash aux valeurs dans l'historique du navigateur. Cela permet à facilement obtenir la valeur de hachage et mettre à jour ma page si cette action est aussi simple que la mise à jour la page avec les données hachage elle-même, comme indiqué ci-dessous ou la si elle implique la demande de données du serveur basé sur un identificateur unique stocké dans le hachage :
function HashChanged() {
$get("content").innerHTML = window.location.hash;
}
Stockage DOM
Actuellement, si vous souhaitez stocker des données sur le client, la seule manière normalisée et la mise en veille ancien, est d'utiliser document.cookie. Malheureusement, cette méthode est tout simplement pas assez puissant pour les applications en ligne aujourd'hui ou flexible. Un des défauts plus significatifs des cookies est la limite de 4 Ko. Internet Explorer 8 a une réponse, stockage DOM.
Stockage DOM appartient le brouillon de travail de 5 HTML et fournit un magasin de données volumineux (environ 10 Mo) sur le côté client. Ce stockage est donc beaucoup plus volumineux en partie parce que les données ne sont pas envoyées avec chaque demande au serveur comme c'est avec les cookies. De plus, le localStorage expire jamais.
Afin de stocker et en extraire DOM stockage des données, il vous suffit est une paire clé/valeur. La classe de JavaScript localStorage fournit la setItem méthodes, les getItem et les removeItem pour accéder aux toutes les fonctionnalités du stockage DOM :
function Save() {
localStorage.setItem("MyItem", $get("Text1").value);
}
function Load() {
$get("Text1").value = localStorage.getItem("MyItem");
}
Ce code effectue l'équivalent d'un get de propriété et définie opération en C# ou Visual Basic en stockage DOM la banque de sauvegarde. Tout d'abord, la fonction Enregistrer stocke la valeur d'un TextBox pour le stockage du modèle DOM avec le nom de MonÉlément clé. Puis la fonction de la charge extrait les données de stockage du modèle DOM en fournissant le même nom de clé.
Modes de travail hors connexion et en ligne
Comme de nombreux développeurs Web, j'avez de longtemps été dreaming de la journée lorsque j'a pu détecter si l'utilisateur actuel dispose d'une connexion à Internet sain et fournir un niveau approprié de fonctionnalité. Internet Explorer 8 fournit à présent, l'état de la connexion PCs Internet ordinateur hôte avec propriété onLine de fenêtre. navigateur. Tandis que dans le passé, cette propriété représentée si l'utilisateur a choisi de travailler en mode hors connexion, il indique maintenant si l'utilisateur actuel a une connexion établie sur le réseau.
Outre la propriété onLine, Internet Explorer 8 a maintenant deux nouveau rappel gestionnaires ononline et onoffline (voir » ononline, événement« et » onoffline, événement"). Le gestionnaire d'onoffline est déclenché quand le système perd la connexion réseau et le gestionnaire d'ononline est générée lorsque la connexion est restaurée. Vous pouvez joindre des écouteurs d'événement et être averti instantanément l'état de la connexion afin que vous pouvez vous fournir aux utilisateurs une expérience hybride au cours de fonctions en ligne et hors connexion.
la figure 11 illustre une utilisation simple des événements ononline et onoffline défini dans le corps d'une page Web. Chaque fois que l'utilisateur obtient connecté au réseau, la méthode JavaScript en ligne lance. De même, chaque fois que les utilisateurs déconnecte, le réseau de la méthode en mode hors connexion se déclenche.
La figure 11 à l'aide Ononline et événements 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>
Fichiers extraits temps XMLHttpRequest
Le nouveau XMLHttpRequest dans Internet Explorer 8 comporte une propriété TimeOut et un événement ontimeout. Cela vous permet de définir XMLHttpRequests qui est le délai d'attente et autoriser les autres demandes faire à l'avance dans le queue.In demande le code suivant, je crée un nouveau XmlHttpRequest et définir l'écouteur de événement propriété et ontimeout délai d'attente :
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!");
}
Il existe deux règles réellement à suivre lorsque vous définissez les paramètres de délai d'attente : l'écouteur événement délai d'attente doit être lié avant d'ouvrir la requête et la propriété délai d'attente doit être définie après l'ouverture de la demande.
Un des principaux problèmes vous rencontrerez lorsque vous créez vos applications AJAX implique la communication avec les services dans différents domaines distants grâce à la même origine-stratégie.
Il existe des solutions de l'exécution possible, mais aucune d'entre elles fournir ce que vous devez : un simple et une méthode sécurisée de communication. Internet Explorer 8 fournit un nouvel objet côté client appelé XDomainRequest, qui permet aux développeurs d'accéder aux domaines distants sans nécessiter d'implémentation d'un un proxy côté serveur.
Si le serveur distant fournit un en-tête HTTP appelé accès-contrôle-Autoriser-Origine: * tous les autres sites distants pourra pour demander des données à partir de la page Web en cours. L'utilisation de côté client d'objet XDomainRequest est identique à la XmlHttpRequest ordinaire.
Comme vous pouvez le voir, Internet Explorer 8 offre un certain nombre de fonctionnalités qui résoudre de nombreux problèmes les développeurs Web ont été en espérant pour résoudre pendant une longue période. Qu'il s'agisse de plus profondément Intégration votre contenu et des services dans le navigateur ou services de plate-forme de navigateur nouveau leveraging à fournir pour une expérience utilisateur plus transparente, Internet Explorer 8 vous offre les outils pour créer des expériences plus riches et plus transparents pour vos utilisateurs.
Daron Yöndem est le fondateur de Software Deveload basé dans Turquie. Il est directeur régional Microsoft et MVP dans ASP.NET. Daron est un présentateur international début le INETA MEA haut-parleur Bureau et l'auteur de deux livres d'ASP.NET AJAX.