SpringMVC+Ajax课件.docx

1、SpringMVC+Ajax课件第七章 Spring MVC + Ajax本章工作任务 在Spring MVC中使用Ajax实现局部刷新 使用Spring MVC + Ajax处理文本格式的Ajax响应信息 使用Spring MVC + Ajax处理json格式的Ajax响应信息 本章技能目标 掌握Spring MVC中使用Ajax实现局部刷新 掌握使用Spring MVC + Ajax处理文本格式的Ajax响应信息 掌握使用Spring MVC + Ajax处理json格式的Ajax响应信息本章简介本章重点介绍Spring MVC中使用Ajax技术的方法，在回顾了使用JavaScript实现

2、Ajax的步骤之后，使用jQuery对Ajax方法的封装极大的简化Ajax的编码开发。在Spring MVC项目框架下，处理返回json格式的Ajax响应数据时，需要添加jackson-core-asl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar用以令Spring对Object类型自动转换成json格式，同时需要在核心文件中添加配置项。预习作业请按以下步骤预习本章内容：1. 带着以下任务，阅读、学习本章的相关资料2. 标注出本章看不懂或存在疑惑的部分3. 整理、记录学习中的问题4. 熟记本章的英文单词请到中心听课前，完成下面的作业。1. 背诵英文单词(1)

3、 Ajax（Asynchronous JavaScript and XML） : (2) JSON（JavaScript Object Notation）: 2. 预习并回答以下问题阅读本章内容，在作业本上完成以下简答题(1) 在jQuery中如何调用Ajax方法？(2) Spring中使用什么注解标注方法用以处理Ajax请求？3. 记录预习的问题记录学习中遇到的问题，填写于下面的横线上，以便集中探讨解决7.1 jQuery的Ajax方法7.1.1 概述我们之前在JSP的学习中学过使用JavaScript原生态实现Ajax局部刷新技术。围绕着XMLHttpRequest这个Ajax的核心对象，

4、使用其相关属性和方法来实现Ajax局部刷新页面技术。 回顾代码（实现局部刷新的登录功能）：var XMLHttp ;function createXMLHttpRequest() if(window.XMLHttpRequest) XMLHttp = new XMLHttpRequest(); else if(window.ActiveObject) XMLHttp= new ActiveObject(Microsoft.XMLHTTP); function doAjax() createXMLHttpRequest(); var name = document.getElementById(

5、uname).value; var pwd = document.getElementById(upwd).value; if(XMLHttp!=null)XMLHttp.open(POST,LoginServlet?uname=+name+&pwd=+pwd,true); XMLHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded;); XMLHttp.onreadystatechange=processRequest; XMLHttp.send(null); else alert(不能创建XMLHttpRe

6、quest对象实例) function processRequest() if(XMLHttp.readyState=4) if(XMLHttp.status=200) var sobj=document.getElementById(login); var str= XMLHttp.responseText; if(str != null) sobj.innerHTML = 欢迎 + str + 登录+ login out; else document.getElementById(error).innerHTML=用户名或密码错误; 我们之前使用JavaScript原生态实现Ajax技术，

7、需要编写大量的JavaScript代码，且对于不同的浏览器，创建核心对象XMLHttpRequest的方式也不同，实现起来很麻烦！我们也学习过jQuery技术，使用jQuery我们已经实现了简化JavaScript相关代码的开发，那么既然Ajax的核心技术就是JavaScript，jQuery自然也对Ajax实现了相关方法的封装，使之变得十分易用，只要编写极少的代码即可实现强大的Ajax功能。7.1.2 Ajax方法在jQuery中提供了多个实现Ajax技术的方法，如：$.ajax()、$.post()、$.get()等方法。这里我们以最底层的jQuery Ajax函数$.ajax()来学习。

8、其他方法的用法相对简单，请大家借助jQuery API帮助文档自行学习。语法：$.ajax(options)其中options为可选参数，对应的描述参见下表。参数名类型描述urlString发送请求的地址。typeString数据请求方式(post或get),默认为get。dataString发送到服务器上的数据，如果不是字符串格式则自动转为字符串格式，get方法则附在html请求地址后面。dataTypeString服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包判断。可为:html、script、text、xml、json。beforeSendFunction该函数用于发送

9、请求前修改XMLHttpRequest对象。其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件。completeFunction请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，该函数有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串。successFunction请求成功后调用的回调函数，该函数有三个参数。第一个是XMLHttpRequest对象，第二个是strError，第三个是捕捉到的错误对象strObject。errorFunction请

10、求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。timeoutNumber请求超时的时间(毫秒)，该设置将覆盖$.ajaxSetup()方法中同样的设置。globalBoolean是否相应全局事件，默认是true,表示响应，如果设置成false,表示不响应，那么全局事件$.ajaxStart等将不响应。asyncBoolean是否为异步请求，默认是true,表示是异步，如果设置成false，表示是同步请求。cacheBoolean是否进行页面缓存，true表示进行缓存，false表

11、示不进行页面缓存。traditionalBoolean是否使用传统的方式传递参数。目前知道的默认传递数组，后面会加。使用jQuery的Ajax函数来实现之前的登录功能代码如下：function doLoginAjax() $.ajax(type:GET,url: LoginServlet?uname=+$(#uname).val()+&pwd=+$(#upwd).val(),dataType:text, success:function(data) if(null != data) $(#login).html(欢迎 + data + 登录+ login out); else $(#login

12、).html(用户名或密码错误); );通过代码我们可以看出，使用jQuery的Ajax函数封装后的Ajax使用起来非常方便，而且解决了常用浏览器的兼容问题。7.2 Spring MVC 中的Ajax7.2.1 概述 在Spring MVC框架中，我们就是通过jQuery来实现Ajax交互的。由于Ajax是异步请求，其返回的内容不是整个页面，因此在控制器中对于处理Ajax请求的方法我们需要特别的标注，使用ResponseBody注解来说明当前方法返回的内容将作为Ajax请求的响应数据返回给请求页面，而不再是返回一个完整的页面。 接下来，我们就来看看，在Spring MVC中如何处理各种不同格式

