Schnellstart: URL-Vorschau in JavaScriptQuickstart: URL Preview in JavaScript

Die folgende einseitige Anwendung verwendet JavaScript zum Erstellen einer URL-Vorschau für die SwiftKey-Website: https://swiftkey.com/en.The following single-page application uses JavaScript to create a URL Preview for the SwiftKey site: https://swiftkey.com/en.

VoraussetzungenPrerequisites

Rufen Sie einen Zugriffsschlüssel für die kostenlose Testversion von Cognitive Services Labs ab.Get an access key for the free trial Cognitive Services Labs

CodeszenarioCode scenario

Das folgende Javascript-Beispiel enthält ein Textfeld-Eingabeobjekt, in das der Benutzer die URL eingibt, für die eine Vorschau ausgeführt werden soll.The following javascript example includes a textbox input object where the user enters the URL to preview. Wenn der Benutzer auf die Schaltfläche Preview (Vorschau) klickt, wird die onclick-Methode an getPreview weitergeleitet, wo Code eine Webanforderung für den UrlPreview-Endpunkt generiert.When the user clicks the Preview button, the onclick method routes to getPreview where code generates a Web request to the UrlPreview endpoint.

Der Code erstellt eine XMLHttpRequest, fügt den Ocp-Apim-Subscription-Key-Header und -Schlüssel hinzu und sendet die Anforderung.The code creates an XMLHttpRequest, adds the Ocp-Apim-Subscription-Key header and key, and sends the request. Er fügt einen asynchronen Ereignishandler zum Verarbeiten der Antwort hinzu.It adds an asynchronous event handler to process the response.

Wenn die Antwort erfolgreich zurückgegeben wird, weist der Handler den JSON-Text der Antwort dem demo-Absatz auf der Seite zu.If the response returns successfully, the handler assigns the JSON text of the response to the demo paragraph on the page. Andere Elemente der Antwort sind für die Anzeige auf die folgenden Absätze festgelegt.Other response elements are set to the following paragraphs for display.

Unformatierte JSON-AntwortRaw 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"
  }
}

Die ausgeführte DemoThe running demo

JavaScript-Beispiel für eine URL-Vorschau

Ausführen der AnwendungRunning the application

So führen Sie die Anwendung aus:To run the application:

  1. Ersetzen Sie den YOUR-SUBSCRIPTION-KEY-Wert durch einen für Ihr Abonnement gültigen Zugriffsschlüssel.Replace the YOUR-SUBSCRIPTION-KEY value with a valid access key for your subscription.
  2. Speichern Sie den HTML-Code und das Skript in einer Datei mit HTML-Erweiterung.Save the HTML and script to a file with .html extension.
  3. Führen Sie die Webseite im Browser aus.Run the Web page in a browser.
  4. Verwenden Sie die vorhandene URL, oder geben Sie eine andere in das Textfeld ein.Use the existing URL, or enter another in the textbox.
  5. Klicken Sie auf die Schaltfläche Vorschau.Click the Preview button.

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

Nächste SchritteNext steps