Tutorial: Single-Page-Webanwendung für die VideosucheTutorial: Single-page Video Search app

Mit der Bing-Videosuche-API können Sie das Web durchsuchen und für eine Suchabfrage relevante Videoergebnisse abrufen.The Bing Video Search API lets you search the Web and get video results relevant to a search query. In diesem Tutorial wird eine Single-Page-Webanwendung erstellt, die unter Verwendung der Bing-Suche-API Suchergebnisse auf der Seite anzeigt.In this tutorial, we build a single-page Web application that uses the Bing search API to display search results on the page. Die Anwendung enthält HTML-, CSS- und JavaScript-Komponenten.The application includes HTML, CSS, and JavaScript components.

Hinweis

Wenn Sie auf die JSON- und HTTP-Überschriften im unteren Bereich der Seite klicken, werden die JSON-Antwort und HTTP-Anforderungsinformationen angezeigt.The JSON and HTTP headings at the bottom of the page when clicked show the JSON response and HTTP request information. Diese Details können hilfreich sein, wenn Sie sich genauer mit dem Dienst befassen.These details can be useful when exploring the service.

JSON- und HTTP-Rohergebnisse

Mit dieser Tutorial-App wird folgendes veranschaulicht:This tutorial app illustrates how to:

  • Aufrufen der Bing-Videosuche-API in JavaScriptPerform a Bing Video Search API call in JavaScript
  • Übergeben von Suchoptionen an die Bing-Suche-APIPass search options to the Bing Search API
  • Anzeigen von Ergebnissen der Videosuche oder optionales Einschließen von Webseiten, News oder BildernDisplay video search results or to optionally include Web pages, news, or images
  • Suchzeitrahmen von 24 Stunden, der letzten Woche, dem letzten Monat oder aller verfügbaren ZeitSearch time-frames of 24 hours, the past week, month, or all available time
  • Seitenweises Anzeigen von SuchergebnissenPage through search results
  • Verarbeiten der Bing-Client-ID und des API-AbonnementschlüsselsHandle the Bing client ID and API subscription key
  • Behandeln von möglicherweise auftretenden FehlernHandle errors that might occur

Die Tutorialseite ist unabhängig von anderen Komponenten und verwendet keine externen Frameworks, Stylesheets oder Bilddateien.The tutorial page is entirely self-contained; it does not use any external frameworks, style sheets, or image files. Die Seite greift nur auf die am häufigsten unterstützten Features für JavaScript zurück und kann in aktuellen Versionen aller gängigen Webbrowser ausgeführt werden.It uses only widely supported JavaScript language features and works with current versions of all major Web browsers.

In diesem Tutorial werden ausgewählte Teile des Quellcodes erläutert.In this tutorial, we discuss selected portions of the source code. Der vollständige Quellcode steht zur Verfügung.The complete source code is available. Zum Ausführen des Beispiels kopieren Sie den Quellcode, fügen Sie ihn in einen Text-Editor ein, und speichern Sie die Datei als bing.html.To run the example, copy and paste the source code into a text editor and save it as bing.html.

App-KomponentenApp components

Diese Tutorial-App setzt sich ebenso wie alle anderen Single-Page-Web-Apps aus drei Teilen zusammen:Like any single-page Web app, this tutorial application includes three parts:

  • HTML: Definiert die Struktur und der Inhalt der SeiteHTML - Defines the structure and content of the page
  • CSS: Definiert das Layout der SeiteCSS - Defines the appearance of the page
  • JavaScript: Definiert das Verhalten der SeiteJavaScript - Defines the behavior of the page

Bei HTML und CSS handelt es sich zum Großteil um konventionellen Code, der in diesem Tutorial nicht erläutert wird.Most of the HTML and CSS is conventional, so the tutorial doesn't discuss it. Der HTML-Teil enthält das Suchformular, in dem der Benutzer eine Abfrage eingibt und Suchoptionen auswählt.The HTML contains the search form in which the user enters a query and chooses search options. Das Formular wird vom JavaScript-Teil ausgewertet, der die Suche mithilfe des onsubmit-Attributs des <form>-Tags ausführt:The form is connected to JavaScript that does the search using the onsubmit attribute of the <form> tag:

