L'API jQuery+Bing implémente un moteur de recherche simple

Microsoft a officiellement lancé Bing, le successeur de Live Search, en juin de cette année, et a également fourni un ensemble très complet d'API. Comme l'API Google, en utilisant l'API Bing, les développeurs Web peuvent intégrer divers services de recherche Bing dans leurs sites Web, enrichissant ainsi les fonctions du site Web et générant du trafic vers le site Web. Dans cet article, CSS9.NET utilise un exemple d'utilisation complet pour vous montrer comment utiliser jQuery pour appeler l'API Bing afin d'implémenter un moteur de recherche Web simple et avoir une compréhension de base de l'API Bing.

Commençons par une expérience perceptuelle : exemple en ligne

L'API Bing fournit trois types de données de résultats de recherche : SOAP, XML et JSON. Dans l'exemple, l'interface de type de données json est appelée via jQuery ajax pour afficher les données. Jetons un coup d'œil à sa mise en œuvre :

Préparation :

Microsoft nous montre une documentation de développement détaillée via le site API Bing :

1. Visitez le site des développeurs Bing : http://bing.com/developers . Vous pouvez également trouver l'entrée de l'API Bing sur MSDN ici.
2. Connectez-vous avec un compte Microsoft (si vous n’en avez pas, vous ne pouvez d’abord en enregistrer qu’un)
3. Remplissez le formulaire et obtenez le "APP ID" (utilisé lors de l'appel de l'API, Microsoft doit s'assurer que vous êtes un développeur Microsoft)

Partie HTML

Les éléments de la page sont très simples et comprennent principalement cinq parties : entrée de recherche, zone d'affichage des résultats, description du résultat, affichage des messages d'erreur et navigation dans la page. Regardons le code HTML ci-dessous :

<div class="line search-content">
<div class="colonne col-trois-cinquièmes">
<h3 id="results-header"></h3>
<p id="results-summary"></p>
<!--Zone d'affichage des résultats-->
<div id="search-result">
<h3>Résultats de recherche</h3>
<!-- Description du résultat, par exemple combien d'entrées y a-t-il au total, mais lesquelles se trouvent avant -->
<div id="result-aggregates" class="results"></div>
<ul id="result-list" class="results">
</ul>
<!--Navigation des pages-->
<ul id="result-navigation" class="result-navigation">
<li id="prev">&laquo;</li>
<li id="next">&raquo;</li>
</ul>
</div>
<!--Affichage du message d'erreur-->
<p id="liste d'erreurs">
</p>
</div>
<!--Rechercher l'entrée-->
<div class="colonne dernier-col">
<h3>Saisissez les termes de recherche :</h3>
<p>
<input id="txtQuery" type="text" title="Termes de recherche" />
<button id="btnSearch" type="button" title="Recherche">Rechercher</button>
</p>
</div>
</div>

Appel de parties de l'API Bing via jQuery

Définissez certains paramètres qui doivent être transmis à l'API Bing : //L'ID d'application appliqué, remplacez-le par le vôtre ici.
varAppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
// Récupère la chaîne de recherche par l'utilisateur saisissant le terme de recherche
var Requête = "Requête ="
//Spécifiez le type de source de recherche. Bing fournit tous les types tels que les pages Web, les vidéos, les images, etc., reportez-vous à l'API.
//Spécifié ici est le type de page Web
var Sources = "Sources=Web";
//Spécifier la version de l'API
varVersion = "Version=2.0";
//Spécifiez la région, comme Google. Les résultats de recherche dans chaque région sont différents. La Chine est spécifiée ici.
var Marché = "Marché=zh-cn";
// Quelques paramètres d'options, activez ici la mise en surbrillance des mots de recherche dans les résultats de recherche
var Options = "Options=EnableHighlighting";
//Renvoie le nombre d'éléments par page
varWebCount = 10 ;
//Quelle est la page actuelle, à partir de 0 ?
varWebOffset = 0 ;