第12章教案_jQuery AJAX技术.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第12章jQueryAJAX技术

一、教学目标：

了解什么是AJAX以及AJAX技术的组成部分；

了解什么是jQueryAJAX；

掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；

掌握jQueryAJAX事件的用法。

二、教学重点和难点：

重点：掌握jQueryAJAX常用方法（load、get、post和ajax）；

难点：jQueryAJAX事件的用法。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

AJAX是一种可以与服务器异步交互数据的网页开发技术，使用该技术可以在不重新加载整个页面的前提下直接更新当前页面中的指定内容。本章主要内容是jQueryAJAX技术的应用，包括jQueryAJAX技术简介、常用方法和事件处理三个部分组成。

五、教学基本内容：

12.1jQueryAJAX简介

12.1.1什么是AJAX

AJAX来源于英文词组AsynchronousJavaScriptandXML（异步JavaScript和XML）的首字母缩写，是一种可以与服务器异步交互数据的网页开发技术。该名称是在2005年2月首次出现，由AdaptivePath公司的JesseGarrett在Ajax:AnewapproachtoWebApplication一文中提到。使用AJAX技术可以在不重新加载整个页面的前提下直接更新当前页面中的指定内容，例如GoogleSuggest和GoogleMaps就是两种使用了AJAX技术的Web应用。

事实上，AJAX是由多种当前主流的技术组合而成的，包含如下内容：

使用XTHML和CSS进行标准化表达；

使用DOM(DocumentObjectModel)实现动态展示和交互；

使用XMLHttpRequest实现异步数据获取；

使用JavaScript绑定所有技术综合应用。

12.1.2AJAX的实现原理

AJAX可以让浏览器和服务器端进行异步交互，其实现原理可以分成5个步骤，如下图所示。

图12-1AJAX的实现原理

当网页页面需要显示从服务器端查询到的数据信息时，先使用JavaScript调用XMLHTTPRequest对象，该对象允许JavaScript向服务器端发出HTTP请求并且不阻塞用户。服务器收到请求后在自身后台处理请求并将响应结果返回给浏览器，其中有用的数据信息可以封装成文本、HTML、XML或JSON等形式发出，再由浏览器端解析数据包后获取里面的详细内容。最后，继续使用JavaScript操作HTMLDOM对象来直接更新页面中的内容，无需刷新网页。

12.1.3jQueryAJAX

在不使用jQueryAJAX技术时，JavaScript创建XMLHTTPRequest对象时还得考虑不同浏览器的兼容性问题，节选部分参考代码如下：

//非IE浏览器创建XmlHttpRequest对象

if(window.XmlHttpRequest){

xmlhttpReq=newXmlHttpRequest();

}

//IE浏览器创建XmlHttpRequest对象

if(window.ActiveXObject){

try{

xmlhttpReq=newActiveXObject(Microsoft.XMLHTTP);

}

catch(e){

try{

xmlhttpReq=newActiveXObject(msxml2.XMLHTTP);

}

catch(ex){}

}

}

如果使用了jQueryAJAX技术，上述代码的复杂内容只需要一个$.ajax()就可以完成。

jQuery提供了关于AJAX的一系列方法，使得开发者可以更方便地从服务器端请求文本、HTML、XML或JSON形式的数据。jQueryAJAX技术中封装的函数可以化简原本复杂繁琐的AJAX相关代码，使得程序员可以更多关注产品的实现。

注：由于Chrome内核浏览器的安全机制不允许使用AJAX请求本地文件，因此本章节均使用了在本地电脑中临时搭建服务器的方式（搭建方式见12.3）作为例题运行效果的截图以供参考，后面不再逐一解释。读者在实际运用中如果采用了第三方服务器环境则无需考虑浏览器的限制问题。

12.2准备工作

12.2.1临时服务器的搭建

若开发者条件受限，可以将PC端临时部署为模拟服务器进行开发和测试。开发者可以根据自己的实