<form name="bing" onsubmit="return bingWebSearch(this)">

Der onsubmit-Handler gibt false zurück, wodurch verhindert wird, dass das Formular an den Server gesendet wird.The onsubmit handler returns false, which keeps the form from being submitted to a server. Der JavaScript-Code ist dafür verantwortlich, die erforderlichen Informationen aus dem Formular abzurufen und die Suche durchzuführen.The JavaScript code does the work of collecting the necessary information from the form and performing the search.

Der HTML-Teil enthält auch die Bereiche (<div>-HTML-Tags), in denen die Suchergebnisse angezeigt werden.The HTML also contains the divisions (HTML <div> tags) where the search results appear.

Verwalten des AbonnementschlüsselsManaging subscription key

Zum Speichern des Schlüssels wird der persistente Browserspeicher verwendet. Auf diese Weise müssen Sie nicht den Abonnementschlüssel der Bing-Suche-API im Code hinterlegen.To avoid having to include the Bing Search API subscription key in the code, we use the browser's persistent storage to store the key. Vor dem Speichern des Schlüssels wird der Benutzer zur Eingabe des Schlüssels aufgefordert.Before the key is stored, we prompt for the user's key. Wird der Schlüssel zu einem späteren Zeitpunkt von der API zurückgewiesen, wird der gespeicherte Schlüssel für ungültig erklärt, und der Benutzer wird zur erneuten Eingabe aufgefordert.If the key is later rejected by the API, we invalidate the stored key so the user will be prompted again.

In den Funktionen storeValue und retrieveValue wird entweder das localStorage-Objekt (nicht von allen Browsern unterstützt) oder ein Cookie verwendet.We define storeValue and retrieveValue functions that use either the localStorage object (not all browsers support it) or a cookie. Diese Funktionen werden in der getSubscriptionKey()-Funktion zum Speichern und Abrufen des Benutzerschlüssels verwendet.The getSubscriptionKey() function uses these functions to store and retrieve the user's key.

// Cookie names for data we store
API_KEY_COOKIE   = "bing-search-api-key";
CLIENT_ID_COOKIE = "bing-search-client-id";

// ... omitted definitions of store value and retrieve value
// Browsers differ in their support for persistent storage by 
// local HTML files. See the source code for browser-specific
// options.

// Get stored API subscription key, or prompt if it's not found.
function getSubscriptionKey() {
    var key = retrieveValue(API_KEY_COOKIE);
    while (key.length !== 32) {
        key = prompt("Enter Bing Search API subscription key:", "").trim();
    }
    // always set the cookie in order to update the expiration date
    storeValue(API_KEY_COOKIE, key);
    return key;
}

Das onsubmit-Attribut des HTML-Tags <form> ruft die bingWebSearch-Funktion auf, um die Suchergebnisse zurückzugeben.The HTML <form> tag onsubmit calls the bingWebSearch function to return search results. bingWebSearch verwendet getSubscriptionKey() zur Authentifizierung aller Abfragen.bingWebSearch uses getSubscriptionKey() to authenticate each query. Wie in der obigen Definition gezeigt, fordert getSubscriptionKey den Benutzer zur Eingabe des Schlüssels auf, falls dieser noch nicht eingegeben wurde.As shown in the previous definition, getSubscriptionKey prompts the user for the key if the key hasn't been entered. Der Schlüssel wird anschließend gespeichert und kann von der Anwendung auch später verwendet werden.The key is then stored for continuing use by the application.

<form name="bing" onsubmit="this.offset.value = 0; return bingWebSearch(this.query.value, 
    bingSearchOptions(this), getSubscriptionKey())">

Auswählen der SuchoptionenSelecting search options

Die folgende Abbildung zeigt das Abfragetextfeld und Optionen, die eine Suche definieren.The following figure shows the query text box and options that define a search.

Optionen der Bing-News-Suche

Das HTML-Formular enthält folgende Elemente:The HTML form includes elements with the following names:

