文档介绍：1 神奇的 Ajax ?为什么使用 Ajax ? ? Ajax 主要包括哪些技术? ?使用 Ajax 的步骤有哪些? 2 本节目标?掌握 Ajax 技术原理?掌握 Ajax 应用编程 3 Web 2-1 ?互联网前世今生动动态态网网页页静态网站静态网站 null null 黑暗年代黑暗年代革命啦,革命啦!三五年就来一次革命啦,革命啦!三五年就来一次 4 Web 2-2 ? Web 的特点–用户贡献内容–内容聚合 RSS –更丰富的“用户体验”内容聚合内容聚合每个小“窗口”可以关闭、最小化和进行个性化设置每个小“窗口”可以关闭、最小化和进行个性化设置所有操作都是在不刷新窗口的情况下完成的自动补全自动补全 5 为什么使用 Ajax3-1 ?无刷新:不刷新整个页面,只刷新局部?无刷新的好处–只更新部分页面,有效利用带宽只是登录,没必要刷新“庞大”的页面。只是登录,没必要刷新“庞大”的页面。 6 ?无刷新的好处–提供连续的用户体验观看视频时执行操作,不希望页面刷新视频从头播放吧观看视频时执行操作,不希望页面刷新视频从头播放吧为什么使用 Ajax3-2 只刷新了局部页面,视频继续播放只刷新了局部页面,视频继续播放 7 ?无刷新的好处–提供类似 C/S 的交互效果,操作更方面为什么使用 Ajax3-3 拖动、放大、缩小 Google 地图拖动、放大、缩小 Google 地图自动补全功能自动补全功能 8 什么是 Ajax ? Ajax :只刷新局部页面的技术– JavaScript :更新局部的网页– XML :一般用于请求数据和响应数据的封装– XMLHttpRequest 对象:发送请求到服务器并获得返回结果– CSS :美化页面样式–异步:发送请求后不等返回结果,由回调函数处理结果 Ajax 技术的核心 Ajax 技术的核心 9 XMLHttpRequest 3-1 ? JavaScript 对象 XMLHttpRequest 是整个 Ajax 技术的核心,它提供了异步发送请求的能力?常用方法设置请求的头信息 setRequestHeader(header,valu e) 发送请求 content 参数指定请求的参数 send(content) 建立与服务器的连接 method 参数指定请求的 HTTP 方法,典型的值是 GET 或POST URL 参数指定请求的地址 async 参数指定是否使用异步请求, 其值为 true 或false open(method,URL,async) 说明方法名 10 XMLHttpRequest 3-2 ?常用属性– on readystate change :指定回调函数– readystate: XMLHttpRequest 的状态信息 XMLHttpRequest 对象没有完成初始化 0XMLHttpRequest 对象的请求发送完成 2 XMLHttpRequest 对象开始发送请求 1XMLHttpRequest 对象读取响应结束 4 XMLHttpRequest 对象开始读取响应,还没有结束 3 说明就绪状态码