SpringMVC+Ajax课件.docx

SpringMVC+Ajax课件.docx

《SpringMVC+Ajax课件.docx》由会员分享，可在线阅读，更多相关《SpringMVC+Ajax课件.docx（19页珍藏版）》请在冰豆网上搜索。

SpringMVC+Ajax课件

第七章SpringMVC+Ajax

本章工作任务

✓在SpringMVC中使用Ajax实现局部刷新

✓使用SpringMVC+Ajax处理文本格式的Ajax响应信息

✓使用SpringMVC+Ajax处理json格式的Ajax响应信息

本章技能目标

✓掌握SpringMVC中使用Ajax实现局部刷新

✓掌握使用SpringMVC+Ajax处理文本格式的Ajax响应信息

✓掌握使用SpringMVC+Ajax处理json格式的Ajax响应信息

本章简介

本章重点介绍SpringMVC中使用Ajax技术的方法，在回顾了使用JavaScript实现Ajax的步骤之后，使用jQuery对Ajax方法的封装极大的简化Ajax的编码开发。

在SpringMVC项目框架下，处理返回json格式的Ajax响应数据时，需要添加jackson-core-asl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar用以令Spring对Object类型自动转换成json格式，同时需要在核心文件中添加配置项

annotation-driven/>。

预习作业

请按以下步骤预习本章内容：

1.带着以下任务，阅读、学习本章的相关资料

2.标注出本章看不懂或存在疑惑的部分

3.整理、记录学习中的问题

4.熟记本章的英文单词

请到中心听课前，完成下面的作业。

1.背诵英文单词

（1）Ajax（AsynchronousJavaScriptandXML）:

（2）JSON（JavaScriptObjectNotation）:

2.预习并回答以下问题

阅读本章内容，在作业本上完成以下简答题

（1）在jQuery中如何调用Ajax方法？

（2）Spring中使用什么注解标注方法用以处理Ajax请求？

3.记录预习的问题

记录学习中遇到的问题，填写于下面的横线上，以便集中探讨解决

——————————————————————————————————————

——————————————————————————————————————

——————————————————————————————————————

——————————————————————————————————————

7.1jQuery的Ajax方法

7.1.1概述

我们之前在JSP的学习中学过使用JavaScript原生态实现Ajax局部刷新技术。

围绕着XMLHttpRequest这个Ajax的核心对象，使用其相关属性和方法来实现Ajax局部刷新页面技术。

回顾代码（实现局部刷新的登录功能）：

varXMLHttp;

functioncreateXMLHttpRequest（）{

if（window.XMLHttpRequest）{

XMLHttp=newXMLHttpRequest（）;

}elseif（window.ActiveObject）{

XMLHttp=newActiveObject（"Microsoft.XMLHTTP"）;

}

}

functiondoAjax（）{

createXMLHttpRequest（）;

varname=document.getElementById（"uname"）.value;

varpwd=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（"不能创建XMLHttpRequest对象实例"）

}

}

functionprocessRequest（）{

if（XMLHttp.readyState==4）{

if（XMLHttp.status==200）{

varsobj=document.getElementById（"login"）;

varstr=XMLHttp.responseText;

if（str!

="null"）{

sobj.innerHTML="欢迎"+str+"登录"+"loginout";

}else{

document.getElementById（"error"）.innerHTML="用户名或密码错误";

}

}

}

}

我们之前使用JavaScript原生态实现Ajax技术，需要编写大量的JavaScript代码，且对于不同的浏览器，创建核心对象XMLHttpRequest的方式也不同，实现起来很麻烦！

我们也学习过jQuery技术，使用jQuery我们已经实现了简化JavaScript相关代码的开发，那么既然Ajax的核心技术就是JavaScript，jQuery自然也对Ajax实现了相关方法的封装，使之变得十分易用，只要编写极少的代码即可实现强大的Ajax功能。

7.1.2Ajax方法

在jQuery中提供了多个实现Ajax技术的方法，如：

$.ajax（）、$.post（）、$.get（）等方法。

这里我们以最底层的jQueryAjax函数$.ajax（）来学习。

其他方法的用法相对简单，请大家借助jQueryAPI帮助文档自行学习。