ElementElement BESCHREIBUNGDescription
where Ein Dropdownmenü zur Auswahl des Markts (Ort und Sprache), der für die Suche verwendet wird.A drop-down menu for selecting the market (location and language) used for the search.
query Das Textfeld, in das Suchbegriffe eingegeben werden.The text field to enter the search terms.
modules Kontrollkästchen, mit denen bestimmte Module der Ergebnisse, alle Ergebnisse oder zugehörige Videos heraufgestuft werden können.Checkboxes for promoting particular modules of results, all results or related videos.
when Dropdownmenü, mit dem die Suche optional auf den letzten Tag, die letzte Woche oder den letzten Monat eingeschränkt werden kann.Drop-down menu for optionally limiting the search to the most recent day, week, or month.
safe Ein Kontrollkästchen, mit dem festgelegt wird, ob das SafeSearch-Feature von Bing verwendet werden soll. Mit diesem werden Inhalte herausgefiltert, die für Minderjährige nicht geeignet sind.A checkbox indicating whether to use the Bing SafeSearch feature to filter out "adult" results.
count Verborgenes Feld.Hidden field. Die Anzahl der Suchergebnisse, die bei jeder Anforderung zurückgegeben werden.The number of search results to return on each request. Damit lässt sich die Anzahl der angezeigten Ergebnisse pro Seite festlegen.Change to display fewer or more results per page.
offset Verborgenes Feld.Hidden field. Der Offset für das erste Suchergebnis der Anforderung. Dieser wird zur Unterteilung der Suchergebnisse in mehrere Seiten verwendet.The offset of the first search result in the request; used for paging. Der Offset wird bei einer neuen Anforderung auf 0 zurückgesetzt.It's reset to 0 on a new request.

Hinweis

Die Bing-Websuche bietet noch andere Abfrageparameter.Bing Web Search offers other query parameters. Hier werden nur einige davon verwendet.We're using only a few of them.

// build query options from the HTML form
// build query options from the HTML form
function bingSearchOptions(form) {

    var options = [];
    options.push("mkt=" + form.where.value);
    options.push("SafeSearch=" + (form.safe.checked ? "strict" : "off"));

    if (form.when.value.length) options.push("freshness=" + form.when.value);
    var what = [];
    for (var i = 0; i < form.what.length; i++) 
        if (form.what[i].checked) what.push(form.what[i].value);
    if (what.length) {
        options.push("modules=" + what.join(","));
        options.push("answerCount=9");
    }
    options.push("count=" + form.count.value);
    options.push("offset=" + form.offset.value);
    options.push("textDecorations=true");
    options.push("textFormat=HTML");
    return options.join("&");
}

Der Parameter SafeSearch kann bei einem API-Aufruf beispielsweise die Werte strict, moderate oder off annehmen, wobei moderate der Standardwert ist.For example, the SafeSearch parameter in an actual API call can be strict, moderate, or off, with moderate being the default. In unserem Formular wird hingegen ein Kontrollkästchen verwendet, das nur über zwei Zustände verfügt.Our form, however, uses a checkbox, which has only two states. Der JavaScript-Code konvertiert diese Einstellung entweder in strict oder off (moderate wird nicht verwendet).The JavaScript code converts this setting to either strict or off (moderate is not used).

Ausführen der AnforderungPerforming the request

Die BingWebSearch-Funktion verwendet auf der Grundlage der Abfrage, der Optionszeichenfolge und des API-Schlüssels ein XMLHttpRequest-Objekt, um die Anforderung an den Bing-Suche-API-Endpunkt zu senden.Given the query, the options string, and the API key, the BingWebSearch function uses an XMLHttpRequest object to make the request to the Bing Search endpoint. Sie können den unten angegebenen globalen Endpunkt oder den Endpunkt der benutzerdefinierten Unterdomäne verwenden, der im Azure-Portal für Ihre Ressource angezeigt wird.You can use the global endpoint below, or the custom subdomain endpoint displayed in the Azure portal for your resource.

