第1章-Web前端之Ajax.pptxVIP

第二单元Web前端之Ajax本章目标无刷新技术理解Ajax的工作流程XMLHttpRequest核心对象熟练使用Ajax处理Web应用认识Ajax所有操作都是在不刷新窗口的情况下完成的自动补全每个小“窗口”可以关闭、最小化和进行个性化设置内容聚合Web 2.0的特点用户贡献内容 内容聚合RSS 更丰富的“用户体验” 为什么使用Ajax只是登录，没必要刷新“庞大”的页面拖动、放大、缩小Google地图观看视频时，不希望页面刷新视频从头播放只刷新局部页面，视频继续播放自动完成功能无刷新：不刷新整个页面，只刷新局部无刷新的好处只更新部分页面，有效利用带宽提供连续的用户体验提供类似C/S的交互效果，操作更方面传统Web与Ajax的差异差异方式说 明发送请求方式不同传统Web提交表单方式发送请求Ajax技术异步引擎对象发送请求服务器响应不同传统Web响应内容是一个完整页面Ajax技术响应内容只是需要的数据客户端处理方式不同传统Web需等待服务器响应完成并重新加载整个页面后用户才能进行操作Ajax技术可以动态更新页面中的部分内容用户不需要等待请求的响应Ajax简介Ajax：异步刷新技术Ajax工作流程Ajax技术主要开发语言XMLHttpRequest对象Ajax技术的核心封装请求或响应的数据格式修改页面元素、改变样式，实现局部刷新Ajax：异步刷新技术XMLHttpRequest 3-1 整个Ajax技术的核心提供异步发送请求的能力 常用方法方 法说 明open(String method, String url, …) 用于创建一个新的HTTP请求send(String data)发送请求到服务器端setRequestHeader( String header, String value) 设置请求的HTTP头信息XMLHttpRequest 3-2 常用属性readystate: XMLHttpRequest的状态信息 onreadystatechange：指定回调函数 就绪状态码说 明0XMLHttpRequest对象未完成初始化1XMLHttpRequest对象开始发送请求2XMLHttpRequest对象的请求发送完成3XMLHttpRequest对象开始读取响应4XMLHttpRequest对象读取响应结束XMLHttpRequest 3-3 常用属性status：HTTP的状态码 statusText ：返回当前请求的响应状态responseText：获得响应的文本内容 responseXML：获得响应的XML文档对象状态码说 明200服务器响应正常400错误请求，如语法错误403没有访问权限404访问的资源不存在500服务器内部错误就绪状态是4且状态码是200，方可处理服务器数据示例—使用Ajax验证用户名问题实现无刷新用户名验证当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在如果已经存在提示 “用户名已被使用”如果不存在则提示 “用户名可以使用”示例—使用Ajax验证用户名示例1：使用Ajax 实现用户名验证编写待验证姓名表单编写JavaScript方法验证用户名使用Ajax技术实现异步交互1. 创建XMLHttpRequest对象2. 设置在服务器完成响应后要运行的回调函数3. 设置请求信息 4. 发送请求编写服务器端处理客户端请求编写回调函数处理服务器端返回数据练习1——实现无刷新邮箱验证练习完成时间：20分钟需求说明实现无刷新验证注册邮箱在用户注册页面，当E-mail文本框失去焦点时，判断用户是否存在总结Ajax主要包括的技术:XMLHttpRequestJavaScriptDOM + CSSXML、JSON或HTML等使用Ajax需要以下步骤创建XMLHttpRequest对象设置回调函数初始化XMLHttpRequest组件发送请求使用Ajax正确处理服务器数据的条件XMLHttpRequest的readystate属性值为4，且status属性值为200，即 “数据读取结束且服务器响应正常 ”END教学指导： 该页是之前整个实现过程的步骤总结。请带领学员进行思路整理。