使用jspservletajax技术开发新闻发布系统

神奇的Ajax第十二章回顾与作业点评如何理解Servlet的生命周期？请简述Tomcat中如何部署Servlet？使用Servlet如何实现转发和重定向？预习检查为什么使用Ajax？Ajax主要包括哪些技术？使用Ajax的步骤有哪些？本章任务实现即时检查Email是否可用实现无刷新的用户登录实现搜索自动提示本章目标掌握Ajax技术原理掌握Ajax应用编程Web2.02-1互联网前世今生动态网页静态网站null黑暗年代革命啦，革命啦！三五年就来一次Web2.02-2Web2.0的特点用户贡献内容内容聚合RSS更丰富的“用户体验”内容聚合每个小“窗口”可以关闭、最小化和进行个性化设置所有操作都是在不刷新窗口的情况下完成的自动补全为什么使用Ajax3-1无刷新：不刷新整个页面，只刷新局部无刷新的好处只更新部分页面，有效利用带宽只是登录，没必要刷新“庞大”的页面。无刷新的好处提供连续的用户体验观看视频时执行操作，不希望页面刷新视频从头播放吧为什么使用Ajax3-2只刷新了局部页面，视频继续播放无刷新的好处提供类似C/S的交互效果，操作更方面为什么使用Ajax3-3拖动、放大、缩小Google地图自动补全功能什么是AjaxAjax：只刷新局部页面的技术JavaScript：更新局部的网页XML：一般用于请求数据和响应数据的封装XMLHttpRequest对象：发送请求到服务器并获得返回结果CSS：美化页面样式异步：发送请求后不等返回结果，由回调函数处理结果Ajax技术的核心XMLHttpRequest3-1JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力常用方法方法名说明open(method,URL,async)

建立与服务器的连接method参数指定请求的HTTP方法,典型的值是GET或POSTURL参数指定请求的地址async参数指定是否使用异步请求，其值为true或falsesend(content)发送请求content参数指定请求的参数setRequestHeader(header,value)设置请求的头信息XMLHttpRequest3-2常用属性onreadystatechange：指定回调函数readystate:

XMLHttpRequest的状态信息

就绪状态码说明0XMLHttpRequest对象没有完成初始化1XMLHttpRequest对象开始发送请求2XMLHttpRequest对象的请求发送完成3XMLHttpRequest对象开始读取响应，还没有结束4XMLHttpRequest对象读取响应结束XMLHttpRequest3-3常用属性status：HTTP的状态码

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象状态码说明200服务器响应正常400无法找到请求的资源403没有访问权限404访问的资源不存在500服务器内部错误就绪状态是4而且状态码是200，才可以处理服务器数据实现无刷新用户名验证当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在如果已经存在则提示：“用户名已被可用”如果不存在则提示：“用户名可以可用”使用Ajax验证用户名5-1使用文本框的onBlur事件使用Ajax技术实现异步交互创建XMLHttpRequest对象通过XMLHttpRequest对象设置请求信息向服务器发送请求创建回调函数，根据响应状态动态更新页面使用Ajax验证用户名5-2验证姓名表单-checkname.jsp使用JavaScript验证用户名-checkname.jsp<formname="form1"action=""method="post">

用户名

<inputtype="text"id="uname"name="username"value="" onblur="checkUserExists()"/> <divid="mess"style="display:inline"/> </form>functioncheckUserExists(){ varf=document.form1; varusername=f.username.value; if(username==""){ alert("用户名不能为空"); returnfalse; }else{

doAjax("CheckUserServlet?username="+username); }}调用Ajax进行处理使用Ajax验证用户名5-3使用Ajax进行处理-checkname.jsp1、创建XMLHttpRequest对象varxmlhttp;functiondoAjax(url){ try{

xmlhttp=newActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{

xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{

xmhttp=newXMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }catch(e){ } } }}使用Ajax验证用户名5-4使用Ajax进行处理-checkname.jsp2、设置在服务器完成后要运行的回调函数3、设置请求信息4、发送请求functiondoAjax(url){

创建XMLHttpRequest对象 …

xmlhttp.onreadystatechange=processRequest;

xmlhttp.open("post",url,true); //如果以post方式请求，必须要添加

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send(null);}当的send()方法不配置参数时，建议最好加上nullfunctionprocessRequest(){ varmessdiv=document.getElementById(“mess”)； if(xmlhttp.readyState==4)

if(xmlhttp.status==200){ //responseText表示请求完成后，返回的字符串信息 if(xmlhttp.responseText=="false") messdiv.innerHTML="用户名可以使用"; else

messdiv.innerHTML="用户名已被使用"; }else{ alert("请求处理返回的数据有错误"); } }}演示示例：使用Ajax实现用户名验证使用Ajax验证用户名5-5练习——实现无刷新邮箱验证需求说明：实现无刷新邮箱验证。在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在完成时间：40分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解实现无刷新用户登录输入用户名和密码，单击“登录”，异步提交表单如果正确，显示欢迎信息如果错误，显示提示信息使用Ajax实现登录2-1functiondoAjax(){

createXMLHttpRequest(); varname=document.getElementById("uname").value; varpwd=document.getElementById("upwd").value; if(XMLHttp!=null){ varurl="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练习——实现无刷新用户登录需求说明：实现无刷新用户登录输入用户名和密码，单击“登录”，异步提交表单如果正确，显示欢迎信息如果错误，显示提示信息完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解实现搜索自动提示功能使用Ajax实现自动提示功能5-1搜索提示的原理每输入完一个关键字时，向服务器发送一个请求服务器根据用户输入的关键字，从数据库中搜索相关关键字信息，并返回到客户端在客户端显示提示信息注意事项当键盘的按键抬起时，触发onkeyup键盘事件将文本框的plete属性设置为off，以免影响搜索提示当搜索提示出现后，需要将其中选中的搜索项突出显示，以便区分使用Ajax实现自动提示功能5-2编写搜索页面<h3> Ajax实现搜索提示</h3><divstyle="width:500px"> <formaction=""id="formSearch"> <inputtype="text"id="txtSearch"name="txtSearch" onkeyup="searchSuggest()"plete="off"/> <inputtype="submit"id="cmdSearch" name="cmdSearch"value="搜索"/><br> <divid="suggest"style="width:200px"></div> </form></div>使用Ajax实现自动提示功能5-3服务器端代码：通过数据库进行查询，获取相关提示文本，最后将查询结果返回客户端publicclassSearchSuggestextendsHttpServlet{ publicvoiddoGet(…){ … Stringstr=request.getParameter("search"); ListstrList=newArrayList(); try{ if(str!=null&str.length()>0){ … rs=stmt.executeQuery("selectdistinct(title)from suggestwheretitlelike'"+str+"%'orderbytitle"); while(rs.next()) strList.add(rs.getString("title")); StringBuffersbu=newStringBuffer(); intsize=strList.size(); for(inti=0;i<size;i++) sbu.append((String)strList.get(i)+"-"); out.print(sbu.toString()); } }catch(Exceptione){ e.printStackTrace(); } }}获取查询结果将结果放入List转换为一个字符串，以“-”分隔个提示文本返回字符串使用Ajax实现自动提示功能5-4客户端回调函数：在客户端查询结果，实现自动提示效果functionprocessReuqest(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ varsobj=document.getElementById("suggest"); sobj.innerHTML=""; varstr=xmlhttp.responseText.split("-"); varsuggest=""; if(str.length>0&&str[0].length>0){

for(i=0;i<str.length;i++){

suggest+="<divonmouseover='javascript:suggestOver(this);'"; suggest+="onmouseout='javascript:suggestOut(this);'";