AJax implements functions similar to Baidu search bar

The following is the function of ajax to implement a simple Baidu search bar. When the user types characters in the input box above, the function "showHint()" will be executed. The following is a very detailed introduction to you through the ajax example code. Friends who are interested in ajax should take a look.

During the internship process, the asynchronous submission function needs to be used, so I tried to understand ajax and instantly felt like I had done it before Learning is really a drop in the bucket. It is true. If you don’t know jquery and ajax when doing web application development, it is really useless. After understanding it, I feel that all the fancy functions on the Internet can be realized.

Without further ado, here is the ajax function to implement a simple Baidu search bar. When the user types characters in the input box above, the function "showHint()" will be executed. This function is triggered by the "onkeyup" event:

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();
}

Source code explanation:

If the input box is empty (str.length==0), the function clears the content of the txtHint placeholder and exits the function.

If the input box is not empty, the showHint() function performs the following tasks:

Creates an XMLHttpRequest object

Execute the function when the server response is ready

Request a file sent to the server

Please note that we added a parameter q (with the content of the input box) to the URL

The requested file is written in php, of course what to use All are OK, and there is no essential difference from ordinary pages:

<?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;
?>

I heard that similar questions were asked when I went to Baidu for an interview. In fact, after understanding it, it is nothing more than that.

The above is the AJax implementation introduced by the editor to implement functions similar to the Baidu search bar (commonly seen in interviews). I hope it will be helpful to everyone! !

Related recommendations:

Analysis of reasons why ajax obtains json data as undefined_AJAX related

jquery implementation of ajaxfileupload asynchronous upload plug-in tutorial

Detailed explanation of ajax and same-origin policy implemented by JS

The above is the detailed content of AJax implements functions similar to Baidu search bar. For more information, please follow other related articles on the PHP Chinese website!