第8章 Ajax技术.ppt

第8章 Ajax技术 教学目标 Ajax，异步JavaScript与XML，是使用客户端脚本与Web服务器交换数据的Web应用开发方法。通过本章的学习，可以达到以下学习目标。 初步了解Ajax技术。 理解Ajax的概念与相关技术。 理解Ajax的实现步骤。 了解常用的Ajax框架。 教学要求 学习重点 Ajax的实现步骤 Ajax代码编写 本章目录 8.1 ?【案例27】用Ajax调用XML数据 8.2 综 合 实 训 8.1 ?【案例27】案例效果 本案例使用Ajax异步调用XML文档中的数据并进行显示，效果图如图8.1所示。 代码设计 （1）在Dreamweaver.80中新建HTML文件，并保存为“ajax.html”。 （2）切换到代码视图，输入（8-1.txt）代码。 （3）新建XML文档并保存为“data.xml”，输入如下代码： root item欢迎来到Ajax的世界！！/item /root (4) 选择【开始】|【控制面板】|【管理工具】|【Internet信息服务】命令，在“默认网站”上右击，在展开的快捷菜单中选择【新建】|【虚拟目录】命令。 (5) 在弹出的对话框中单击【下一步】按钮，输入“别名”，如“ajax”，单击【下一步】按钮，在弹出的窗口中选择文件保存的目录，根据向导设置。 (6) 选中ajax文件单击右键，选择【浏览】命令 。 (7) 在打开的浏览器中，将鼠标移至文本“欢迎光临”处单击即可。 相关知识 1．Ajax技术介绍 全称为Asynchronous JavaScript and XML，即异步JavaScript请求处理XML技术 融合了HTML、CSS、XML、JavaScript、DOM和XMLHttpRequest等多种技术 是一种创建交互式网页应用的网页开发新技术 相关知识 2．Ajax的主要相关技术 (1)??XML (2)??DOM (3)??XMLHttpRequest 相关知识 3．实现Ajax的基本步骤： 创建XMLHttpRequest对象 创建HTTP请求 设置响应HTTP请求状态变化的函数 设置获取服务器返回数据的语句 发送HTTP请求 局部更新 4．Ajax常用框架介绍 1)??jQuery框架 2)??DOJO 3)??Prototype 4)??MooTools …… 8.2 综合实训 第7章的综合实训为素材，将header部分的静态图片替换成动态切换图片效果。使用了Ajax框架jQuery实现了6张图片无刷新切换的特效，效果如图8.7所示。 图片每隔5秒切换一次，切换时，右下方的数字按钮会发生相应的变化，也可以通过单击数字按钮直接切换到相应图片。 代码设计 (1)到jQuery的官方网站下载一份必威体育精装版的jQuery库。 (2) 启动Dreamweaver 8.0，打开素材文件夹中的文件“index.html”。 (3) 调用jQuery框架库：在代码视图中的head和/head标签对中加入以下代码： script language=JavaScript src=jquery-1.4.2.min.js/script (4) 定义3个数组，分别存放图片地址、图片链接和图片替换文字，在head和/head标签对中加入（8-9.txt、8-10.txt）代码。 (5) 删除图片“header.jpg”，替换为（8-11.txt）代码。 (6) 定义CSS样式规则，在head和/head标签对中输入（8-12.txt）代码： (7) 保存，按F12键预览效果。 * * 图8.1 Ajax调用XML文档数据效果图 图8.7 综合实训案例运行效果