《使用struts 2框架开发租房网站》tp08课件

Ajax与jQuery 第八章 回顾与作业点评 jQuery的选择器有哪几种类型 请说出jQuery的文本操作有哪些 请说出jQuery的动画效果有哪些 提问 2 51 预习检查 Ajax主要包括哪些技术 使用传统方式Ajax的步骤有哪些 jQuery提供了哪些Ajax方法 提问 3 51 本章任务 使用jQuery实现用户名的异步验证使用jQuery实现注册邮箱的异步验证使用JSON传递数据 4 51 本章目标 理解Ajax技术掌握JSON的使用掌握jQuery的常用Ajax方法 5 51 认识Ajax Web2 0的特点用户贡献内容内容聚合RSS更丰富的 用户体验 自动补全 内容聚合 每个小 窗口 可以关闭 最小化和进行个性化设置 所有操作都是在不刷新窗口的情况下完成的 6 51 为什么使用Ajax 无刷新 不刷新整个页面 只刷新局部无刷新的好处只更新部分页面 有效利用带宽提供连续的用户体验提供类似C S的交互效果 操作更方面 只是登录 没必要刷新 庞大 的页面 7 51 7 51 7 51 观看视频时 不希望页面刷新视频从头播放 只刷新局部页面 视频继续播放 自动完成功能 拖动 放大 缩小Google地图 传统Web与Ajax的差异 8 52 Ajax简介 Ajax 异步刷新技术 9 52 Ajax工作流程 Ajax 异步刷新技术 10 52 Ajax技术的核心 Ajax技术主要开发语言 封装请求或响应的数据格式 修改页面元素 改变样式 实现局部刷新 XMLHttpRequest对象 XMLHttpRequest3 1 整个Ajax技术的核心提供异步发送请求的能力常用方法 11 51 常用属性readystate XMLHttpRequest的状态信息onreadystatechange 指定回调函数 XMLHttpRequest3 2 12 51 XMLHttpRequest3 3 常用属性status HTTP的状态码statusText 返回当前请求的响应状态responseText 获得响应的文本内容responseXML 获得响应的XML文档对象 就绪状态是4且状态码是200 方可处理服务器数据 13 51 使用Ajax验证用户名3 1 实现无刷新用户名验证当用户名文本框失去焦点时 发送请求到服务器 判断用户名是否存在如果已经存在提示 用户名已被使用 如果不存在则提示 用户名可以使用 问题 14 51 使用Ajax验证用户名3 2 使用文本框的onBlur事件使用Ajax技术实现异步交互创建XMLHttpRequest对象通过XMLHttpRequest对象设置请求信息向服务器发送请求创建回调函数 根据响应状态动态更新页面 分析 15 51 使用Ajax验证用户名3 3 编写待验证姓名表单编写JavaScript方法验证用户名使用Ajax进行处理1 创建XMLHttpRequest对象2 设置在服务器完成响应后要运行的回调函数3 设置请求信息4 发送请求编写服务器端处理客户端请求编写回调函数处理服务器端返回数据 16 51 学员操作 实现无刷新邮箱验证 需求说明实现无刷新验证注册邮箱在用户注册页面 当E mail文本框失去焦点时 判断用户是否存在 练习 17 51 共性问题集中讲解 常见问题及解决办法代码规范问题调试技巧 共性问题集中讲解 18 51 使用jQuery实现Ajax 传统方式实现Ajax的不足方法 属性 常用值较多不好记忆步骤繁琐浏览器兼容问题 jQuery常用Ajax方法 ajax get post getJSON load 问题 为jQuery脚本库的变量名 即 jQuery 19 51 ajax 简介2 1 语法 常用属性参数 ajax settings 20 51 常用函数参数 ajax 简介2 2 21 51 使用 ajax 验证用户名2 1 实现无刷新用户名验证当用户名文本框失去焦点时 发送请求到服务器 判断用户名是否存在如果已经存在则提示 用户名已被使用 如果不存在则提示 用户名可以使用 问题 22 51 使用 ajax 验证用户名2 2 使用 ajax 实现异步交互 示例 ajax url url 要提交的URL路径type get 发送请求的方式data data 要发送到服务器的数据dataType text 指定传输的数据格式success function result 请求成功后要执行的代码 error function 请求失败后要执行的代码 23 51 学员操作 ajax 实现邮箱验证 需求说明使用 ajax 实现无刷新邮箱验证在用户注册页面当E mail文本框失去焦点时 判断用户是否存在 练习 24 51 共性问题集中讲解 常见问题及解决办法代码规范问题调试技巧 共性问题集中讲解 25 51 常用参数 get 简介 语法 get url data success resp status xhr dataType 26 51 get 用法 使用 get 实现异步交互以上代码等价于 示例 ajax url url data data type get success function result 省略代码 get url data function result 省略将服务器返回的数据显示到页面的代码 27 51 常用参数 post 简介 语法 post url data success resp status xhr dataType 28 51 post 用法 使用 post 实现异步交互以上代码等价于 示例 post url data function result 省略将服务器返回的数据显示到页面的代码 ajax url url data data type post success function result 省略代码 29 51 常用参数 load 简介 语法 selector load url data function result status xhr 30 51 load 用法 使用load 实现异步交互以上代码等价于 示例 nameDiv load url data get url data function result nameDiv html result 31 51 学员操作 使用 get 和 post 实现邮箱验证 需求说明实现无刷新邮箱验证在用户注册页面 当E mail文本框失去焦点时 判断用户是否存在分别使用 get 和 post 方法实现以上需求 练习 32 51 学员操作 load 实现邮箱验证 需求说明实现无刷新邮箱验证在用户注册页面 当E mail文本框失去焦点时 判断用户是否存在 练习 33 51 共性问题集中讲解 常见问题及解决办法代码规范问题调试技巧 共性问题集中讲解 34 51 认识JSON JSON JavaScriptObjectNotation 一种轻量级的数据交换格式通常用于在客户端和服务器之间传递数据 id 4 name 梅西 pwd 6666 35 51 示例 为什么使用JSON JSON出现之前的数据交互方式 XMLXML难于解析体积比较大读写不够灵活JSON优点轻量级交互语言结构简单易于解析 36 51 语法 JOSN简介2 1 示例 varperson name 张三 age 30 varJSON对象 key value key value JSON对象 37 51 语法 JOSN简介2 2 示例 varJSON数组 value value varcountryArray 中国 美国 俄罗斯 varpersonArray name 张三 age 30 name 李四 age 40 JSON数组 38 51 定义JSON对象和数组2 1 定义JSON格式数据并在页面输出 问题 39 51 定义JSON对象和数组2 2 定义JSON格式的user对象 并在id为objectDiv的DIV元素中输出定义JSON格式的字符串数组 并在id为arrayDiv的DIV元素中输出定义JSON格式的user对象数组 并在id为objectArrayDiv的DIV元素中使用输出 40 51 分析 常用参数 getJSON 简介 语法 getJSON url data success result status xhr 41 51 getJSON 用法 使用 getJSON 实现异步交互以上代码等价于 示例 getJSON url data success result 省略将服务器返回的数据显示到页面的代码 ajax url url data data type get dataType json success function result 省略代码 42 51 学员操作 ajax 传递JSON数据 需求说明使用 ajax 方法实现无刷新邮箱验证在用户注册页面 当E mail文本框失去焦点时 判断用户是否存在在服务器根据验证结果返回一段JSON格式的字符串 并在客户端解析该字符串 将结果显示到页面 练习 43 51 学员操作 getJSON 实现邮箱验证 需求说明使用 getJSON 方法实现无刷新邮箱验证在用户注册页面 当E mail文本框失去焦点时 判断用户是否存在在服务器根据验证结果返回一段JSON格式的字符串 并在客户端解析该字符串 将结果显示到页面 练习 44 51 总结2 1 Ajax主要包括的技术 XMLHttpRequestJavaScriptDOM CSSXML JSON或HTML等使用Ajax需要以下步骤创建XMLHttpRequest对象设置回调函数初始化XMLHttpRequest组件发送请求使用Ajax正确处理服务器数据的条件XMLHttpRequest的readystate属性值为4 且status属性值为200 即 数据读取结束且服务器响应正常 45 52 总结2 2 jQuery提供的Ajax方法 ajax get p