Die jQuery+Bing-API implementiert eine einfache Suchmaschine

Microsoft hat Bing, den Nachfolger der Live-Suche, im Juni dieses Jahres offiziell veröffentlicht und außerdem einen sehr umfassenden Satz an APIs bereitgestellt. Wie die Google API können Webentwickler mithilfe der Bing API verschiedene Dienste der Bing-Suche in ihre Websites integrieren und so die Website-Funktionen bereichern und Traffic auf die Website bringen. In diesem Artikel zeigt Ihnen CSS9.NET anhand eines vollständigen Anwendungsbeispiels, wie Sie mit jQuery die Bing-API aufrufen, um eine einfache Websuchmaschine zu implementieren, und erhalten ein grundlegendes Verständnis der Bing-API.

Lassen Sie uns zunächst eine Wahrnehmungserfahrung machen: Online-Beispiel

Die Bing-API stellt drei Suchergebnisdatentypen bereit: SOAP, XML und JSON. Im Beispiel wird die JSON-Datentypschnittstelle über jQuery Ajax aufgerufen, um die Daten anzuzeigen. Werfen wir einen Blick auf die Implementierung:

Vorbereitung :

Microsoft zeigt uns eine detaillierte Entwicklungsdokumentation über die Bing-API-Site:

1. Besuchen Sie die Bing-Entwicklerseite: http://bing.com/developers . Den Zugang zur Bing-API finden Sie auch hier.
2. Melden Sie sich mit einem Microsoft-Konto an (falls Sie noch keins haben, können Sie zunächst nur eines registrieren)
3. Füllen Sie das Formular aus und erhalten Sie die „APP-ID“ (wird beim Aufruf der API verwendet, Microsoft muss sicherstellen, dass Sie ein Microsoft-Entwickler sind)

HTML-Teil

Die Seitenelemente sind sehr einfach und bestehen hauptsächlich aus fünf Teilen: Sucheingang, Ergebnisanzeigebereich, Ergebnisbeschreibung, Fehlermeldungsanzeige und Seitennavigation. Schauen wir uns den HTML-Code unten an:

<div class="line search-content">
<div class="column col- threefifths">
<h3 id="results-header"></h3>
<p id="results-summary"></p>
<!--Ergebnisanzeigebereich-->
<div id="search-result">
<h3>Suchergebnisse</h3>
<!-- Ergebnisbeschreibung, z. B. wie viele Einträge es insgesamt gibt, aber welche davor -->
<div id="result-aggregates" class="results"></div>
<ul id="result-list" class="results">
</ul>
<!--Seitennavigation-->
<ul id="result-navigation" class="result-navigation">
<li id="prev">&laquo;</li>
<li id="next">&raquo;</li>
</ul>
</div>
<!--Fehlermeldungsanzeige-->
<p id="error-list">
</p>
</div>
<!--Eingang suchen-->
<div class="column last-col">
<h3>Geben Sie Suchbegriffe ein:</h3>
<p>
<input id="txtQuery" type="text" title="Suchbegriffe" />
<button id="btnSearch" type="button" title="Search">Suchen</button>
</p>
</div>
</div>

Aufrufen von Bing-API-Teilen über jQuery

Definieren Sie einige Parameter, die an die Bing-API übergeben werden müssen: //Die angewendete APP-ID, ersetzen Sie sie hier durch Ihre eigene.
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//Suchzeichenfolge durch den Benutzer abrufen, der den Suchbegriff eingibt
var Abfrage = "Abfrage="
// Geben Sie den Suchquellentyp an. Bing stellt alle Typen wie Webseiten, Videos, Bilder usw. bereit, siehe API
//Hier wird der Webseitentyp angegeben
var Sources = "Sources=Web";
//API-Version angeben
var Version = "Version=2.0";
//Geben Sie die Region an, z. B. Google. Die Suchergebnisse in jeder Region sind unterschiedlich.
var Market = "Market=zh-cn";
//Einige Optionseinstellungen, hier aktivieren Sie die Hervorhebung von Suchbegriffen in den Suchergebnissen
var Options = "Options=EnableHighlighting";
//Gibt die Anzahl der Elemente pro Seite zurück
varWebCount = 10;
//Welche Seite ist die aktuelle Seite, beginnend bei 0?
varWebOffset = 0;