Samouczek: tworzenie klienta sprawdzania pisowni w postaci strony internetowej
Ostrzeżenie
30 października 2020 r. interfejsy API Wyszukiwanie Bing zostały przeniesione z usług Azure AI do usług Wyszukiwanie Bing Services. Ta dokumentacja jest udostępniana tylko do celów referencyjnych. Aby uzyskać zaktualizowaną dokumentację, zobacz dokumentację interfejsu API wyszukiwania Bing. Aby uzyskać instrukcje dotyczące tworzenia nowych zasobów platformy Azure na potrzeby wyszukiwania Bing, zobacz Tworzenie zasobu Wyszukiwanie Bing za pośrednictwem Azure Marketplace.
Podczas pracy z tym samouczkiem utworzysz stronę internetową umożliwiającą użytkownikom wysyłanie zapytań do interfejsu API sprawdzania pisowni Bing. Kod źródłowy tej aplikacji jest dostępny w usłudze GitHub.
Ten samouczek przedstawia sposób wykonania następujących czynności:
- Wysyłanie prostego zapytania do interfejsu API sprawdzania pisowni Bing
- Wyświetlanie wyników zapytania
Wymagania wstępne
Aby skorzystać z samouczka, potrzebny jest klucz subskrypcji interfejsu API sprawdzania pisowni Bing. Jeśli go nie masz, musisz:
- Subskrypcja platformy Azure — utwórz bezpłatnie
- Zasób sprawdzania pisowni Bing
Tworzenie nowej strony internetowej
Otwórz edytor tekstów. Utwórz nowy plik, na przykład spellcheck.html.
Dodawanie nagłówka HTML
Dodaj dane nagłówka HTML i rozpocznij sekcję script w następujący sposób.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bing Spell Check</title>
<style type="text/css">
html, body, div, p, h1, h2 {font-family: Verdana, "Lucida Sans", sans-serif;}
html, body, div, p {font-weight: normal;}
h1, h2 {font-weight: bold;}
sup {font-weight: normal;}
html, body, div, p {font-size: 12px;}
h1 {font-size: 20px;}
h2 {font-size: 16px;}
h1, h2 {clear: left;}
img#logo {float: right;
</style>
<script type="text/javascript">
Funkcja getSubscriptionKey
Funkcja getSubscriptionKey zwraca klucz interfejsu API sprawdzania pisowni Bing. Pobiera go z magazynu lokalnego (z pliku cookie) lub, w razie potrzeby, monituje użytkownika o wprowadzenie go.
Rozpocznij funkcję getSubscriptionKey i zadeklaruj nazwę pliku cookie w następujący sposób.
getSubscriptionKey = function() {
var COOKIE = "bing-spell-check-api-key"; // name used to store API key in key/value storage
Funkcja pomocnicza findCookie zwraca wartość określonego pliku cookie, a jeśli plik cookie nie zostanie znaleziony, zwraca pusty ciąg.
function findCookie(name) {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var keyvalue = cookies[i].split("=");
if (keyvalue[0].trim() === name) {
return keyvalue[1];
}
}
return "";
}
Funkcja pomocnicza getSubscriptionKeyCookie monituje użytkownika o podanie wartości klucza interfejsu API sprawdzania pisowni Bing i zwraca wartość klucza.
function getSubscriptionKeyCookie() {
var key = findCookie(COOKIE);
while (key.length !== 32) {
key = prompt("Enter Bing Spell Check API subscription key:", "").trim();
var expiry = new Date();
expiry.setFullYear(expiry.getFullYear() + 2);
document.cookie = COOKIE + "=" + key.trim() + "; expires=" + expiry.toUTCString();
}
return key;
}
Funkcja pomocnicza getSubscriptionKeyLocalStorage najpierw podejmuje próbę uzyskania klucza interfejsu API sprawdzania pisowni Bing przez wyszukanie odpowiedniego pliku cookie. Jeśli plik cookie nie zostanie znaleziony, monituje użytkownika o podanie wartości klucza. Następnie zwraca wartość klucza.
function getSubscriptionKeyLocalStorage() {
var key = localStorage.getItem(COOKIE) || "";
while (key.length !== 32)
key = prompt("Enter Bing Spell Check API subscription key:", "").trim();
localStorage.setItem(COOKIE, key)
return key;
}
Funkcja pomocnicza getSubscriptionKey przyjmuje jeden parametr, invalidate. Jeśli parametr invalidate ma wartość true, funkcja getSubscriptionKey usuwa plik cookie zawierający klucz interfejsu API sprawdzania pisowni Bing. Jeśli parametr invalidate ma wartość false, funkcja getSubscriptionKey zwraca wartość klucza interfejsu API sprawdzania pisowni Bing.
function getSubscriptionKey(invalidate) {
if (invalidate) {
try {
localStorage.removeItem(COOKIE);
} catch (e) {
document.cookie = COOKIE + "=";
}
} else {
try {
return getSubscriptionKeyLocalStorage();
} catch (e) {
return getSubscriptionKeyCookie();
}
}
}
Należy zwrócić funkcję pomocniczą getSubscriptionKey jako wynik zewnętrznej funkcji getSubscriptionKey. Następnie zamknij definicję zewnętrznej funkcji getSubscriptionKey.
return getSubscriptionKey;
}();
Funkcje pomocnicze
Funkcja pomocnicza pre zwraca określony tekst, wstępnie sformatowany za pomocą tagu HTML pre.
function pre(text) {
return "<pre>" + text.replace(/&/g, "&").replace(/</g, "<") + "</pre>"
}
Funkcja renderSearchResults wyświetla określone wyniki z interfejsu API sprawdzania pisowni Bing, używając formatowania kodu JSON.
function renderSearchResults(results) {
document.getElementById("results").innerHTML = pre(JSON.stringify(results, null, 2));
}
Funkcja renderErrorMessage wyświetla określony komunikat o błędzie i kod błędu.
function renderErrorMessage(message, code) {
if (code)
document.getElementById("results").innerHTML = "<pre>Status " + code + ": " + message + "</pre>";
else
document.getElementById("results").innerHTML = "<pre>" + message + "</pre>";
}
Funkcja bingSpellCheck
Funkcja bingSpellCheck jest wywoływana za każdym razem, gdy użytkownik wprowadzi tekst w polu formularza HTML. Przyjmuje dwa parametry: zawartość pola formularza HTML oraz klucz interfejsu API sprawdzania pisowni Bing.
function bingSpellCheck(query, key) {
Określ punkt końcowy interfejsu API sprawdzania pisowni Bing i zadeklaruj obiekt XMLHttpRequest, który będzie używany do wysyłania żądań do punktu końcowego.
var endpoint = "https://api.cognitive.microsoft.com/bing/v7.0/spellcheck/";
var request = new XMLHttpRequest();
try {
request.open("GET", endpoint + "?mode=proof&mkt=en-US&text=" + encodeURIComponent(query));
}
catch (e) {
renderErrorMessage("Bad request");
return false;
}
Ustaw nagłówek Ocp-Apim-Subscription-Key na wartość klucza interfejsu API sprawdzania pisowni Bing.
request.setRequestHeader("Ocp-Apim-Subscription-Key", key);
Dodaj obsługę odpowiedzi z punktu końcowego. Jeśli stan to 200 (OK), wyświetl wyniki — w przeciwnym razie wyświetl informacje o błędzie.
request.addEventListener("load", function() {
if (this.status === 200) {
renderSearchResults(JSON.parse(this.responseText));
}
else {
if (this.status === 401) getSubscriptionKey(true);
renderErrorMessage(this.statusText, this.status);
}
});
Dodaj też obsługę potencjalnych zdarzeń błędów z obiektu XMLHttpRequest.
request.addEventListener("error", function() {
renderErrorMessage("Network error");
});
request.addEventListener("abort", function() {
renderErrorMessage("Request aborted");
});
Wyślij żądanie. Zamknij funkcję bingSpellCheck, tag script oraz tag head.
request.send();
return false;
}
// --></script>
</head>
Treść HTML
Podczas ładowania strony internetowej należy upewnić się, że jest dostępny kod interfejsu API sprawdzania pisowni Bing, a w razie potrzeby monitować użytkownika o podanie go.
<body onload="document.forms.bing.query.focus(); getSubscriptionKey();">
Wyświetl logo Bing.
<img id="logo" align=base src="data:image/png;base64,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">
Utwórz formularz HTML z polem tekstowym.
onsubmit Obsłuż zdarzenie i wywołaj funkcję bingSpellCheck, przekazując zawartość pola tekstowego i klucz interfejsu API sprawdzania pisowni Bing.
<form name="bing" onsubmit="return bingSpellCheck(this.query.value, getSubscriptionKey())">
<h2>Spell Check</h2>
<input type="text" name="query" size="80" placeholder="Spell Check" autocomplete=off>
</form>
Dodaj tag HTML div, używany do wyświetlania wyników. Wcześniej zdefiniowany kod JavaScript odwołuje się do tego tagu div.
<h2>Results</h2>
<div id="results">
<p>None yet.</p>
</div>
</body>
</html>
Zapisz plik.
Wyświetlanie wyników
Otwórz utworzoną stronę internetową w przeglądarce. Gdy zostanie wyświetlony monit, wprowadź klucz subskrypcji interfejsu API sprawdzania pisowni Bing. Wprowadź zapytanie (na przykład „Hollo, wlrd!”) w polu tekstowym Spell Check (Sprawdzanie pisowni) i naciśnij Enter. Na stronie internetowej zostaną wyświetlone wyniki zapytania.
{
"_type": "SpellCheck",
"flaggedTokens": [
{
"offset": 0,
"token": "Hollo",
"type": "UnknownToken",
"suggestions": [
{
"suggestion": "Hello",
"score": 0.856629936217145
},
{
"suggestion": "Hollow",
"score": 0.816717853225633
}
]
},
{
"offset": 7,
"token": "wlrd",
"type": "UnknownToken",
"suggestions": [
{
"suggestion": "world",
"score": 0.856629936217145
}
]
}
]
}