Web 前端开发技术 教案 项目十二 AJAX 技术.docx

Web前端开发技术

教案设计

项目课题

AJAX技术

授课时间

授课对象

大学生

学习目标

1.了解AJAX技术的概念。

2.掌握JavaScriptAJAX和服务器数据交互技术。

3.掌握jQueryAJAX和服务器数据交互技术。

学习重点

掌握JavaScriptAJAX和服务器数据交互技术。

学习难点

掌握jQueryAJAX和服务器数据交互技术。

教学方法

讲授法、课堂演示法

教学用具

多媒体课件

教学流程

教学环节

教学内容

教学过程

任务一AJAX概述

AJAX(AsynchronousJavaScriptAndXML,异步JavaScript和XML)是一种使用客户端脚本与服务器异步交互数据的网页开发技术。使用AJAX技术,可以实现无须重新加载整个网页即可直接更新当前网页中的局部内容。JavaScript和jQuery都能使用AJAX方式和服务器进行数据交互。

在传统的Web交互过程中,用户使用浏览器向服务器发出请求,服务器接到请求后执行请求的操作,并将执行结果返回给客户端浏览器。在服务器返回所有结果前,客户端处于等待状态。例如,用户填写注册表单后,提交所有表单数据到服务器。服务器接收数据后先进行数据库操作,如查询用户名是否已注册、写入数据库等,然后返回注册后的网页,如提示注册成功或注册失败。用户必须将所有数据填写完毕后才能提交,提交后等待服务器响应。

在使用AJAX技术的页面中,用户以异步方式发送请求,不会影响当前浏览器中页面的线程,可以继续网页上的下一步操作,用户不会处于等待状态。例如,用户填写注册表单中的用户名后,用户名以异步方式发送到服务器进行操作,同时用户可以进行其他数据的填写操作。

AJAX技术缩短了用户的等待时间,改善了用户的操作体验,提高了Web程序的性能,降低了服务器的负担。但是客户端JavaScript代码处理数据的能力还是较弱,安全性不够,更多的数据处理还需要借助服务器上的后端动态网页设计语言来完成。

任务二AJAX应用

一、AJAX使用环境

由于使用AJAX技术的页面,需要和服务器进行数据交互。因此,在进行网页开发时,除了需要客户端的浏览器软件,还需要具有服务器和服务器软件环境。

服务器软件环境有IIS(InternetInformationServices,互联网信息服务)、Apache等。在本书示例中,采用的服务器环境配置为Apache,服务器端数据处理采用PHP语言。推荐使用PHP集成开发环境软件包AppServ。AppServ软件包一次性安装,无须配置即可使用,极大地简化了安装和配置运行环境的步骤。如果有需要,则可以到AppServ官方网站下载集成软件包安装程序,下面以appserv-x64-9.3.0.exe版本为例进行讲解。

下载appserv-x64-9.3.0.exe安装程序后,双击进行安装。在本书示例中,AppServ安装路径为D:\AppServ,HTTP端口采用默认的80端口。

在浏览器地址栏中输入“http://localhost”或“http://”访问AppServ服务器目录下的www目录,运行index.php,也就是AppServ的测试页。

至此,服务器环境安装成功。运行后面的示例时,需要把网页文件放到www目录下,通过“http://localhost/网页文件名”方式进行访问执行。

二、JavaScript的AJAX应用

JavaScript中AJAX技术的核心是XMLHttpRequest对象,该对象的功能是和服务器进行异步接收或发送数据。

1.创建XMLHttpRequest对象实例

使用XMLHttpRequest对象之前必须创建XMLHttpRequest对象实例。由于IE6浏览器使用ActiveXObject方式引入XMLHttpRequest对象,而其他浏览器中XMLHttpRequest对象是Window对象的子对象,所以代码中需要针对不同浏览器创建实例。创建XMLHttpRequest对象实例的基本语法格式如下。

var实例名;

if(window.ActiveXObject){

实例名=newActiveXObject(Microsoft.XMLHTTP);}

elseif(window.XMLHttpRequest){

实例名=newXMLHttpRequest();

}

2.指定文档方法open()

使用XMLHttpRequest对象实例的open()方法指定从服