// Search on the query, using search options, authenticated by the key.
function bingWebSearch(query, options, key) {

    // scroll to top of window
    window.scrollTo(0, 0);
    if (!query.trim().length) return false;     // empty query, do nothing

    showDiv("noresults", "Working. Please wait.");
    hideDivs("pole", "mainline", "sidebar", "_json", "_headers", "paging1", "paging2", "error");

    var endpoint = "https://api.cognitive.microsoft.com/bing/v7.0/videos/search";
    var request = new XMLHttpRequest();
    var queryurl = endpoint + "?q=" + encodeURIComponent(query) + "&" + options;

    try {
        request.open("GET", queryurl);
    } 
    catch (e) {
        renderErrorMessage("Bad request (invalid URL)\n" + queryurl);
        return false;
    }

    // add request headers
    request.setRequestHeader("Ocp-Apim-Subscription-Key", key);
    request.setRequestHeader("Accept", "application/json");
    var clientid = retrieveValue(CLIENT_ID_COOKIE);
    if (clientid) request.setRequestHeader("X-MSEdge-ClientID", clientid);

    // event handler for successful response
    request.addEventListener("load", handleOnLoad);

    // event handler for erorrs
    request.addEventListener("error", function() {
        renderErrorMessage("Error completing request");
    });

    // event handler for aborted request
    request.addEventListener("abort", function() {
        renderErrorMessage("Request aborted");
    });

    // send the request
    request.send();
    return false;
}

Nach erfolgreichem Abschluss der HTTP-Anforderung ruft JavaScript den load-Ereignishandler handleOnLoad() auf, um eine erfolgreiche HTTP-GET-Anforderung an die API zu verarbeiten.On successful completion of the HTTP request, JavaScript calls the load event handler, handleOnLoad(), to handle a successful HTTP GET request to the API.

// handle Bing search request results
function handleOnLoad() {
    hideDivs("noresults");

    var json = this.responseText.trim();
    var jsobj = {};

    // try to parse JSON results
    try {
        if (json.length) jsobj = JSON.parse(json);
    } catch(e) {
        renderErrorMessage("Invalid JSON response");
    }

    // show raw JSON and headers
    showDiv("json", preFormat(JSON.stringify(jsobj, null, 2)));
    showDiv("http", preFormat("GET " + this.responseURL + "\n\nStatus: " + this.status + " " + 
        this.statusText + "\n" + this.getAllResponseHeaders()));

    // if HTTP response is 200 OK, try to render search results
    if (this.status === 200) {
        var clientid = this.getResponseHeader("X-MSEdge-ClientID");
        if (clientid) retrieveValue(CLIENT_ID_COOKIE, clientid);
        if (json.length) {
            if (jsobj._type === "Videos") {//"SearchResponse" && "rankingResponse" in jsobj) {
                renderSearchResults(jsobj);
            } else {
                renderErrorMessage("No search results in JSON response");
            }
        } else {
            renderErrorMessage("Empty response (are you sending too many requests too quickly?)");
        }
    }

    // Any other HTTP response is an error
    else {
        // 401 is unauthorized; force re-prompt for API key for next request
        if (this.status === 401) invalidateSubscriptionKey();

        // some error responses don't have a top-level errors object, so gin one up
        var errors = jsobj.errors || [jsobj];
        var errmsg = [];

        // display HTTP status code
        errmsg.push("HTTP Status " + this.status + " " + this.statusText + "\n");

        // add all fields from all error responses
        for (var i = 0; i < errors.length; i++) {
            if (i) errmsg.push("\n");
            for (var k in errors[i]) errmsg.push(k + ": " + errors[i][k]);
        }

        // also display Bing Trace ID if it isn't blocked by CORS
        var traceid = this.getResponseHeader("BingAPIs-TraceId");
        if (traceid) errmsg.push("\nTrace ID " + traceid);

        // and display the error message
        renderErrorMessage(errmsg.join("\n"));
    }
}

Wichtig

Wenn bei einem Suchvorgang ein Fehler auftritt, gibt die Bing-News-Suche-API einen HTTP-Statuscode zurück, der vom Code 200 abweicht und Fehlerinformationen in der JSON-Antwort enthält.If an error occurs in the search operation, the Bing News Search API returns a non-200 HTTP status code and includes error information in the JSON response. Wenn die Anzahl der Anforderungen begrenzt war, gibt die API zusätzlich eine leere Antwort zurück.Additionally, if the request was rate-limited, the API returns an empty response. Eine erfolgreiche HTTP-Anforderung ist nicht zwangsläufig mit einer erfolgreichen Suche gleichzusetzen.A successful HTTP request does not necessarily mean that the search itself succeeded.

