Internet Explorer 8
Nuevas características en sectores, almacenar Y acelerar la aplicaciones Web
Daron Yöndem
Descarga de código de la Galería de código de MSDN
Examinar el código en línea
En este artículo se describen:
|
En este artículo se utilizan las siguientes tecnologías: AJAX, JavaScript |
Este artículo se basa en una versión preliminar de Internet Explorer 8. Toda la información está sujeta a cambios.
Contenido
Definir áreas de página con sectores de Web
Caducidad y la frecuencia de actualización
Los aceleradores
Sugerencias de búsqueda
Exploración de AJAX
Almacenamiento de DOM.
Sin conexión y en los modos de trabajo
Tiempos de espera de XMLHttpRequest
Conclusión
Internet Explorer 8 representa un paso importante en la evolución del producto. Proporciona nuevo usuario final características como sectores de Web, aceleradores y sugerencias de búsqueda y también aporta con ella más avanzado características de desarrollador como exploración de AJAX y almacenamiento de DOM.
En este artículo, buscará en los detalles de estas características para ver cómo Internet Explorer 8 pueden facilitar vida para los programadores y usuarios iguales. Verá cómo estas nuevas características le permiten definir partes de una página y controlar su frecuencia de actualización y la caducidad, mejorar la del usuario búsqueda y experiencia de exploración y mucho más.
Definir áreas de página con sectores de Web
Sectores Web permiten Cortar una página Web en fragmentos para que se puede mostrar y actualizar sólo los elementos que le interesa. Sectores Web pueden ser una solución práctica para un usuario que desea seguir las actualizaciones del sitio Web pero no desea usar un lector de RSS. Lectores RSS pueden ser un poco complicados para algunos usuarios finales y siempre no son adecuados.
Sectores Web son partes definidas mediante programación de una página Web que los usuarios descubrir moviendo el mouse (ratón) sobre el sector o hacer clic en el botón "suscribirse a un Web sector" en la barra de herramientas. la figura 1 muestra esto en acción.
Figura 1 Descubra un sitio Web slice al desplazar
Tras suscribirse a un sector de Web, el usuario podrá ver el título de sector en la barra de favoritos de Internet Explorer 8. Ponerse en contacto Internet Explorer se mantener con el origen en línea y alerta al usuario acerca de las actualizaciones mediante el texto del título sector negrita. Al hacer clic en el título, el contenido del sector se mostrarán en una ventana emergente tal como se muestra en la figura 2 .
La Figura 2 la oferta en una subasta en un sector Web más reciente de búsqueda
Una ventaja importante de sectores de Web es que los usuarios no necesita mantener actualizar una página Web para realizar el seguimiento los cambios en el sitio. Además, dependiendo de cómo estructurar los orígenes de datos de los sectores de Web, pueden ayudar a conservar los recursos en el servidor Web ya que las actualizaciones se para los datos sólo relevantes, no toda la página. Además, mediante los sectores de Web, el sistema puede proporcionar estadísticas más profundos acerca de cómo los usuarios tener acceso a distintas partes de una página Web, que pueden afectar más las decisiones de diseño.
Como mencioné anteriormente, sectores Web están predefinidas por el desarrollador. ¿Cómo definir las partes? En primer lugar, es necesario marcar un elemento div HTML como un contenedor de sectores Web utilizando el nombre de clase hslice. El elemento hslice contiene el resto de las definiciones que necesita para el sector de Web. Ésta es una definición de sectores de Web vacía:
<div class="hslice" id="ProductID1"> </div>
Cada sector de Web debe tener un IDENTIFICADOR único, como esto es cómo Internet Explorer distingue de la otra en una página. Si el IDENTIFICADOR de un sector Web cambia después de que los usuarios suscribirse a él, Internet Explorer no podrá encontrarla ya y no se puede actualizar el contenido de la barra de favoritos.
Cada sector de Web debe contener un elemento para identificar el título del sector; el título está identificado por la entrada de clase CSS de título. Este contenido se mostrará en la barra de favoritos y el menú de barra de comandos de detección de fuentes. El texto de título de la entrada se puede cambiar si lo desea cuando actualiza el sector de Web propia.
Para terminar de crear mi primer sector de Web tenga que agregar un solo elemento más: la entrada de contenido. Tengo el sector de Web y el título definido pero no tengo cualquier contenido para mostrar al usuario. Por lo que vamos a definir el contenido Web sectores aplicando la entrada de clase CSS de contenido en el contenido que debe mostrarse al usuario:
<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 figura 3 muestra mi definición de sectores de Web. El sector de Web, denominado ProductID1, tiene un título y el contenido.
La figura 3 un sector Web simple
Puede agregar riqueza más a la experiencia del usuario sector Web con elementos visuales y en línea (o globales) los estilos CSS. La única limitación es que no las secuencias de comandos controles de ActiveX (incluyendo Silverlight) se permiten ni. Si necesita ActiveX, tendrá que utilizar un origen de presentación alternativo. Se puede definir un origen de presentación alternativo en el elemento contenedor de entrada de contenido de los sectores de Web.
Tal como se muestra aquí, no es necesario poner el contenido del elemento de entrada de contenido. Simplemente son redirigir el sector de Web y que indica el explorador que el contenido se procederá de otra dirección 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>
De este modo podrá realizar un seguimiento cuántas veces se actualiza cada sector de Web y cuántos usuarios están siguiendo los sectores que realizando un seguimiento sólo de las páginas de origen de presentación. Además, en la página de alternative_display.aspx destino se permiten para utilizar controles ActiveX.
Caducidad y la frecuencia de actualización
En ocasiones, necesitará sectores de Web para que caduque de forma oportuna, incluso si el usuario está desconectado y el sector de Web no se puede obtener actualizado. Esto ocurre especialmente para los sitios como auctions en línea o campañas de ventas en línea. Se puede establecer la hora de finalización de un sector Web agregando el nombre de clase de hora de finalización y el valor de hora de fecha apropiada dentro de un elemento de abreviatura HTML, así:
<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>
Los usuarios son capaces de establecer la frecuencia de actualización clic con el botón secundario en el título de sectores de Web en la barra de favoritos y haciendo clic en el comando Propiedades. Tal como se muestra en la figura 4 , se permiten planes personalizados.
La figura 4 los usuarios pueden establecer la frecuencia de actualización de un sector de Web
Junto con la configuración definida por el usuario, puede especificar mediante programación las frecuencias proporcionando el tiempo de vida (ttl) valores:
<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>
Para especificar una frecuencia, ha creado un elemento DIV con el ttl de la clase CSS y el contenido de 15. Esto indica al explorador para comprobar el contenido de este sector Web cada 15 minutos para las actualizaciones posibles. Observe que como una opción de diseño establece la visibilidad del elemento DIV a invisible estableciendo el valor CSS de presentación a ninguno.
Como mencioné anteriormente, puede utilizar orígenes de presentación alternativo, pero a veces puede resultar útil tener sólo un sector Web recuperar sus datos de un origen de datos externo. Tiene dos opciones al utilizar orígenes de datos externos. Una opción es utilizar un sector de Web externa de otra página, como verá en el siguiente fragmento de código.
<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>
Esta definición de sectores de Web es extraer Web otro sector de external.aspx. El destino se encuentra sectores Web por su IDENTIFICADOR que es ProductID1 y adjuntado como un delimitador a la dirección URL. La presencia del atributo rel en la etiqueta de delimitador indica Internet Explorer para utilizar la dirección URL de la etiqueta de delimitador como el origen de datos de sectores de Web en lugar de mostrar el contenido en la etiqueta div.
La segunda opción es usar una fuente RSS externa. Internet Explorer siempre utilizará el primer elemento dentro de la fuente RSS y mostrar el contenido de entrada desde el XML de RSS entrante:
<div class="hslice" id="ProductID10">
<div class="entry-title">
Product Name
</div>
<a rel="feedurl" href="/slicefeed.xml"></a>
</div>
Aquí el sector de Web tiene un delimitador de feedurl a un origen XML, que puede sustituirse fácilmente por un controlador genérico que muestra los resultados XML sobre la marcha según algunos parámetros. El origen XML en nuestro ejemplo se muestra aquí:
<?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>
En lugar de definir la configuración de nuestro sector Web en el código HTML de contenido de entrada, puede definirlos en el origen de datos XML. En el código anterior, el origen XML proporciona valores para propiedades de ttl y el título de un sector de Web. La etiqueta de descripción puede contener HTML enriquecido sin causar problemas.
Los aceleradores
Aceleradores existen para realizar tareas comunes más rápidas y más automatizadas mientras explorar el Web. Por ejemplo, pensar en frecuencia copia y pega el contenido de un sitio Web a otro. Supongamos que sólo se encuentra la dirección que buscaba en un sitio Web corporativo y ahora necesita indicaciones de conducción. Se copia la dirección, inicia el sitio Web de mapas de Live y pegar en la dirección. Puede automatizar este proceso mediante una tecla de aceleración.
la figura 5 muestra un acelerador que busca una ubicación de la asignación cuando el usuario hace clic en la dirección. Escribir su propio método abreviado es sencillo. Como desarrollador, que sólo necesario definir qué el acelerador hará uso de un archivo XML OpenService descripción. Vamos a cavar en los detalles del formato de descripción de OpenService. Las siguientes muestra un archivo de OpenService descripción básico:
<?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 figura 5 el acelerador de mapas de Live proporciona búsqueda de ubicación de instantánea
Las propiedades principales de un acelerador son las etiquetas homepageUrl, mostrar y actividad. El homepageUrl es la dirección URL del servicio que va a proporcionar. Todas las direcciones URL utilizadas en otras etiquetas y valores deben utilizar el mismo dominio como el homepageUrl. Los conjuntos de etiquetas mostrar los aspectos visuales de botón de comando de un acelerador en el explorador de Internet haga clic con el botón secundario en menú. Cuando el usuario hace clic con el botón secundario del mouse en la página, el acelerador se muestran por su nombre y el icono.
El elemento de actividad define el servicio que proporciona el acelerador. En este ejemplo, el acelerador proporcionará una actividad de traducción. Puede controlar cómo Internet Explorer agrupa la aceleración en el menú contextual mediante categorías diferentes como Agregar (para agregar un vínculo) entrada (a fin de blog en un servicio remoto), definir (para buscar definición), asignar (para que busque mapa) y traducir (para traducir el texto seleccionado). También puede definir sus propias categorías. Las reglas sugeridas para las definiciones de categoría son que debe un verbo y genérico suficiente para permitir que otros desarrolladores acelerador utilizar la misma categoría.
Es el momento para definir nuestros activitiyActions dentro de nuestras etiquetas de actividad. Aquí puede ver una activityAction con un valor de contexto de selección:
<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>
El atributo de contexto es el componente clave de un activityAction. El contexto define cuándo estará disponible esta acción. Si el acelerador no proporciona una acción apropiada para el contexto actual, no se verán en menú de la aceleración de Internet Explorer. Las opciones de contexto actual son selección y el vínculo. Si el contexto es la selección, el usuario necesita seleccionar texto y vaya al menú aceleradores para utilizar el método abreviado. Si el contexto es vínculo, haga clic con el botón secundario el usuario debe en un hipervínculo para iniciar la acción.
En cada activityAction puede tener una ejecución y una definición de vista previa. Ejecutar se inicia cuando el usuario hace clic en el comando de aceleración en el menú aceleradores. Acción de vista previa se inicia cuando el usuario sitúa el mouse sobre el acelerador de comando del menú. Etiquetas la vista previa y la ejecución pueden tener una dirección URL de acción y un método. Puede utilizar GET o POST como métodos de transferencia de datos.
Los parámetros se definen para cada acción como name/value pares. Los valores proceden automáticamente las palabras clave entre corchetes. Por ejemplo, {selección} significa que el texto seleccionado por el usuario será el valor del parámetro asociado. En la figura 6 se muestra una lista de palabras clave de valor posible.
| Figura 6 Opciones de palabras clave |
| Nombre | Descripción |
| documentDomain | La dirección de dominio de la página actual. |
| documentTitle | El título de la página actual. |
| documentUrl | Dirección URL completa de la página actual. |
| vínculo | Si el usuario hizo clic en un vínculo, esto proporciona la dirección completa del vínculo. |
| linkDomain | Si el usuario hizo clic en un vínculo, esto proporciona la dirección de dominio del vínculo. |
| linkRel | Si el usuario hizo clic en un vínculo, esto proporciona la propiedad rel del vínculo. |
| linkText | Si el usuario hizo clic un vínculo, éste proporciona el texto del vínculo. |
| selección | El texto seleccionado en la página actual. |
La ventana de vista previa funciona como un IFrame, lo que significa que puede utilizar cualquier tipo de interacción dentro de la ventana de vista previa. Es más apropiado diseñar una interfaz específica y distinguir la vista previa y ejecutar las direcciones URL de acción.
El archivo de descripción de OpenService final para el ejemplo se muestra en figura 7 . Ahora es el tiempo para permitir que el visitante de nuestro sitio Web instalar este acelerador en su PC. Ésta es la secuencia de comandos necesario para instalar el acelerador:
<div>
<input id="Button1" type="button"
value="Click to Install"
onclick="window.external.AddService('myaccelerat.xml');" />
</div>
Figura 7 el archivo de descripción 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>
El método AddService obtiene la dirección URL de nuestro archivo OpenService descripción XML y inicia la instalación. Para buscar espera si una tecla de aceleración ya está instalado, puede llamar al método isServiceInstalled.
Sugerencias de búsqueda
Internet Explorer 7.0 introdujo una nueva característica denominada proveedores de búsquedas. Los usuarios sido capaces de integrar los distintos proveedores de búsqueda en su explorador y utilice la barra de búsqueda para desplazarse con facilidad a su motor de búsqueda favorito. Esto es posible porque los archivos de especificación OpenSearch basado en XML. Internet Explorer más 8 mejora la búsqueda con una característica denominada sugerencias de búsqueda. Como el nombre implica, el explorador realiza las sugerencias mientras se escribe la palabra de búsqueda.
Cuando el usuario escribe, el explorador va el proveedor de sugerencias de búsqueda seleccionada y solicitudes de sugerencias relacionadas con palabras clave de las búsqueda. Los datos resultantes al instante se muestra al usuario para crear una mejor experiencia de búsqueda (consulte la figura 8 ).
.gif)
Figura 8 fácilmente acceso sugerencias de palabras clave de búsqueda sin desplazarse fuera de página actual
Antes de obtener en los detalles de cómo funcionan las sugerencias de búsqueda, necesitará un proveedor de búsqueda. Un proveedor de búsqueda consta de tres elementos principales: un nombre, una dirección URL de búsqueda y un icono. Éstos son todos bien definidos en la especificación de OpenSearch XML. A continuación se incluye un proveedor de búsqueda de completo escrito para Internet Explorer 7.0 sin sugerencias de búsqueda:
<?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 etiqueta ShortName incluye el nombre del proveedor de búsqueda y la etiqueta de dirección URL define la ruta de búsqueda del motor de búsqueda. La palabra clave searchTerms en el modelo de dirección URL será reemplazada por las palabras escritas por el usuario. Por último, la etiqueta de imagen apunta a un archivo de icono para el proveedor de búsqueda.
Para instalar un proveedor de búsqueda, los usuarios se debe haga clic en un elemento HTML en la página o descubrir el proveedor de búsqueda mediante el cuadro de búsqueda de Internet Explorer 8. Y de forma similar como aceleradores, proveedores de búsqueda pueden instalarse mediante la función de JavaScript window.external.AddSearchProvider:
<a href="#" onclick="window.external.AddSearchProvider('http://
www.contoso.com/provider.xml')"> Add Search Provider </a>
Tenga en cuenta que la función de JavaScript AddSearchProvider requiere la dirección URL de OpenSearch XML archivo como un parámetro para inicializar el proceso de instalación.
Como alternativa a la referencia explícita al archivo XML OpenSearch, puede permitir que el explorador de explorar la página Web y a descubrir el proveedor de búsqueda. Para hacer que el proveedor de búsqueda pueden descubrir, deberá colocar un vínculo oculto en el archivo XML de OpenSearch en el encabezado de páginas HTML. A continuación es un vínculo oculto a un proveedor de búsqueda:
<link title="Contoso Search" rel="search" type="application/
opensearchdescription+xml" href="https://www.contoso.com/provider.xml" />
El título del vínculo es el nombre del motor de búsqueda que se muestra en el explorador. Las rel y el tipo de propiedades del vínculo oculta deben ser exactamente el mismo como ha utilizado aquí. Se trata cómo el explorador sabe que lo es un vínculo a un proveedor de búsqueda. Por último, el atributo href contiene una dirección URL al archivo XML OpenSearch descripción.
Ahora que tiene el proveedor de búsquedas preparado, puede ir en y agregarle las sugerencias de búsqueda. En primer lugar, deberá modificar el archivo XML de descripción OpenSearch y especificar el origen de datos sugerencia de búsqueda:
<?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>
Aquí verá que he agregado una línea adicional de XML al archivo de descripción de proveedor de búsqueda anterior, una nueva etiqueta de dirección URL con un valor de tipo diferente. Para usar la función de las sugerencias de búsqueda, necesitará un servicio que puede evaluar las palabras que se va a proporcionada por el usuario y puede proporcionar la lista de sugerencia adecuada.
La lista se puede proporcionar en formato XML o JSON. En el ejemplo, han agregado punteros al servicio sugerencia usar JSON. Sin embargo, podría han fácilmente consume un servicio basado en XML con el código XML siguiente:
<Url type="application/x-suggestions+xml" template="http://
www.contoso.com/xml.ashx?
key2search ={searchTerms}"/>
Existen diferencias importantes entre los orígenes de datos XML y JSON. Un origen de datos JSON puede proporcionar una lista de sugerencias incluyen los resultados sugeridos, una descripción para cada resultado y una dirección URL si fuera necesario. A continuación puede ver un ejemplo:
["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"]]
Figura 10 una lista de sugerencia de búsqueda de ejemplo
Internet Explorer 8 se extraen los datos JSON sobre la marcha y mostrar la lista Autocompletar inmediatamente. Tenga en cuenta que la palabra clave de búsqueda debe incluirse en los datos devueltos por el proveedor. El primer elemento en nuestro ejemplo JSON contiene nuestra búsqueda palabra clave "con."
Si elige utilizar el formato XML para proporcionar listas de sugerencias de búsqueda de Internet Explorer, podrá elegir un título para la lista resultado, para dividir el resultado con separadores y para proporcionar sugerencias visuales así.
En primer lugar proporcionará una lista de sugerencias de búsqueda sólo dos resultados y un separador. La respuesta XML en la figura 9 contiene la palabra clave enviada en las etiquetas de consulta y proporciona dos elementos en una etiqueta de sección. La etiqueta sección tiene un título y cada elemento tiene un texto, descripción y una dirección URL para desplazarse.
Figura 9 XML para sugerencias de búsqueda
<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>
Puede utilizar el separador de etiquetas con títulos para proporcionar diferentes listas de resultados en el cuadro de sugerencias de búsqueda. Las direcciones URL se utilizará cuando el usuario hace clic en un elemento sugerido en la lista. En la figura 10 , puede ver cómo se mostrarán los datos XML en Internet Explorer 8.
Además de en la vista clásica de la lista de sugerencias de la búsqueda, puede utilizar imágenes para mejorar la experiencia del usuario y ofrecer una imagen con cada sugerencia. Todo que necesita hacer es y agregar una etiqueta de imagen a las etiquetas de elemento apropiadas, así:
<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>
Exploración de AJAX
AJAX es uno de los componentes principales de aplicaciones enriquecidas de Internet (RIA) y permanecerá lo mientras HTML esté en uso. Puede utilizar AJAX para actualizar partes de la interfaz de usuario sin necesidad de actualizaciones de la página completa y ciclos de servidor de cliente para cada acción de usuario. Pero AJAX tiene sus inconvenientes.
Cuando se usa AJAX para modificar el contenido de la página Web observará que no cambia la barra de direcciones. Esto tiene sentido. Pero ¿qué ocurre si el usuario desea tener una dirección URL coherente del estado de la página actual, por ejemplo para agregar a favoritos, etc.? ¿Qué ocurre si el usuario hace clic en el botón de espera en su explorador? Se enviará al sitio Web visitado previamente.
Algún modo debe reflejar el cambio de dirección URL sin actualizar el sitio Web. Especifique el identificador de fragmento. El identificador de fragmento es exactamente lo que suena como lo hace, identifica el estado de parte de la página.
Cada dirección URL puede tener un identificador de fragmento; sólo necesita agregar un signo de número "#" al final de la dirección URL (por ejemplo, www.contoso.com/default.aspx\#5). Si cambia el contenido tras el signo #, no se actualizará la página Web pero el registro de historial del explorador de se registre el cambio y desplazarse y retroceder.
En Internet Explorer 8, esta característica se proporciona con la propiedad window.location.hash y el nuevo evento hashChanged. Siempre que cambie la propiedad window.location.hash, la barra de direcciones se obtener una actualización y se colocará el contenido de la propiedad hash tras el signo #. Cuando el usuario intenta desplazarse a otra página Web mediante los botones de los exploradores, el evento hashChanged desencadenará y proporcionar el valor de hash de destino que es el valor tras el signo # las páginas de destino.
Vamos a crear un sencillo sitio de Web con un WebMethod para atender las llamadas de AJAX. Este sitio Web de ejemplo contiene un botón HTML y un elemento DIV. Cada vez que un usuario hace clic en el botón HTML, el contenido del elemento DIV numérico se enviará a los 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>
Para llamar al servicio, agregue el siguiente JavaScript:
function GetNext() {
PageMethods.GetNext($get("content").innerHTML, Done);
}
function Done(sender) {
$get("content").innerHTML = sender;
window.location.hash = sender;
}
Finalmente, cree los WebMethod en archivo de código subyacente de la página en orden para incrementar el parámetro de entero y devolverlo al autor de la llamada de AJAX:
<System.Web.Services.WebMethod()> _
Public Shared Function GetNext(ByVal x As Integer) As Integer
Return x + 1
End Function
El método de JavaScript denominado GetNext realiza un XMLHttpRequest al servidor. Los parámetros para el método GetNext son simplemente el contenido del elemento DIV y un método de devolución de llamada. Cuando se llama el método de devolución de llamada, completado, como resultado de la respuesta del servicio, el nuevo valor se coloca simplemente a la nuevo en el elemento DIV.
Aquí se incluye el punto interesante. Después de modificar la página Web con el nuevo contenido, asigna un identificador único a la propiedad window.location.hash para identificar el estado actual de la página Web. Este sencillo ejemplo, ese valor es el mismo número muestra en el elemento DIV. Después de cambiar la propiedad hash, Si echa un vistazo en el historial del explorador observará las entradas nuevas que existe ahora aparecen.
Siempre que el usuario se desplaza al o reenviar en el historial del explorador, la propiedad hash se se pasa a una función de JavaScript que controla el evento onhashchange. Esto se consigue mediante la línea de código siguiente:
<body onhashchange="HashChanged();">
Esta función se llamará siempre que el usuario se desplaza hacia delante o hacia atrás y 8 de Internet Explorer se actualizará la propiedad window.location.hash según a los valores en el historial del explorador. Esto permite iniciar fácilmente obtener el valor de hash y Actualizar mi página, si dicha acción es tan sencillo como actualizar la página con los datos de hash, tal y como se muestra a continuación o si implica solicitando datos al servidor basado en un identificador único almacenado en el algoritmo hash:
function HashChanged() {
$get("content").innerHTML = window.location.hash;
}
Almacenamiento de DOM.
Actualmente, si necesita almacenar datos en el cliente, la única forma estándar y la espera anterior, es utilizar document.cookie. Por desgracia, este método es simplemente no flexible o eficaz para las aplicaciones en línea de hoy. Una de las limitaciones más importantes de cookies es el límite de 4 KB. 8 De Internet Explorer tiene una respuesta, almacenamiento de DOM.
DOM almacenamiento forma parte de borrador de trabajo de 5 HTML y proporciona un almacén de datos grandes (aproximadamente 10 MB) en el lado del cliente. Este almacenamiento puede ser mucho mayor en parte porque los datos no se envían con cada solicitud al servidor como con cookies. Además, el localStorage nunca caduca.
Para almacenar y recuperar datos de almacenamiento de DOM, todo lo que necesita es un par clave/valor. La clase de JavaScript localStorage proporciona métodos setItem, getItem y removeItem tener acceso a todas las características de almacenamiento de DOM:
function Save() {
localStorage.setItem("MyItem", $get("Text1").value);
}
function Load() {
$get("Text1").value = localStorage.getItem("MyItem");
}
Este código realiza el equivalente de obtener una propiedad y establece operación en C# o Visual Basic utilizando el almacenamiento de DOM como el almacén de respaldo. En primer lugar, la función Guardar almacena el valor de un control TextBox en el almacenamiento de DOM con un nombre de clave de MiElemento. A continuación, la función de carga recupera los datos DOM almacenamiento al proporcionar el mismo nombre de la clave.
Sin conexión y en los modos de trabajo
Al igual que muchos desarrolladores de Web, ha largo se soñar del día cuando puede detectar si el usuario actual tenga conexión a buen estado a Internet y proporcionar un grado apropiado de funcionalidad. Ahora, Internet Explorer 8 proporciona el estado de los host PCs Internet conexión con la propiedad onLine de ventana. explorador. Mientras que en el pasado, esta propiedad representada si el usuario tenía elegido trabajar sin conexión, ahora indica si el usuario actual tiene una conexión establecida a la red.
Además la propiedad onLine, Internet Explorer 8 tiene ahora dos nuevos ononline de controladores de devolución de llamada y onoffline (consulte" Evento ononline"y" Evento onoffline"). El controlador onoffline se produce cuando el sistema pierde la conexión de red y el controlador ononline se produce cuando se restaura la conexión. Pueden adjuntar agentes de escucha de eventos y se avisa al instante sobre el estado de la conexión para que se pueda proporcionar que los usuarios una experiencia combinada durante la funcionalidad en línea y sin conexión.
Figura 11 muestra un uso sencillo de ononline y onoffline eventos definidos en el cuerpo de una página Web. Cada vez que el usuario obtiene conectado a la red, se iniciará el método en JavaScript. Asimismo, cada vez que los usuarios desconecta, la red se activará el método sin conexión.
Figura 11 con Ononline y Onoffline eventos
<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>
Tiempos de espera de XMLHttpRequest
El nuevo XMLHttpRequest en Internet Explorer 8 tiene una propiedad de TimeOut y un evento ontimeout. Esto permite definir XMLHttpRequests que se tiempo de espera y permitir otras solicitudes mover con antelación en el queue.In solicitud en el siguiente código, crea un nuevo XmlHttpRequest y establece la escucha de eventos de propiedad y ontimeout de tiempo de espera:
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!");
}
Hay dos reglas realmente debe seguir al definir la configuración del tiempo de espera: se debe enlazar la escucha de evento de tiempo de espera antes de abrir la solicitud y debe establecerse la propiedad de tiempo de espera después de abrir la solicitud.
Uno de los principales problemas que se producirán al diseñar las aplicaciones de AJAX implica comunicarse con los servicios en varios dominios remotos gracias a la directiva mismo origen.
Hay algunas soluciones que puede realizar, pero ninguno de ellos proporcionan lo que necesita: tanto una sencilla y un método seguro de comunicación. 8 De Internet Explorer proporciona un nuevo objeto de cliente denominado XDomainRequest, que permite a los programadores tener acceso a dominios remotas sin necesidad de implementación de un un proxy de servidor.
Si el servidor remoto proporciona un encabezado HTTP denomina acceso de control de permitir de origen: * todos los otros sitios remotos podrán para solicitar datos de la página Web actual. El uso de comandos de cliente del objeto de XDomainRequest es el mismo que el XmlHttpRequest normal.
Como puede ver, 8 de Internet Explorer ofrece una serie de características que resolver muchos problemas a los desarrolladores de Web se han esperando para resolver durante un largo periodo de tiempo. Tanto si se trata de más profundamente integración su contenido y los servicios en el explorador o el servicio aprovechamiento de plataforma de explorador nueva para proporcionar una experiencia de usuario más sencilla, Internet Explorer 8 proporciona las herramientas para crear experiencias más variadas más sencilla para los usuarios.
Daron Yöndem es el fundador de software Deveload en función de Turquía. Es un director regional de Microsoft y MVP en ASP.NET. Daron es un orador internacional a la izquierda el INETA MEA del oficina y el autor de dos libros de AJAX de ASP.NET.