Guía de inicio rápido: URL Preview en JavaScriptQuickstart: URL Preview in JavaScript

La siguiente aplicación de página única utiliza JavaScript para crear una instancia de URL Preview para el sitio de SwiftKey: https://swiftkey.com/en.The following single-page application uses JavaScript to create a URL Preview for the SwiftKey site: https://swiftkey.com/en.

Requisitos previosPrerequisites

Obtenga una clave de acceso para la evaluación gratuita de los Laboratorios de Cognitive Services.Get an access key for the free trial Cognitive Services Labs

Escenario de códigoCode scenario

En el ejemplo de JavaScript siguiente se incluye un objeto de entrada de cuadro de texto donde el usuario escribe la dirección URL de la que se va a obtener una vista previa.The following javascript example includes a textbox input object where the user enters the URL to preview. Cuando el usuario hace clic en el botón Vista previa, el método OnClick se enruta a getPreview, donde el código genera una solicitud web para el punto de conexión UrlPreview.When the user clicks the Preview button, the onclick method routes to getPreview where code generates a Web request to the UrlPreview endpoint.

El código crea un objeto XMLHttpRequest, agrega el encabezado y la clave Ocp-Apim-Subscription-Key, y envía la solicitud.The code creates an XMLHttpRequest, adds the Ocp-Apim-Subscription-Key header and key, and sends the request. Agrega un controlador de eventos asincrónicos para procesar la respuesta.It adds an asynchronous event handler to process the response.

Si la respuesta se devuelve correctamente, el controlador asigna el texto JSON de la respuesta al párrafo demo en la página.If the response returns successfully, the handler assigns the JSON text of the response to the demo paragraph on the page. Otros elementos de la respuesta se establecen en los párrafos siguientes para su presentación.Other response elements are set to the following paragraphs for display.

Respuesta JSON sin formatoRaw JSON response

{
  "_type": "WebPage",
  "name": "SwiftKey - Smart prediction technology for easier mobile typing",
  "url": "https://swiftkey.com/en",
  "description": "Discover the best Android and iPhone and iPad apps for faster, easier typing with emoji, colorful themes and more - download SwiftKey Keyboard free today.",
  "isFamilyFriendly": true,
  "primaryImageOfPage": {
    "contentUrl": "https://swiftkey.com/images/og/default.jpg"
  }
}

Demostración en ejecuciónThe running demo

Ejemplo de URL Preview de JavaScript

Ejecución de la aplicaciónRunning the application

Para ejecutar la aplicación:To run the application:

  1. Reemplace el valor YOUR-SUBSCRIPTION-KEY por una clave de acceso válida para la suscripción.Replace the YOUR-SUBSCRIPTION-KEY value with a valid access key for your subscription.
  2. Guarde el código HTML y el script en un archivo con la extensión .html.Save the HTML and script to a file with .html extension.
  3. Ejecute la página web en un explorador.Run the Web page in a browser.
  4. Use la dirección URL existente, o especifique otra en el cuadro de texto.Use the existing URL, or enter another in the textbox.
  5. Haga clic en el botón Vista previa.Click the Preview button.

Código fuente:Source code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>urlPreview Demo</title>
</head>
<body>
    <h3>URL Preview Demo</h3>

    Page to preview: <input type="url" id="myURL" value="https://swiftkey.com/en">
    <button onclick="getPreview()">Preview</button>

    <p id="demo"></p>
    <br />
    <p id="jsonDesc"></p>
    <p><a id="familyFriendly"></a></p>
    <a id="contentUrl"></a>
    <p />
    <img id="jsonImage" />

    <script>

        var BING_ENDPOINT = "https://api.labs.cognitive.microsoft.com/urlpreview/v7.0/search"; 
        var key = "YOUR-SUBSCRIPTION-KEY";
        var xhr;

        function getPreview() {
            xhr = new XMLHttpRequest();

            var queryUrl = BING_ENDPOINT + "?q=" +
                encodeURIComponent(document.getElementById("myURL").value);
            xhr.open('GET', queryUrl, true);
            xhr.setRequestHeader("Ocp-Apim-Subscription-Key", key);

            xhr.send();

            xhr.addEventListener("readystatechange", processRequest, false);
        }

        function processRequest(e) {

            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("demo").innerHTML = xhr.responseText;
                var obj = JSON.parse(xhr.responseText);
                document.getElementById("jsonDesc").innerHTML = obj.description;
                document.getElementById("familyFriendly").innerHTML = "Family Friendly: " + obj.isFamilyFriendly;
                document.getElementById("contentUrl").innerHTML = obj.url;
                document.getElementById("contentUrl").href = obj.url;
                document.getElementById("jsonImage").width = 350;
                document.getElementById("jsonImage").src = obj.primaryImageOfPage.contentUrl;

            }

        }

    </script>

</body>
</html>

Pasos siguientesNext steps