Ein Großteil des Codes in den beiden vorangehenden Funktionen ist für die Fehlerbehandlung zuständig.Much of the code in both of the preceding functions is dedicated to error handling. In folgenden Phasen können Fehler auftreten:Errors may occur at the following stages:

PhaseStage Mögliche FehlerPotential error(s) Verarbeitet durchHandled by
Erstellen des JavaScript-AnforderungsobjektsBuilding the JavaScript request object Ungültige URLInvalid URL try/catch-Blocktry/catch block
Senden der AnforderungMaking the request Netzwerkfehler, abgebrochene VerbindungenNetwork errors, aborted connections Ereignishandler error und aborterror and abort event handlers
Durchführen der SuchePerforming the search Ungültige Anforderung, ungültiger JSON-Code, Beschränkung der AnforderungsanzahlInvalid request, invalid JSON, rate limits Tests im load-Ereignishandlertests in load event handler

Fehler werden behandelt, indem renderErrorMessage() zusammen mit allen bekannten Fehlerinformationen aufgerufen wird.Errors are handled by calling renderErrorMessage() with any details known about the error. Wenn die Antwort alle Fehlertests besteht, wird renderSearchResults() zur Anzeige der Suchergebnisse auf der Seite aufgerufen.If the response passes the full gauntlet of error tests, we call renderSearchResults() to display the search results in the page.

Anzeigen der SuchergebnisseDisplaying search results

Die Hauptfunktion zum Anzeigen der Suchergebnisse ist renderSearchResults().The main function for displaying the search results is renderSearchResults(). Diese Funktion verwendet den vom Bing-News-Suche-Dienst zurückgegebenen JSON-Code und rendert die News-Ergebnisse sowie verwandte Suchvorgänge (falls vorhanden).This function takes the JSON returned by the Bing News Search service and renders the news results and the related searches, if any.

// render the search results given the parsed JSON response
function renderSearchResults(results) {

    // add Prev / Next links with result count
    var pagingLinks = renderPagingLinks(results);
    showDiv("paging1", pagingLinks);
    showDiv("paging2", pagingLinks);

    // Render the results to the mainline section
    for (section in { mainline: 0 }) {
         showDiv(section, renderResultsItems(section, results));
    }
}

Die Suchergebnisse werden als value-Objekt der obersten Ebene in der JSON-Antwort zurückgegeben.The search results are returned as the top-level value object in the JSON response. Diese werden dann an die renderResultsItems()-Funktion übergeben, die diese durchläuft und eine Funktion zum Rendern der einzelnen Elemente in HTML aufruft.We pass them to our function renderResultsItems(), which iterates through them and calls a function to render each item into HTML. Der resultierende HTML-Code wird an renderSearchResults() zurückgegeben, wo er in den Bereich results auf der Seite eingefügt wird.The resulting HTML is returned to renderSearchResults(), where it is inserted into the results division in the page.

// render search results
    function renderResultsItems(section, results) {   

        var items = results.value;
        var html = [];
        for (var i = 0; i < items.length; i++) { 
            var item = items[i];
            // collection name has lowercase first letter
            var type = "videos";
            var render = searchItemRenderers[type];
            html.push(render(item, section));  
        }
    return html.join("\n\n");
}

Die Bing-News-Suche-API gibt bis zu vier verschiedene Arten verwandter Ergebnisse zurück, und zwar jeweils in einem eigenen Objekt der obersten Ebene.The Bing News Search API returns up to four different kinds of related results, each in its own top-level object. Sie lauten wie folgt:They are:

