• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJax实现类似百度搜索栏的功能 (面试多见)

    实习过程中需要用到异步提交功能,于是试着去了解了一下ajax,瞬间感觉以前学习的真是九牛一毛啊,确实如此,做web应用开发,如果不会jquery和ajax,那真的就是白学了,了解之后我才感觉网上的那些花哨的功能已经都可以实现了。

    话不多说,下面有ajax实现一个简单的百度搜索栏的功能,当用户在上面的输入框中键入字符时,会执行函数 "showHint()" 。该函数由 "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 添加了一个参数 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; $icount($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实现类似百度搜索栏的功能 (面试多见),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:
    • 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
    • php+ajax做仿百度搜索下拉自动提示框(有实例)
    上一篇:Ajax 通过城市名获取数据(全国天气预报API)
    下一篇:Ajax与用户交互的JSON数据存储格式
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJax实现类似百度搜索栏的功能 (面试多见) AJax,实现,类似,百度,搜索,