API jQuery + Bing implementa mecanismo de pesquisa simples

A Microsoft lançou oficialmente o Bing, o sucessor do Live Search, em junho deste ano, e também forneceu um conjunto muito abrangente de APIs. Assim como a API do Google, usando a API do Bing, os desenvolvedores da web podem integrar vários serviços de pesquisa do Bing em seus sites, enriquecendo assim as funções do site e trazendo tráfego para o site. Neste artigo, CSS9.NET usa um exemplo de uso completo para mostrar como usar jQuery para chamar a API do Bing para implementar um mecanismo de pesquisa na web simples e ter um conhecimento básico da API do Bing.

Primeiro, vamos ter uma experiência perceptiva: exemplo online

A API do Bing fornece três tipos de dados de resultados de pesquisa: SOAP, XML e JSON. No exemplo, a interface do tipo de dados json é chamada por meio de jQuery ajax para exibir os dados. Vamos dar uma olhada em sua implementação:

Preparação :

A Microsoft nos mostra documentação detalhada de desenvolvimento por meio do site da API do Bing:

1. Visite o site do desenvolvedor do Bing: http://bing.com/developers Você também pode encontrar a entrada para a API do Bing no MSDN aqui.
2. Faça login com uma conta da Microsoft (se não tiver uma, você só pode registrar uma primeiro)
3. Preencha o formulário e obtenha o "APP ID" (usado ao chamar a API, a Microsoft precisa ter certeza de que você é um desenvolvedor Microsoft)

Parte HTML

Os elementos da página são muito simples, incluindo principalmente cinco partes: entrada de pesquisa, área de exibição de resultados, descrição de resultados, exibição de mensagens de erro e navegação na página. Vejamos o HTML abaixo:

<div class="line search-content">
<div class="coluna col-três quintos">
<h3 id="resultados-header"></h3>
<p id="resumo-resultados"></p>
<!--Área de exibição de resultados-->
<div id="resultado da pesquisa">
<h3>Resultados da pesquisa</h3>
<!-- Descrição do resultado, como quantas entradas existem no total, mas quais são anteriores -->
<div id="result-agregados" class="resultados"></div>
<ul id="lista de resultados" class="resultados">
</ul>
<!--Navegação na página-->
<ul id="navegação-resultado" class="navegação-resultado">
<li id="prev">&laquo;</li>
<li id="próximo">&raquo;</li>
</ul>
</div>
<!--Exibição de mensagem de erro-->
<p id="lista de erros">
</p>
</div>
<!--Entrada de pesquisa-->
<div class="coluna última coluna">
<h3>Insira os termos de pesquisa:</h3>
<p>
<input id="txtQuery" type="text" title="Termos de pesquisa" />
<button id="btnSearch" type="button" title="Search">Pesquisar</button>
</p>
</div>
</div>

Chamando partes da API do Bing via jQuery

Defina alguns parâmetros que precisam ser passados ​​para a API do Bing: //O ID do APP aplicado, substitua-o pelo seu aqui.
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//Obtém a string de pesquisa pelo usuário que digita o termo de pesquisa
var Consulta = "Consulta ="
//Especifique o tipo de fonte de pesquisa. O Bing fornece todos os tipos, como páginas da web, vídeos, imagens, etc., consulte a API.
//Especificado aqui é o tipo de página da web
var Fontes = "Fontes=Web";
//Especifica a versão da API
var Versão = "Versão=2.0";
//Especifique a região, como Google. Os resultados da pesquisa em cada região são especificados aqui.
var Mercado = "Mercado=zh-cn";
//Algumas configurações de opções, aqui ative o destaque de palavras de pesquisa nos resultados de pesquisa
var Options = "Options=EnableHighlighting";
//Retorna o número de itens por página
varWebCount = 10;
//Qual página é a página atual, começando em 0?
varWebOffset = 0;