语法：

$.ajax（[options]）　　其中[options]为可选参数，对应的描述参见下表。

参数名

类型

描述

url

String

发送请求的地址。

type

String

数据请求方式（post或get）,默认为get。

data

String

发送到服务器上的数据，如果不是字符串格式则自动转为字符串格式，get方法则附在html请求地址后面。

dataType

String

服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包判断。

可为:

html、script、text、xml、json。

beforeSend

Function

该函数用于发送请求前修改XMLHttpRequest对象。

其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件。

complete

Function

 请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，该函数有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串。

success

Function

 请求成功后调用的回调函数，该函数有三个参数。

第一个是XMLHttpRequest对象，第二个是strError，第三个是捕捉到的错误对象strObject。

error

Function

 请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。

timeout

Number

 请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup（）方法中同样的设置。

global

Boolean

 是否相应全局事件，默认是true,表示响应，如果设置成false,表示不响应，那么全局事件$.ajaxStart等将不响应。

async

Boolean

 是否为异步请求，默认是true,表示是异步，如果设置成false，表示是同步请求。

cache

Boolean

 是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存。

traditional

Boolean

是否使用传统的方式传递参数。

目前知道的默认传递数组，后面会加[]。

使用jQuery的Ajax函数来实现之前的登录功能代码如下：

functiondoLoginAjax（）{

$.ajax（{type:

"GET",

url:

"LoginServlet?

uname="+$（"#uname"）.val（）+"&pwd="+$（"#upwd"）.val（）,

dataType:

"text",

success:

function（data）{

if（"null"!

=data）{

$（"#login"）.html（"欢迎"+data+"登录"+"loginout"）;

}else{

$（"#login"）.html（"用户名或密码错误"）;

}

}

}）;

}

通过代码我们可以看出，使用jQuery的Ajax函数封装后的Ajax使用起来非常方便，而且解决了常用浏览器的兼容问题。

7.2SpringMVC中的Ajax

7.2.1概述

在SpringMVC框架中，我们就是通过jQuery来实现Ajax交互的。

由于Ajax是异步请求，其返回的内容不是整个页面，因此在控制器中对于处理Ajax请求的方法我们需要特别的标注，使用@ResponseBody注解来说明当前方法返回的内容将作为Ajax请求的响应数据返回给请求页面，而不再是返回一个完整的页面。

接下来，我们就来看看，在SpringMVC中如何处理各种不同格式的Ajax响应数据。

7.2.2处理文本格式的Ajax响应数据

现在，我们来实现一个简单的Ajax功能，实现注册页面的用户名验证功能。

示例一：

实现注册用户名验证。

步骤：

1.搭建SpringMVC项目框架，并配置注解方式实现映射关系。

2.编写功能页面。

添加jquery支持。

并绑定用户名输入框的blur事件。

3.在blur事件中调用$.ajax（）方法实现发送Ajax请求。

4.编写控制器类，并编写处理Ajax请求的方法，并使用@ResponseBody注解标注该方法返回Ajax响应数据。

注册页面编写如下代码：

$（function（）{

$（"#username"）.blur（function（）{

varname=$（this）.val（）;

if（""==name）{

$（"#msg"）.html（"

red;'>用户名不能为空！

"）;

return;

}

$.ajax（{

type:

"GET",

url:

"checkuname.do",

data:

"name="+name,

dataType:

"text",

success:

function（data）{

if（"true"==data）{

$（"#msg"）.html（"

green;'>恭喜，用户名可用！

"）;

}else{

$（"#msg"）.html（"

red;'>用户名已经被使用！

"）;

}

}

}）;

}）;

}）;

用户名：

编写控制器类编写如下代码：

@Controller

@RequestMapping（"/checkuname.do"）

publicclassCheckUnameController{

@RequestMapping

public@ResponseBodyStringcheckUname（Stringname）{

if（"Jack".equals（name））{

return"false";

}

return"true";

}

}

实现效果如下：

（1）当没有输入内容时：

（2）当输入的用户名存在时：

（3）当输入的用户名不存在时：

7.2.3处理复杂格式（JSON）的Ajax响应数据