BeziehungRelation BESCHREIBUNGDescription
pivotSuggestions Abfragen, bei denen ein Pivot-Wort in der ursprünglichen Suche durch ein anderes ersetzt wird.Queries that replace a pivot word in original search with a different one. Wenn Sie beispielsweise nach „rote Blumen“ suchen, kann ein Pivot-Wort „rote“ sein, und ein Pivot-Vorschlag kann „gelbe Blumen“ sein.For example, if you search for "red flowers," a pivot word might be "red," and a pivot suggestion might be "yellow flowers."
queryExpansions Abfragen, bei denen die ursprüngliche Suche durch Hinzufügen weiterer Begriffe eingegrenzt wird.Queries that narrow the original search by adding more terms. Wenn Sie beispielsweise nach „Microsoft Surface“ suchen, kann eine Abfrageerweiterung „Microsoft Surface Pro“ sein.For example, if you search for "Microsoft Surface," a query expansion might be "Microsoft Surface Pro."
relatedSearches Abfragen, die ebenfalls von anderen Benutzern eingegeben wurden, die auch die ursprüngliche Suche eingegeben haben.Queries that have also been entered by other users who entered the original search. Wenn Sie z.B. nach „Mount Rainier“ suchen, kann eine verwandte Suche „MountFor example, if you search for "Mount Rainier," a related search might be "Mt. Saint Helens“ lauten.Saint Helens."
similarTerms Abfragen, die von der Bedeutung her der ursprünglichen Suche ähneln.Queries that are similar in meaning to the original search. Wenn Sie beispielsweise nach „Schulen“ suchen, kann ein ähnlicher Begriff „Ausbildung“ sein.For example, if you search for "schools," a similar term might be "education."

Wie bereits bei renderSearchResults() gezeigt, werden nur die relatedItems-Vorschläge gerendert und die resultierenden Links auf der Randleiste der Seite eingefügt.As previously seen in renderSearchResults(), we render only the relatedItems suggestions and place the resulting links in the page's sidebar.

Rendern von ErgebniselementenRendering result items

Im JavaScript-Code kann das searchItemRenderers-Objekt Renderer enthalten, also Funktionen, die für jeden Suchergebnistyp HTML-Code generieren.In the JavaScript code the object, searchItemRenderers, can contains renderers: functions that generate HTML for each kind of search result. Die Seite für die Videosuche verwendet nur videos.The video search page only uses videos. Informationen zu verschiedenen Typen von Renderern finden Sie in anderen Tutorials.See other tutorials for various types of renderers.

searchItemRenderers = {
    news: function(item) { ... },
    webPages: function (item) { ... }, 
    images: function(item, index, count) { ... },
    videos: function (item, section, index, count) { ... },
    relatedSearches: function(item) { ... }
}

Für eine Funktion zum Rendern können die folgenden Parameter angegeben werden:A renderer function can accept the following parameters:

ParameterParameter BESCHREIBUNGDescription
item Das JavaScript-Objekt mit Eigenschaften des Elements, z.B. seine URL und Beschreibung.The JavaScript object containing the item's properties, such as its URL and its description.
index Der Index des Ergebniselements innerhalb der Auflistung.The index of the result item within its collection.
count Die Anzahl der Elemente in der Auflistung der Suchergebniselemente.The number of items in the search result item's collection.

Die Parameter index und count können beispielsweise zum Nummerieren von Ergebnissen, zum Generieren von speziellem HTML-Code für den Anfang oder das Ende einer Collection oder zum Einfügen von Zeilenumbrüchen nach einer bestimmten Anzahl von Elementen verwendet werden.The index and count parameters can be used to number results, to generate special HTML for the beginning or end of a collection, to insert line breaks after a certain number of items, and so on. Wenn ein Renderer diese Funktionalität nicht benötigt, muss er diese beiden Parameter nicht akzeptieren.If a renderer does not need this functionality, it does not need to accept these two parameters.

Der video-Renderer wird im folgenden JavaScript-Auszug gezeigt.The video renderer is shown in the following javascript excerpt. Bei Verwendung des Videos-Endpunkts sind alle Ergebnisse vom Typ Videos.Using the Videos endpoint, all results are of type Videos. Die searchItemRenderers werden im folgenden Codesegment gezeigt.The searchItemRenderers are shown in the following code segment.

