AJax如何实现类似百度搜索栏的功能

  介绍

小编给大家分享一下AJax如何实现类似百度搜索栏的功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

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

话不多说,下面有AJax实现一个简单的百度搜索栏的功能,当用户在上面的输入框中键入字符时,会执行函数“showHint ()“;,该函数由“onkeyup"事件触发:

function  showHint (str)   {   var  xmlhttp;   if  (str.length==0)   {   document.getElementByIdx_x (“txtHint") .innerHTML=啊?   返回;   }   if  (window.XMLHttpRequest)   {   xmlhttp=new  XMLHttpRequest ();   }   其他的   {   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添加了一个参数问(带有输入框的内容)

请求的文件是用php来写的,当然用什么都可以,和一般的页面没有本质的区别:

& lt; php ?//,用名字来填充数组   美元[]=癆nna";   美元[]=癇rittany";   美元[]=癈inderella";   美元[]=癉iana";   美元[]=癊va";   美元[]=癋iona";   美元[]=癎unda";   美元[]=癏ege";   美元[]=癐nga";   美元[]=癑ohanna";   美元[]=癒itty";   美元[]=癓inda";   美元[]=癗ina";   美元[]=癘phelia";   美元[]=癙etunia";   美元[]=癆manda";   美元[]=癛aquel";   美元[]=癈indy";   美元[]=癉oris";   美元[]=癊ve";   美元[]=癊vita";   美元[]=癝unniva";   美元[]=癟ove";   美元[]=癠nni";   美元[]=癡iolet";   美元[]=癓iza";   美元[]=癊lizabeth";   美元[]=癊llen";   美元[]=癢enche";   美元[]=癡icky";//获得来自,URL 的,q 参数   美元q=$ _GET [“q"];//如果,q 大于,0,则查找数组中的所有提示   if  (strlen (q)美元,祝辞,0)   {   暗示美元=?“;   (我=0;美元,美元i

听说去百度面试的时候就是这样类似的题目,其实了解之后也不过如此嘛。

以上所述是小编给大家介绍的AJax实现类似百度搜索栏的功能(面试多见),希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

什么是AJax

AJax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。

以上是“AJax如何实现类似百度搜索栏的功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

AJax如何实现类似百度搜索栏的功能