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

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()方法指定从服务器载入文档的HTTP请求方式、文件名、是否使用异步方式,其基本语法格式如下。实例名.open("http请求方式","请求文件URL地址",是否采用异步方式);http请求方式为GET或POST。是否采用异步方式,默认为true,即异步方式发送请求。3.发送数据方法send()send()方法将open()方法指定的请求发送出去,该方法只有一个参数null,其基本语法格式如下。实例名.send(null);4.监听服务器完成请求状态XMLHttpRequest对象实例的onreadystatechange事件可以监听服务器完成请求状态,其基本语法格式如下。实例名.onreadystatechange=监听结束回调函数;onreadystatechange事件返回readystate属性和status属性。readystate属性有5种值,当数值为4时表示服务器已经处理完毕。status属性表示请求是否成功,如果值为200,则表明请求成功。回调函数需要在readystate为4和status为200时,才能访问服务器返回的数据。5.服务器返回数据属性XMLHttpRequest对象实例的responseText属性可以获取服务器返回的数据。三、jQuery的AJAX应用jQuery中对AJAX进行了封装,提供了一些与AJAX有关的方法和属性,大大简化了与服务器进行异步数据交互的步骤。1.加载文档方法load()load()方法能载入远程HTML文档并将其插入指定的DOM元素,其基本语法格式如下。load(文档地址,数据,回调函数)2.GET方式交互数据方法$.get()$.get()方法采用GET方式发送数据到服务器指定文档,并载入返回信息,其基本语法格式如下。$.get(文档地址,发送给服务器数据,回调函数,返回数据类型)发送给服务器的数据以“{键:值}”的形式组成,多对数据间用逗号分隔。回调函数在服务器处理请求成功后执行,参数为返回的数据。返回数据的类型可以为XML、HTML、JSON等。3.POST方式交互数据方法$.post()$.post()方法采用POST方式发送数据到服务器指定文档,并载入返回信息,其基本语法格式如下。$.post(文档地址,发送给服务器数据,回调函数)发送给服务器的数据以“{键:值}”的形式组成,多对数据间用逗号分隔。回调函数在服务器处理请求成功后执行,参数为返回的数据。返回数据的类型可以为XML、HTML、JSON等。作业布置一、问答题(1)AJAX是一种什么技术?有什么优点?(2)JavaScript的AJAX技术核心是哪些对象、方法和属性?(3)jQuer