// render functions for various types of search results
    searchItemRenderers = {

    videos: function (item, section, index, count) {
        var height = 60;
        var width = Math.round(height * item.thumbnail.width / item.thumbnail.height);
        var html = [];

        html.push("<p class='images'>");
        html.push("<a href='" + item.hostPageUrl + "'>");
        var title = escapeQuotes(item.name) + "\n" + getHost(item.hostPageDisplayUrl);
        html.push("<img src='" + item.thumbnailUrl + "&h=" + height + "&w=" + width +
            "' height=" + height + " width=" + width + " title='" + title + "' alt='" + title + "'>");
        html.push("</a>");
        html.push("<br>");
        html.push("<nobr><a href='" + item.contentUrl + "'>Video page source</a> - ");
        html.push(title.replace("\n", " (").replace(/([a-z0-9])\.([a-z0-9])/g, "$1.<wbr>$2") + ")</p>");
        return html.join("");
    }
}

Die Funktion zum Rendern führt folgende Vorgänge aus:The renderer function:

  • Erstellt ein Absatztag, weist es der images-Klasse zu und übergibt es mit einem Pushvorgang an den HTML-Array.Creates a paragraph tag, assigns it to the images class, and pushes it to the html array.
  • Berechnet die Größe von Miniaturbildern (die Breite ist auf 60 Pixel festgelegt, die Höhe wird proportional berechnet).Calculates image thumbnail size (width is fixed at 60 pixels, height calculated proportionately).
  • Erstellt das HTML-Tag <img>, mit dem das Miniaturbild angezeigt wird.Builds the HTML <img> tag to display the image thumbnail.
  • Erstellt die <a>-HTML-Tags, die eine Verknüpfung mit dem Bild und der Seite, die das Bild enthält, darstellen.Builds the HTML <a> tags that link to the image and the page that contains it.
  • Erstellt die Beschreibung, die Informationen über das Bild und die Website, auf der sich das Bild befindet, angibt.Builds the description that displays information about the image and the site it's on.

Die Größe des Miniaturbilds wird sowohl im <img>-Tag als auch in den Feldern h und w in der URL des Miniaturbilds verwendet.The thumbnail size is used in both the <img> tag and the h and w fields in the thumbnail's URL. Bing gibt ein Miniaturbild genau dieser Größe zurück.Bing will return a thumbnail of exactly that size.

Persistentes Speichern der Client-IDPersisting client ID

Antworten, die von Bing-Suche-APIs gesendet werden, können einen X-MSEdge-ClientID-Header enthalten, der mit den nachfolgenden Anforderungen an die API zurückgesendet werden sollte.Responses from the Bing search APIs may include an X-MSEdge-ClientID header that should be sent back to the API with successive requests. Wenn mehrere Bing-Suche-APIs genutzt werden, sollte nach Möglichkeit dieselbe Client-ID für alle APIs verwendet werden.If multiple Bing Search APIs are being used, the same client ID should be used with all of them, if possible.

Durch die Bereitstellung des X-MSEdge-ClientID-Headers können die Bing-Suche-APIs alle Suchvorgänge eines Benutzers zuordnen, was zwei entscheidende Vorteile mit sich bringt.Providing the X-MSEdge-ClientID header allows the Bing APIs to associate all of a user's searches, which has two important benefits.

Erstens kann die Bing-Suchmaschine auf diese Weise Kontextinformationen aus vorherigen Suchvorgängen nutzen, um den Benutzern relevantere Ergebnisse anzuzeigen.First, it allows the Bing search engine to apply past context to searches to find results that better satisfy the user. Wenn ein Benutzer in der Vergangenheit beispielsweise nach Segelbegriffen gesucht hat, können bei einer Suche nach „Knoten“ möglicherweise Informationen zu Segelknoten zurückgegeben werden.If a user has previously searched for terms related to sailing, for example, a later search for "knots" might preferentially return information about knots used in sailing.

Zweitens wählt Bing möglicherweise Benutzer zufällig aus, die die Möglichkeit haben, neue Features zu testen, bevor diese allen Benutzern zur Verfügung gestellt werden.Second, Bing may randomly select users to experience new features before they are made widely available. Indem Sie bei jeder Anforderung dieselbe Client-ID bereitstellen, stellen Sie sicher, dass Benutzer, denen das Feature angezeigt wird, dieses Feature dauerhaft nutzen können.Providing the same client ID with each request ensures that users who see the feature always see it. Ohne die Client-ID wird das Feature in den Suchergebnissen möglicherweise scheinbar willkürlich aus- oder eingeblendet.Without the client ID, the user might see a feature appear and disappear, seemingly at random, in their search results.

