AJax achieves functions similar to Baidu search bar (more common for interviews), ajax Baidu search

AJax achieves functions similar to Baidu search bar (more common for interviews), ajax Baidu search

Asynchronous submission is required during the internship, so I tried to get to know about ajax and instantly felt that I had learned a lot before. Actually, I would do web application development without jquery or ajax, that's really just white learning. After learning about it, I feel that all the fancy functions on the Internet can be achieved.

To put it bluntly, ajax implements a simple Baidu search bar function. When you type a character in the input box above, the function "showHint ()" is 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 blank (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 executes the following tasks:

Create an XMLHttpRequest object

Execute the function when the server responds.

Send requests to files on the server

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

The requested file is written in php. Of course, everything can be used. There is no essential difference with a general page:

<? Php // fill the array with the 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 [] = "Wench E "; $ a [] =" Vicky "; // obtain the q Parameter from the URL $ q =$ _ GET [" q "]; // If q is greater than 0, query all the prompts in the array, such as if (strlen ($ q)> 0) {$ hint = ""; for ($ I = 0; $ I <count ($ ); $ I ++) {if (strtolower ($ q) = strtolower (substr ($ a [$ I], 0, strlen ($ q )))) {if ($ hint = "") {$ hint = $ a [$ I];} else {$ hint = $ hint. ",". $ a [$ I] ;}}// if no prompt is found, set the output to "no suggestion" // otherwise, set it to the correct value if ($ hint = "") {$ response = "no suggestion ";} else {$ response = $ hint;} // Output response echo $ response;?>

I heard that this was a similar question when I went to Baidu for an interview, but I did not know that.

The above section describes how to implement AJax functions similar to Baidu's search bar (more common for interviews). I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!