[ajax03.pptVIP

回顾 XHR的responseText和responseXML的区别 Ajax中可以使用几种格式的文本信息进行通讯 各自的优缺点 本章目标 了解jQuery 掌握jQuery核心库 掌握jQuery与Ajax相关库 第一部分 了解jQuery 掌握jQuery核心库 掌握jQuery与Ajax相关库 jQuery简介 一个流行的JavaScript框架库 目的： 降低JavaScript代码的复杂度 适应不同的浏览器 jQuery作用 获取页面元素：提供了多种选择器 修改页面的外观：提供修改CSS的方法 修改页面的内容：不仅是文本 在页面中响应用户的交互：优雅的截取多种事件 给页面加上动态效果：淡入淡出、滑动等 良好的Ajax支持：专有Ajax库 使用jQuery 下载jQuery库—js文件 在页面中加入script src=“PATH/jquery.js”/script 第二部分 了解jQuery 掌握jQuery核心库 掌握jQuery与Ajax相关库 jQuery核心方法—$ jQuery选择器—分类 jQuery选择器—元素选择器 jQuery选择器—类选择器 jQuery选择器—ID选择器 选择层次 选择层次—祖先后代 选择层次—父子 选择层次—紧邻 选择层次—先后 其它选择形式 选择器汇总-1 选择器汇总-2 第三部分 了解jQuery 掌握jQuery核心库 掌握jQuery与Ajax相关库 Ajax对象创建 语法：$.ajax() 用于创建一个XMLHttpRequest对象 参数（均为可选的键值对）： type：请求方式，默认为GET url：请求资源地址，默认当前页 async：请求模式，默认为true，异步 cache：缓存加载，默认为true complete：请求完成后的回调函数 (不论成功或失败均调用） success：请求成功后回调函数 Ajax对象创建示例 $.ajax({ type: POST, url: valid.do, data: name=John, success: function(msg){ alert( msg ); } }); 其他方法 $.get(url,[data],[callback])：一个简单的GET 请求，可用于取代复杂的ajax语法 $.post(url,[data],[callback])：对应的，一个简单的POST 请求 load(url,[data],[callback])：载入远程 HTML 文件代码并插入至 DOM 中 相关事件 ajaxComplete(callback) ajaxError(callback) ajaxSend(callback) ajaxStart(callback) ajaxStop(callback) ajaxSuccess(callback) 使用jQuery改写以前示例 课程选择 学员信息 股票行情 总结 了解jQuery 掌握jQuery的几种选择器的用法 能够使用jQuery的Ajax库简化程序代码 获取页面的部分内容： 不使用? JavaScript?库，必须写很多行代码来遍历? DOM?树，并定位 一一个HTML文档的指定部分。jQuery?提供了一个强大而有效的选择机制来返回被检查或 者被操作的文档。 修改页面的外观： CSS?提供了一个影响文档渲染的强大方法，当? web?浏览器不支持同样的 标准时，它却是不尽人意的。jQuery?能弥补这个差距，提供了跨所有浏览器的同样的标准 的支持。另外，即使页面被渲染后，jQuery?仍可改变文档一部分中的类或者独立的样式属 性。 修改页面的内容： 不仅限于外观的改变，jQuery?还可以用很少的按键就可修改文档的内容 本身。文本可改变，图像可插入或替换，列表可重新排序或者整个HTML结构可被重写和扩第3页 展，完成这些只需一套非常易用的? API?函数。 在页面中响应用户的交互： 当它们发生时，如果我们不能控制，即使是最周密最强大的行为 也是没有用的。jQuery?库提供了一个优雅的方法来截取多种事件， 例如用户单击链接，我们不需要将事件句柄混杂到? HTML?代码 中。同时，事件句柄? API?删除浏览器不一致性， 往往会让web 开发者感到很烦恼。 给页面加上动画： 为了有效地执行交互行为， 设计师必须提供可视的反馈给用户，? jQuery?库 提供了一组效果来推进它，效果如褐色，清空等，也可定制一套新的工具。 无刷新返回服务器端的信息： 这个代码模式已经以? Asynchronous?JavaScript?and?X