Durch Browsersicherheitsrichtlinien (CORS) kann der X-MSEdge-ClientID-Header möglicherweise nicht von JavaScript verwendet werden.Browser security policies (CORS) may prevent the X-MSEdge-ClientID header from being available to JavaScript. Diese Einschränkung tritt auf, wenn sich der Ursprung der Suchantwort von dem der Seite unterscheidet, die den Suchvorgang angefordert hat.This limitation occurs when the search response has a different origin from the page that requested it. In einer Produktionsumgebung sollten Sie zum Umgang mit dieser Richtlinie ein serverseitiges Skript hosten, das den API-Aufruf für die Domain durchführt, die auch für die Webseite genutzt wird.In a production environment, you should address this policy by hosting a server-side script that does the API call on the same domain as the Web page. Da der Ursprung des Skripts mit dem Ursprung der Webseite übereinstimmt, kann der X-MSEdge-ClientID-Header von JavaScript verwendet werden.Since the script has the same origin as the Web page, the X-MSEdge-ClientID header is then available to JavaScript.

Hinweis

In einer Web-App für eine Produktionsumgebung sollten Sie die Anforderung serverseitig ausführen.In a production Web application, you should perform the request server-side. Andernfalls muss der Schlüssel der Bing-Suche-API auf der Webseite hinterlegt werden, wo er im Quelltext für alle Personen zugänglich ist.Otherwise, your Bing Search API key must be included in the Web page, where it is available to anyone who views source. Dies müssen Sie vermeiden, da ansonsten unbefugte Dritte Anforderungen unter Verwendung Ihres API-Abonnementschlüssels Anforderungen senden können, die Ihnen in Rechnung gestellt werden.You are billed for all usage under your API subscription key, even requests made by unauthorized parties, so it is important not to expose your key.

In der Entwicklungsphase können Sie die Bing-Websuche-API-Anforderung über einen CORS-Proxy senden.For development purposes, you can make the Bing Web Search API request through a CORS proxy. In der Antwort eines solchen Proxys befindet sich ein Access-Control-Expose-Headers-Header, der Antwortheader zulässt und für JavaScript zur Verfügung stellt.The response from such a proxy has an Access-Control-Expose-Headers header that allows response headers and makes them available to JavaScript.

Die Installation eines CORS-Proxys, mit dem die Tutorial-App auf den Client-ID-Header zugreifen kann, ist schnell und unkompliziert.It's easy to install a CORS proxy to allow our tutorial app to access the client ID header. Installieren Sie Node.js, falls Sie dies noch nicht getan haben.First, if you don't already have it, install Node.js. Geben Sie anschließend folgenden Befehl in ein Befehlsfenster ein:Then issue the following command in a command window:

npm install -g cors-proxy-server

Passen Sie den Endpunkt der Bing-Websuche-API in der HTML-Datei wie folgt an:Next, change the Bing Web Search endpoint in the HTML file to:

http://localhost:9090/https://api.cognitive.microsoft.com/bing/v7.0/search

Starten Sie abschließend den CORS-Proxy mit folgendem Befehl:Finally, start the CORS proxy with the following command:

cors-proxy-server

Lassen Sie das Fenster während der Nutzung der Tutorial-App geöffnet. Wenn Sie das Fenster schließen, wird auch die Ausführung des Proxys beendet.Leave the command window open while you use the tutorial app; closing the window stops the proxy. Im Bereich mit den erweiterbaren HTTP-Headern unter den Suchergebnissen wird nun u.a. der X-MSEdge-ClientID-Header angezeigt. Hier können Sie überprüfen, ob dieser für alle Anforderungen identisch ist.In the expandable HTTP Headers section below the search results, you can now see the X-MSEdge-ClientID header (among others) and verify that it is the same for each request.

Nächste SchritteNext steps