13、的Ajax响应数据。 7.2.2 处理文本格式的Ajax响应数据 现在，我们来实现一个简单的Ajax功能，实现注册页面的用户名验证功能。示例一：实现注册用户名验证。步骤：1. 搭建Spring MVC项目框架，并配置注解方式实现映射关系。2. 编写功能页面。添加jquery支持。并绑定用户名输入框的blur事件。3. 在blur事件中调用$.ajax()方法实现发送Ajax请求。4. 编写控制器类，并编写处理Ajax请求的方法，并使用ResponseBody注解标注该方法返回Ajax响应数据。注册页面编写如下代码： 验证用户名 $(function() $(#username).blur(fu

14、nction() var name = $(this).val(); if( = name) $(#msg).html(用户名不能为空！); return; $.ajax( type:GET, url:checkuname.do, data:name=+name, dataType:text, success:function(data) if(true = data) $(#msg).html(恭喜，用户名可用！); else $(#msg).html(用户名已经被使用！); ); ); ); 用户名： 编写控制器类编写如下代码：ControllerRequestMapping(/check

15、uname.do)public class CheckUnameController RequestMapping public ResponseBody String checkUname(String name) if(Jack.equals(name) return false; return true; 实现效果如下：（1） 当没有输入内容时：（2） 当输入的用户名存在时：（3） 当输入的用户名不存在时： 7.2.3 处理复杂格式（JSON）的Ajax响应数据 当我们需要服务器返回的数据格式较为复杂时，文本格式显然不能满足我们的要求，如：集合，对象，对象集合等。该怎么办呢？ 此时，可以

16、将Ajax请求中的响应数据类型指定为“JSON”格式：一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C+、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。 Spring对Object转换成JSON格式提供了支持，无需手动拼接JSON格式的字符串，只需要添加两个jar文件，然后将处理Ajax请求的方法返回值设置为Object。在核心配置文件spring-servlet.xml

17、中添加配置项即可。 Spring支持Object转换JSON的jar文件： jackson-core-asl-1.9.13.jar jackson-mapper-asl-1.9.13.jar配置文件示例代码： 7.2.3.1处理文本集合格式数据我们来实现一个获取用户名列表并在页面中显示的Ajax功能。示例二：实现显示姓名列表功能。步骤：1. 搭建Spring MVC项目框架，并配置注解方式实现映射关系。2. 编写功能页面。添加jquery支持。并绑定按钮的点击事件。3. 在事件中调用$.ajax()方法实现发送Ajax请求，用于获取存放姓名的集合对象。4. 添加jackson-core-asl

18、-1.9.13.jar和jackson-mapper-asl-1.9.13.jar到工程中，在核心配置文件中添加配置项5. 编写控制器类，并编写处理Ajax请求的方法，并使用ResponseBody注解标注该方法返回Ajax响应数据，方法返回值设置为Object。功能页面编写如下代码： 显示姓名列表 $(function() $(#btnshow).click(function() $.ajax( type:GET, url:nameList.do, data:null, dataType:json, success:function(data) var html = ; $(data).ea

19、ch(function(i,n) html += +n+; ); $(#nameul).html(html); ); ); ); 点击按钮显示姓名列表 编写控制器类编写如下代码：Controllerpublic class ShowNameListController RequestMapping(/nameList.do) public ResponseBody Object checkUname() List nameList = new ArrayList(); nameList.add(张三); nameList.add(李四); nameList.add(王五); return na

20、meList; 实现效果如下： 在页面中点击按钮：显示姓名列表：7.2.3.2处理单个对象格式数据若返回值是一个对象，如：用户信息对象user，我们实现Ajax请求获取该用户对象，并在页面显示用户相关属性信息。这与之前实现的返回姓名集合方法几乎一模一样，仅仅只是在回调函数中处理data参数的方式不同。示例三：实现显示用户对象信息功能。步骤：1. 搭建Spring MVC项目框架，并配置注解方式实现映射关系。2. 编写功能页面。添加jquery支持。并绑定按钮的点击事件。3. 在事件中调用$.ajax()方法实现发送Ajax请求，用于获取存放姓名的集合对象。4. 添加jackson-core-a

21、sl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar到工程中，在核心配置文件中添加配置项5. 编写控制器类，并编写处理Ajax请求的方法，并使用ResponseBody注解标注该方法返回Ajax响应数据，方法返回值设置为Object。功能页面编写如下代码： 显示对象信息 $(function() $(#btnshow).click(function() $.ajax( type:GET, url:userInfo.do, data:null, dataType:json, success:function(data) if(null != data) var

22、html = 姓名： + data.name + 年龄： + data.age + 邮箱： + data.email; $(#msg).html(html); ); ); ); 点击显示用户信息 编写控制器类编写如下代码：Controllerpublic class ShowUserInfoController RequestMapping(/userInfo.do) public ResponseBody Object checkUname() User user = new User(张三,18,zhangsan); return user; 实现效果如下： 在页面中点击按钮：显示姓名列表：