TP12神奇的Ajax要点详解.pptVIP

function doAjax(){ createXMLHttpRequest(); var name = document.getElementById(uname).value; var pwd = document.getElementById(upwd).value; if(XMLHttp!=null){ var url =LoginServlet?uname=+name+upwd=+pwd； XMLHttp.open(POST,url,true); XMLHttp.setRequestHeader(Content-Type, application/x-www-form-urlencoded;); XMLHttp.onreadystatechange=processRequest; XMLHttp.send(null); }else{ alert(不能创建XMLHttpRequest对象实例) } } 调用创建对象的方法 演示示例：使用Ajax实现用户登录 使用Ajax实现登录2-2 实现搜索自动提示功能 使用Ajax实现自动提示功能5-1 搜索提示的原理 每输入完一个关键字时，向服务器发送一个请求 服务器根据用户输入的关键字，从数据库中搜索相关关键字信息，并返回到客户端 在客户端显示提示信息 注意事项 当键盘的按键抬起时，触发onkeyup键盘事件 将文本框的autocomplete属性设置为off，以免影响搜索提示 当搜索提示出现后，需要将其中选中的搜索项突出显示，以便区分 使用Ajax实现自动提示功能5-2 编写搜索页面 使用Ajax实现自动提示功能5-3 h3 Ajax实现搜索提示 /h3 div style=width: 500px form action= id=formSearch input type=text id=txtSearch name=txtSearch onkeyup=searchSuggest() autocomplete=off / input type=submit id=cmdSearch name=cmdSearch value=搜索 / br div id=suggest style=width: 200px/div /form /div 服务器端代码：通过数据库进行查询，获取相关提示文本，最后将查询结果返回客户端 使用Ajax实现自动提示功能5-4 public class SearchSuggest extends HttpServlet { public void doGet( …) { … String str = request.getParameter(search); List strList=new ArrayList(); try{ if(str!=nullstr.length()0){ … rs=stmt.executeQuery(select distinct(title) from suggest where title like +str+% order by title); while(rs.next()) strList.add(rs.getString(title)); StringBuffer sbu=new StringBuffer(); int size = strList.size(); for(int i=0;isize;i++) sbu.append((String)strList.get(i)+-); out.print(sbu.toString()); } }catch(Exception e){ e.printStackTrace(); } } } 获取查询结果 将结果放入List 转换为一个字符串，以“-”分隔个提示文本 返回字符串 客户端回调函数：在客户端查询结果，实现自动提示效果 使用Ajax实现自动提示功能5-5 function processReuqest(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ var sobj=document.getElementById(suggest); sobj.innerHTML=; var str= xmlhttp.responseText.split(-); var suggest=; if(str.length0str[