jQuery+Bing API implementa un motor de búsqueda simple

Microsoft lanzó oficialmente Bing, el sucesor de Live Search, en junio de este año, y también proporcionó un conjunto muy completo de API. Al igual que la API de Google, al utilizar la API de Bing, los desarrolladores web pueden integrar varios servicios de búsqueda de Bing en sus sitios web, enriqueciendo así las funciones del sitio web y atrayendo tráfico al sitio web. En este artículo, CSS9.NET utiliza un ejemplo de uso completo para mostrarle cómo usar jQuery para llamar a la API de Bing para implementar un motor de búsqueda web simple y tener una comprensión básica de la API de Bing.

Primero, tengamos una experiencia perceptiva: ejemplo en línea

La API de Bing proporciona tres tipos de datos de resultados de búsqueda: SOAP, XML y JSON. En el ejemplo, la interfaz de tipo de datos json se llama a través de jQuery ajax para mostrar los datos. Echemos un vistazo a su implementación:

Preparación :

Microsoft nos muestra documentación de desarrollo detallada a través del sitio API de Bing:

1. Visite el sitio para desarrolladores de Bing: http://bing.com/developers . También puede encontrar la entrada a la API de Bing en MSDN aquí.
2. Inicie sesión con una cuenta de Microsoft (si no tiene una, primero solo puede registrar una)
3. Complete el formulario y obtenga el "ID de la aplicación" (se usa al llamar a la API, Microsoft debe asegurarse de que sea un desarrollador de Microsoft)

parte HTML

Los elementos de la página son muy simples e incluyen principalmente cinco partes: entrada de búsqueda, área de visualización de resultados, descripción del resultado, visualización de mensajes de error y navegación de la página. Veamos el HTML a continuación:

<div class="línea búsqueda-contenido">
<div class="columna col-tresquintos">
<h3 id="encabezado-resultados"></h3>
<p id="resumen-de-resultados"></p>
<!--Área de visualización de resultados-->
<div id="resultado-de-búsqueda">
<h3>Resultados de búsqueda</h3>
<!-- Descripción del resultado, como cuántas entradas hay en total, pero cuáles están antes -->
<div id="resultados-agregados" class="resultados"></div>
<ul id="lista-resultados" clase="resultados">
</ul>
<!--Navegación de página-->
<ul id="resultado-navegación" class="resultado-navegación">
<li id="prev">&laquo;</li>
<li id="siguiente">&raquo;</li>
</ul>
</div>
<!--Visualización de mensaje de error-->
<p id="lista-de-errores">
</p>
</div>
<!--Buscar entrada-->
<div class="columna última-col">
<h3>Ingrese los términos de búsqueda:</h3>
<p>
<input id="txtQuery" type="text" title="Términos de búsqueda" />
<botón id="btnSearch" tipo="botón" título="Buscar">Buscar</botón>
</p>
</div>
</div>

Llamar a partes de la API de Bing a través de jQuery

Defina algunos parámetros que deben pasarse a la API de Bing: //El ID de la aplicación aplicada, reemplácelo con el suyo aquí.
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//Obtiene la cadena de búsqueda cuando el usuario ingresa el término de búsqueda
var Consulta = "Consulta="
//Especifique el tipo de fuente de búsqueda. Bing proporciona todos los tipos, como páginas web, videos, imágenes, etc., consulte la API.
//Aquí se especifica el tipo de página web
var Fuentes = "Fuentes=Web";
//Especificar versión de API
var Versión = "Versión=2.0";
// Especifique la región, como Google. Aquí se especifican los resultados de búsqueda en cada región.
var Mercado = "Mercado=zh-cn";
//Algunas configuraciones de opciones, aquí activan el resaltado de palabras de búsqueda en los resultados de búsqueda
var Opciones = "Opciones=EnableHighlighting";
//Devuelve el número de elementos por página
varWebCount = 10;
// ¿Qué página es la página actual, comenzando desde 0?
varWebOffset = 0;