AJax implementiert ähnliche Funktionen wie die Baidu-Suchleiste

Das Folgende ist eine Ajax-Implementierung einer einfachen Baidu-Suchleistenfunktion. Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion „showHint()“ ausgeführt. Das Folgende ist eine sehr detaillierte Einführung für Sie durch den Ajax-Beispielcode. Freunde, die sich für Ajax interessieren, sollten einen Blick darauf werfen

Während des Praktikums musste ich die asynchrone Übermittlungsfunktion verwenden, also habe ich versucht, es zu verstehen Ajax und ich hatte sofort das Gefühl, dass das Lernen ein Tropfen auf den heißen Stein ist. Wenn man sich bei der Entwicklung von Webanwendungen nicht auskennt, ist es meiner Meinung nach wirklich nutzlos dass alle ausgefallenen Funktionen des Internets realisiert werden können.

Hier ist ohne weiteres Ajax zum Implementieren einer einfachen Baidu-Suchleistenfunktion. Wenn der Benutzer Zeichen in das Eingabefeld oben eingibt, wird die Funktion „showHint()“ ausgeführt. Diese Funktion wird durch das Ereignis „onkeyup“ ausgelöst:

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementByIdx_x("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

Erläuterung des Quellcodes:

Wenn das Eingabefeld leer ist (str.length==0), löscht diese Funktion den Inhalt des txtHint-Platzhalters und beendet die Funktion.

Wenn das Eingabefeld nicht leer ist, führt die Funktion showHint() die folgenden Aufgaben aus:

Erstellt ein XMLHttpRequest-Objekt

Führt die Funktion aus, wenn die Serverantwort bereit ist

Anfordern einer an den Server gesendeten Datei

Bitte beachten Sie, dass wir der URL einen Parameter q (mit dem Inhalt des Eingabefelds) hinzugefügt haben

Die angeforderte Datei wird geschrieben php, natürlich, was alles in Ordnung ist, es gibt keinen wesentlichen Unterschied zu normalen Seiten:

<?php
// 用名字来填充数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//获得来自 URL 的 q 参数
$q=$_GET["q"];
//如果 q 大于 0，则查找数组中的所有提示
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出响应
echo $response;
?>

Ich habe gehört, dass es so ist Ähnlich wie damals, als ich zu einem Interview nach Baidu ging. Der Titel ist eigentlich nichts weiter, wenn man ihn einmal verstanden hat.

Das Obige ist die vom Herausgeber eingeführte AJax-Implementierung, um Funktionen zu implementieren, die der Baidu-Suchleiste ähneln (meist in Interviews zu sehen). Ich hoffe, dass sie für alle hilfreich ist! !

Verwandte Empfehlungen:

Analyse der Gründe, warum Ajax JSON-Daten als undefinierte_AJAX-bezogen erhält

jquery-Implementierung des Ajaxfileupload-Tutorials zum asynchronen Upload-Plugin

Detaillierte Erläuterung der von JS implementierten Ajax- und Same-Origin-Strategie

Das obige ist der detaillierte Inhalt vonAJax implementiert ähnliche Funktionen wie die Baidu-Suchleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!