当我们需要服务器返回的数据格式较为复杂时，文本格式显然不能满足我们的要求，如：

集合，对象，对象集合等。

该怎么办呢？

此时，可以将Ajax请求中的响应数据类型指定为“JSON”格式：

一种轻量级的数据交换格式。

它基于ECMAScript的一个子集。

JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。

这些特性使JSON成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成（网络传输速率）。

Spring对Object转换成JSON格式提供了支持，无需手动拼接JSON格式的字符串，只需要添加两个jar文件，然后将处理Ajax请求的方法返回值设置为Object。

在核心配置文件spring-servlet.xml中添加配置项

annotation-driven/>即可。

Spring支持Object转换JSON的jar文件：

Øjackson-core-asl-1.9.13.jar

Øjackson-mapper-asl-1.9.13.jar

配置文件示例代码：

xmlversion="1.0"encoding="UTF-8"?

>

xmlns="http:

//www.springframework.org/schema/beans"

xmlns:

xsi="http:

//www.w3.org/2001/XMLSchema-instance"

xmlns:

p="http:

//www.springframework.org/schema/p"

xmlns:

context="http:

//www.springframework.org/schema/context"

xmlns:

mvc="http:

//www.springframework.org/schema/mvc"

xsi:

schemaLocation="http:

//www.springframework.org/schema/beans

http:

//www.springframework.org/schema/beans/spring-beans-3.1.xsd

http:

//www.springframework.org/schema/context

http:

//www.springframework.org/schema/context/spring-context-3.1.xsd

http:

//www.springframework.org/schema/mvc

http:

//www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">

component-scanbase-package="web.controller"/>

annotation-driven/>

7.2.3.1处理文本集合格式数据

我们来实现一个获取用户名列表并在页面中显示的Ajax功能。

示例二：

实现显示姓名列表功能。

步骤：

1.搭建SpringMVC项目框架，并配置注解方式实现映射关系。

2.编写功能页面。

添加jquery支持。

并绑定按钮的点击事件。

3.在事件中调用$.ajax（）方法实现发送Ajax请求，用于获取存放姓名的集合对象。

4.添加jackson-core-asl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar到工程中，在核心配置文件中添加配置项

annotation-driven/>

5.编写控制器类，并编写处理Ajax请求的方法，并使用@ResponseBody注解标注该方法返回Ajax响应数据，方法返回值设置为Object。

功能页面编写如下代码：

$（function（）{

$（"#btnshow"）.click（function（）{

$.ajax（{

type:

"GET",

url:

"nameList.do",

data:

null,

dataType:

"json",

success:

function（data）{

varhtml="";

$（data）.each（function（i,n）{

html+="

}）;

$（"#nameul"）.html（html）;

}

}）;

}）;

}）;

点击按钮显示姓名列表

编写控制器类编写如下代码：

@Controller

publicclassShowNameListController{

@RequestMapping（"/nameList.do"）

public@ResponseBodyObjectcheckUname（）{

ListnameList=newArrayList（）;

nameList.add（"张三"）;

nameList.add（"李四"）;

nameList.add（"王五"）;

returnnameList;

}

}

实现效果如下：

在页面中点击按钮：

显示姓名列表：

7.2.3.2处理单个对象格式数据

若返回值是一个对象，如：

用户信息对象user，我们实现Ajax请求获取该用户对象，并在页面显示用户相关属性信息。

这与之前实现的返回姓名集合方法几乎一模一样，仅仅只是在回调函数中处理data参数的方式不同。

示例三：

实现显示用户对象信息功能。

步骤：

1.搭建SpringMVC项目框架，并配置注解方式实现映射关系。

2.编写功能页面。

添加jquery支持。

并绑定按钮的点击事件。

3.在事件中调用$.ajax（）方法实现发送Ajax请求，用于获取存放姓名的集合对象。

4.添加jackson-core-asl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar到工程中，在核心配置文件中添加配置项

annotation-driven/>

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）{

varhtml="姓名：

"+data.name+"
年龄：

"+data.age+"
邮箱：

"+data.email;

$（"#msg"）.html（html）;

}

}

}）;

}）;

}）;

点击显示用户信息