下面是ajax实现一个简单的百度搜索栏的功能,当用户在上面的输入框中键入字符时,会执行函数 “showHint()” 。下文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
实习过程中需要用到异步提交功能,于是试着去了解了一下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() 函数执行以来源[email protected]搞@^&代*@码网下任务:
创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q (带有输入框的内容)
请求的文件是用php来写的,当然用什么都可以,和一般的页面没有本质的区别:
0) { $hint=""; for($i=0; $i
听说去百度面试的时候就是这样类似的题目,其实了解之后也不过如此嘛。
以上就是AJax实现类似百度搜索栏的功能 (面试多见)的详细内容,更多请关注gaodaima搞代码网其它相关文章!