搜索
1本节目标•掌握Ajax技术原理•掌握Ajax应用编程2Web2.02-1•互联网前世今生动态网页静态网站null黑暗年代革命啦，革命啦！三五年就来一次3Web2.02-2•Web2.0的特点–用户贡献内容–内容聚合RSS–更丰富的“用户体验”内容聚合每个小“窗口”可以关闭、最小化和进行个性化设置所有操作都是在不刷新窗口的情况下完成的自动补全4为什么使用Ajax3-1•无刷新：不刷新整个页面，只刷新局部•无刷新的好处–只更新部分页面，有效利用带宽只是登录，没必要刷新“庞大”的页面。5•无刷新的好处–提供连续的用户体验观看视频时执行操作，不希望页面刷新视频从头播放吧为什么使用Ajax3-2只刷新了局部页面，视频继续播放6•无刷新的好处–提供类似C/S的交互效果，操作更方面为什么使用Ajax3-3拖动、放大、缩小Google地图自动补全功能7什么是Ajax•Ajax：只刷新局部页面的技术–JavaScript：更新局部的网页–XML：一般用于请求数据和响应数据的封装–XMLHttpRequest对象：发送请求到服务器并获得返回结果–CSS：美化页面样式–异步：发送请求后不等返回结果，由回调函数处理结果Ajax技术的核心8XMLHttpRequest3-1•JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力•常用方法9XMLHttpRequest3-2•常用属性–onreadystatechange：指定回调函数–readystate:XMLHttpRequest的状态信息10XMLHttpRequest3-3•常用属性–status：HTTP的状态码–responseText：获得响应的文本内容–responseXML：获得响应的XML文档对象就绪状态是4而且状态码是200，才可以处理服务器数据11•实现无刷新用户名验证–当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在–如果已经存在则提示：“当前用户名已被注册！”–如果不存在则提示：“可以注册，赶快注册吧！”使用Ajax验证用户名3-112•使用文本框的onBlur事件•使用Ajax技术实现异步交互–创建XMLHttpRequest对象–通过XMLHttpRequest对象设置请求信息–向服务器发送请求–创建回调函数，根据响应状态动态更新页面使用Ajax验证用户名3-213•使用Ajax进行处理–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验证用户名3-314•实现无刷新用户登录–输入用户名和密码，单击“登录”，异步提交表单–如果正确，显示欢迎信息–如果错误，显示提示信息使用Ajax实现登录2-115functiondoAjax(){createXMLHttpRequest();varname=document.getElementById(uname).value;varpwd=document.getElementById(upwd).value;if(XMLHttp!=null){varurl=Login.ashx?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-216•实现搜索自动提示功能使用Ajax实现自动提示功能5-117•搜索提示的原理–每输入完一个关键字时，向服务器发送一个请求–服务器根据用户输入的关键字，从数据库中搜索相关关键字信息，并返回到客户端–在客户端显示提示信息•注意事项–当键盘的按键抬起时，触发onkeyup键盘事件–将文本框的autocomplete属性设置为off，以免影响搜索提示–当搜索提示出现后，需要将其中选中的搜索项突出显示，以便区分使用Ajax实现自动提示功能5-218•编写搜索页面h3Ajax实现搜索提示/h3divstyle=width:500pxformaction=id=formSearchinputtype=textid=txtSearchname=txtSearchonkeyup=searchSuggest()autocomplete=off/inputtype=submitid=cmdSearchname=cmdSearchvalue=搜索/brdivid=suggeststyle=width:200px/div/form/div使用Ajax实现自动提示功能5-319•服务器端代码：通过数据库进行查询，获取相关提示文本，最后将查询结果返回客户端使用Ajax实现自动提示功能5-420•客户端回调函数：在客户端查询结果，实现自动提示效果functionprocessReuqest(){if(xmlhttp.readyState==4){if(xmlhttp.status==200){varsobj=document.getElementById(suggest);sobj.innerHTML=;varstr=xmlhttp.responseText.split(-);varsuggest=;if(str.length0&&str[0].length0){for(i=0;istr.length;i++){suggest+=divonmouseover='javascript:suggestOver(this);';suggest+=onmouseout='javascript:suggestOut(this);';suggest+=onclick='javascript:setSearch(this.innerHTML);';suggest+=class='suggest_link'+str[i]+/div;}sobj.innerHTML=suggest;document.getElementById(suggest).style.display=block;}else{document.getElementById(suggest).style.display=none;}}}}使用Ajax实现自动提示功能5-5将服务器端传来的字符串以“-”分隔为字符串数组如何存在提示文本，就进行显示演示示例：使用Ajax实现自动提示21总结•Ajax主要包括哪些技术？•使用Ajax的步骤有哪些？•使用Ajax正确处理服务器数据必须满足的条件是什么？•使用Ajax实现自动提示功能的原理是什么？更多精品资请访问更多品资源请访问