jQuery+Bing API ใช้เครื่องมือค้นหาแบบง่าย

Microsoft เปิดตัว Bing อย่างเป็นทางการ ผู้สืบทอดต่อ Live search ในเดือนมิถุนายนปีนี้ และยังจัดเตรียมชุด API ที่ครอบคลุมมากอีกด้วย เช่นเดียวกับ Google API โดยใช้ Bing API นักพัฒนาเว็บสามารถรวมบริการต่างๆ ในการค้นหาของ Bing เข้ากับเว็บไซต์ของตนได้ ซึ่งจะช่วยเพิ่มประสิทธิภาพการทำงานของเว็บไซต์และนำการเข้าชมมายังเว็บไซต์ ในบทความนี้ CSS9.NET ใช้ตัวอย่างการใช้งานที่สมบูรณ์เพื่อแสดงวิธีใช้ jQuery เพื่อเรียก Bing API เพื่อใช้งานเครื่องมือค้นหาเว็บแบบง่าย และมีความเข้าใจพื้นฐานเกี่ยวกับ Bing API

ก่อนอื่น เรามาสัมผัสประสบการณ์การรับรู้กันก่อน: ตัวอย่างออนไลน์

Bing API มีประเภทข้อมูลผลการค้นหาสามประเภท: SOAP, XML และ JSON ในตัวอย่าง อินเทอร์เฟซประเภทข้อมูล json ถูกเรียกผ่าน jQuery ajax เพื่อแสดงข้อมูล มาดูการใช้งานกัน:

การตระเตรียม :

Microsoft แสดงเอกสารการพัฒนาโดยละเอียดให้เราทราบผ่านทางไซต์ Bing API:

1. เยี่ยมชมไซต์นักพัฒนา Bing: http://bing.com/developers คุณยังสามารถค้นหา ทางเข้าสู่ Bing API บน MSDN ได้ที่นี่
2. เข้าสู่ระบบด้วยบัญชี Microsoft (หากคุณไม่มี คุณสามารถลงทะเบียนได้เพียงบัญชีเดียวก่อน)
3. กรอกแบบฟอร์มและรับ "APP ID" (ใช้เมื่อเรียก API Microsoft จำเป็นต้องตรวจสอบให้แน่ใจว่าคุณเป็นนักพัฒนา Microsoft)

ส่วน HTML

องค์ประกอบของหน้านั้นเรียบง่ายมาก โดยส่วนใหญ่ประกอบด้วยห้าส่วน: ทางเข้าการค้นหา พื้นที่แสดงผล คำอธิบายผลลัพธ์ การแสดงข้อความแสดงข้อผิดพลาด และการนำทางหน้า มาดูที่ HTML ด้านล่าง:

<div class="line search-content">
<div class="คอลัมน์ col-threefifths">
<h3 id="ผลลัพธ์-ส่วนหัว"></h3>
<p id="ผลลัพธ์-สรุป"></p>
<!--พื้นที่แสดงผลลัพธ์-->
<div id="ผลการค้นหา">
<h3>ผลการค้นหา</h3>
<!-- คำอธิบายผลลัพธ์ เช่น มีทั้งหมดกี่รายการ แต่รายการใดอยู่ก่อน -->
<div id="result-aggregates" class="results"></div>
<ul id="รายการผลลัพธ์" class="ผลลัพธ์">
</ul>
<!--การนำทางหน้า-->
<ul id="result-navigation" class="result-navigation">
<li id="prev">&laquo;</li>
<li id="ถัดไป">&raquo;</li>
</ul>
</div>
<!--ข้อความแสดงข้อผิดพลาด-->
<p id="รายการข้อผิดพลาด">
</p>
</div>
<!--ค้นหาทางเข้า-->
<div class="คอลัมน์ล่าสุด-col">
<h3>ป้อนคำค้นหา:</h3>
<p>
<input id="txtQuery" type="text" title="คำค้นหา" />
<button id="btnSearch" type="button" title="Search">ค้นหา</button>
</p>
</div>
</div>

การเรียกส่วน Bing API ผ่าน jQuery

กำหนดพารามิเตอร์บางตัวที่ต้องส่งผ่านไปยัง Bing API: //รหัสแอปที่ใช้ ให้แทนที่ด้วยรหัสของคุณเองที่นี่
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//รับสตริงการค้นหาโดยผู้ใช้ป้อนคำค้นหา
var Query = "แบบสอบถาม ="
//ระบุประเภทแหล่งค้นหา Bing มีทุกประเภท เช่น เว็บเพจ วิดีโอ รูปภาพ ฯลฯ อ้างอิงถึง API
//ระบุที่นี่คือประเภทหน้าเว็บ
var แหล่งที่มา = "แหล่งที่มา=เว็บ";
//ระบุเวอร์ชัน API
เวอร์ชัน var = "เวอร์ชัน = 2.0";
//ระบุภูมิภาค เช่น Google ผลการค้นหาในแต่ละภูมิภาคจะแตกต่างกัน
ตลาด var = "ตลาด=zh-cn";
//การตั้งค่าตัวเลือกบางอย่าง ให้เปิดการเน้นคำค้นหาในผลการค้นหาที่นี่
var Options = "ตัวเลือก=เปิดใช้งานการเน้นสี";
//ส่งคืนจำนวนรายการต่อหน้า
varWebCount = 10;
//หน้าปัจจุบันคือหน้าใด เริ่มจาก 0?
varWebOffset = 0;