Ajax to achieve a similar function of Baidu Search bar (interview more see) _ajax related

Internship process needs to use the asynchronous submission function, so try to understand the Ajax, instantly feel the previous study is really bucket ah, indeed, do web application development, if not jquery and Ajax, it is really white learning, I realized that all the fancy features on the Internet were already available.

Words do not say, the following has AJAX to achieve a simple Baidu search bar function, when the user in the above input box type characters, will execute function "Showhint ()". 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 empties the contents of the Txthint placeholder and exits the function.

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

Creating XMLHttpRequest Objects

Execute function When server response is ready

Send a request to a file on the server

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

The requested file is written in PHP, of course, with what can be, and the General page does not have the essential difference:

<?php
//fill array with name
$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";
Obtains q parameter from the URL
$q =$_get["Q"];
If q is greater than 0, look for all hints in the array 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];
}}}} If the prompt is not found, set the output to "no suggestion"
//otherwise set to the correct value
if ($hint = = "")
{
$response = "no suggestion";
}
Else
{
$response = $hint;
}
Output response
echo $response;
? >

I heard that the interview to Baidu is such a similar topic, in fact, after the understanding is so.

The above is a small set to introduce Ajax to achieve similar functions of Baidu Search bar (see more), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!