9-Ajax

JSPAjax无刷新技术本章目标掌握Ajax技术原理掌握Ajax应用编程Web2.02-1互联网前世今生动态网页静态网站null黑暗年代革命啦，革命啦！三五年就来一次Web2.02-2Web2.0的特点–用户贡献内容–内容聚合RSS–更丰富的“用户体验”内容聚合每个小“窗口”可以关闭、最小化和进行个性化设置所有操作都是在不刷新窗口的情况下完成的自动补全为什么使用Ajax3-1无刷新：不刷新整个页面，只刷新局部无刷新的好处–只更新部分页面，有效利用带宽只是登录，没必要刷新“庞大”的页面。无刷新的好处–提供连续的用户体验观看视频时执行操作，不希望页面刷新视频从头播放吧为什么使用Ajax3-2只刷新了局部页面，视频继续播放无刷新的好处–提供类似C/S的交互效果，操作更方面为什么使用Ajax3-3拖动、放大、缩小Google地图自动补全功能什么是Ajax•Ajax：只刷新局部页面的技术–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.jspformname=form1action=method=post用户名inputtype=textid=unamename=usernamevalue=onblur=checkUserExists()/divid=messstyle=display:inline//formfunctioncheckUserExists(){varf=document.form1;varusername=f.username.value;if(username==){alert(用户名不能为空);returnfalse;}else{doAjax(CheckUserServlet?username=+username);}}调用Ajax进行处理使用Ajax验证用户名5-3使用Ajax进行处理-checkname.jsp–1、创建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.jsp–2、设置在服务器完成后要运行的回调函数–3、设置请求信息–4、发送请求functiondoAjax(url){创建XMLHttpRequest对象…xmlhttp.onreadystatechange=processRequest;xmlhttp.open(post,url,true);//如果以post方式请求，必须要添加xmlhttp.setRequestHeader(Content-type,application/x-);xmlhttp.send(null);}当的send()方法不配置参数时，建议最好加上nullfunctionprocessRequest(){varmessdiv=document.getElementById(“mess”)；if(xmlhttp.readyState==4)if(xmlhttp.status==200){//responseText表示请求完成后，返回的字符串信息if(xmlhttp.responseText==false)messdiv.innerHTML=用户名可以使用;elsemessdiv.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-);XMLHttp.onreadystatechange=processRequest;XMLHttp.send(null);}else{alert(不能创建XMLHttpRequest对象实例)}}调用创建对象的方法演示示例：使用Ajax实现用户登录使用Ajax实现登录2-2练习——实现无刷新用户登录需求说明：–实现无刷新用户登录•输入用户名和密码，单击“登录”，异步提交表单•如果正确，显示欢迎信息•如果错误，显示提示信息完成时间：25分钟总结Ajax主要包括哪些技术？使用Ajax的步骤有哪些？使用Ajax正确处理服务器数据必须满足的条件是什么？使用Ajax实现自动提示功能的原理是什么？