AJax는 Baidu 검색창과 유사한 기능을 구현합니다.

다음은 간단한 Baidu 검색창 기능을 ajax로 구현한 것입니다. 사용자가 위 입력 상자에 문자를 입력하면 "showHint()" 함수가 실행됩니다. 다음은 ajax 예제 코드를 통해 아주 자세하게 소개한 내용입니다. ajax에 관심 있는 친구들은 꼭 함께 살펴보세요

인턴십 중에 비동기 제출 기능을 사용해야 해서 ajax를 이해하려고 노력했는데, 즉각적으로 예전에 배웠던 내용이 정말 물거품이라는 느낌이 들었습니다. 아, 그렇군요. 웹 애플리케이션 개발에서 jquery와 ajax를 모르면 정말 쓸모가 없다는 생각이 들었습니다. 인터넷을 실현할 수 있습니다.

더 이상 고민하지 않고, 사용자가 위 입력 상자에 문자를 입력하면 "showHint()" 함수가 실행되는 간단한 Baidu 검색 표시줄 기능을 구현했습니다. 이 함수는 "onkeyup" 이벤트에 의해 실행됩니다:

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

소스 코드 설명:

입력 상자가 비어 있으면(str.length==0) 이 함수는 다음의 내용을 지웁니다. txtHint 자리 표시자를 삭제하고 함수를 종료합니다.

입력 상자가 비어 있지 않으면 showHint() 함수는 다음 작업을 수행합니다.

XMLHttpRequest 객체 생성

서버 응답이 준비되면 함수 실행

서버의 파일로 요청 보내기

URL A 매개변수 q에 추가했습니다(입력 상자의 내용 포함)

요청된 파일은 PHP로 작성되었습니다. 물론 일반 페이지와 본질적으로 다르지 않습니다.

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

바이두 인터뷰에서도 비슷한 질문을 받았다고 들었습니다. 사실 이해하고 보니 그 이상은 아니었습니다.

위 내용은 바이두 검색창과 유사한 기능을 구현하기 위해 편집자가 소개한 AJax 구현입니다(주로 인터뷰에서 볼 수 있음). 모두에게 도움이 되길 바랍니다! !

관련 권장사항:

Ajax는 정의되지 않은 이유 분석으로 json 데이터를 얻습니다._AJAX 관련

ajaxfileupload 비동기 업로드 플러그인 튜토리얼의 jquery 구현

JS에서 구현한 ajax 및 동일 출처 전략에 대한 자세한 설명

위 내용은 AJax는 Baidu 검색창과 유사한 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!