SpringMVC+Ajax课件Word文档下载推荐.docx
《SpringMVC+Ajax课件Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《SpringMVC+Ajax课件Word文档下载推荐.docx（19页珍藏版）》请在冰豆网上搜索。
functioncreateXMLHttpRequest（）{
if（window.XMLHttpRequest）{
XMLHttp=newXMLHttpRequest（）;
}elseif（window.ActiveObject）{
XMLHttp=newActiveObject（"
Microsoft.XMLHTTP"
）;
}
}
functiondoAjax（）{
createXMLHttpRequest（）;
varname=document.getElementById（"
uname"
）.value;
varpwd=document.getElementById（"
upwd"
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="
欢迎<
b>
+str+"
<
/b>
登录"
+"
ahref='
#'
>
loginout<
/a>
;
}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
数据请求方式（post或get）,默认为get。
data
发送到服务器上的数据，如果不是字符串格式则自动转为字符串格式，get方法则附在html请求地址后面。
dataType
服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包判断。
可为:
html、script、text、xml、json。
beforeSend
Function
该函数用于发送请求前修改XMLHttpRequest对象。
其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件。
complete
请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，该函数有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串。
success
请求成功后调用的回调函数，该函数有三个参数。
第一个是XMLHttpRequest对象，第二个是strError，第三个是捕捉到的错误对象strObject。
error
请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。
timeout
Number
请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup（）方法中同样的设置。
global
Boolean
是否相应全局事件，默认是true,表示响应，如果设置成false,表示不响应，那么全局事件$.ajaxStart等将不响应。
async
是否为异步请求，默认是true,表示是异步，如果设置成false，表示是同步请求。
cache
是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存。
traditional
是否使用传统的方式传递参数。
目前知道的默认传递数组，后面会加[]。
使用jQuery的Ajax函数来实现之前的登录功能代码如下：
scripttype="
text/javascript"
src="
js/jquery-1.8.3.js"
/script>
functiondoLoginAjax（）{
$.ajax（{type:
GET"
url:
"
+$（"
#uname"
）.val（）+"
#upwd"
）.val（）,
dataType:
text"
success:
function（data）{
if（"
!
=data）{
$（"
#login"
）.html（"
+data+"
}else{
}）;
通过代码我们可以看出，使用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响应数据。
注册页面编写如下代码：
html>
<
head>
title>
验证用户名<
/title>
$（function（）{
$（"
#username"
）.blur（function（）{
varname=$（this）.val（）;
if（"
==name）{
$（"
#msg"
spanstyle='
color:
red;
'
用户名不能为空！
/span>
return;
}
$.ajax（{
type:
url:
checkuname.do"
data:
name="
+name,
dataType:
success:
if（"
true"
==data）{
$（"
green;
恭喜，用户名可用！
}else{
用户名已经被使用！
}
}
}）;
}）;
}）;
/head>
body>
用户名：
inputtype="
id="
username"
name="
/>
spanid="
msg"
/body>
/html>
编写控制器类编写如下代码：
@Controller
@RequestMapping（"
/checkuname.do"
publicclassCheckUnameController{
@RequestMapping
public@ResponseBodyStringcheckUname（Stringname）{
if（"
Jack"
.equals（name））{
return"
false"
return"
实现效果如下：
（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中添加配置项<
即可。
Spring支持Object转换JSON的jar文件：
Ø
jackson-core-asl-1.9.13.jar
jackson-mapper-asl-1.9.13.jar
配置文件示例代码：
?
xmlversion="
1.0"
encoding="
UTF-8"
beans
xmlns="
http:
//www.springframework.org/schema/beans"
xmlns:
xsi="
//www.w3.org/2001/XMLSchema-instance"
p="
//www.springframework.org/schema/p"
context="
//www.springframework.org/schema/context"
mvc="
//www.springframework.org/schema/mvc"
xsi:
schemaLocation="
//www.springframework.org/schema/beans
http:
//www.springframework.org/schema/beans/spring-beans-3.1.xsd
//www.springframework.org/schema/context
//www.springframework.org/schema/context/spring-context-3.1.xsd
//www.springframework.org/schema/mvc
//www.springframework.org/schema/mvc/spring-mvc-3.1.xsd"
context:
component-scanbase-package="
web.controller"
beanclass="
org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"
/beans>
7.2.3.1处理文本集合格式数据
我们来实现一个获取用户名列表并在页面中显示的Ajax功能。
示例二：
实现显示姓名列表功能。
并绑定按钮的点击事件。
3.在事件中调用$.ajax（）方法实现发送Ajax请求，用于获取存放姓名的集合对象。
4.添加jackson-core-asl-1.9.13.jar和jackson-mapper-asl-1.9.13.jar到工程中，在核心配置文件中添加配置项<
5.编写控制器类，并编写处理Ajax请求的方法，并使用@ResponseBody注解标注该方法返回Ajax响应数据，方法返回值设置为Object。
功能页面编写如下代码：
显示姓名列表<
#btnshow"
）.click（function（）{
nameList.do"
null,
json"
varhtml="
$（data）.each（function（i,n）{
html+="
li>
+n+"
/li>
}）;
$（"
#nameul"
）.html（html）;
<
h2>
点击按钮显示姓名列表<
/h2>
button"
btnshow"
value="
显示姓名列表"
ulid="
nameul"
/ul>
编写控制器类编写如下代码：
publicclassShowNameListController{
@RequestMapping（"
/nameList.do"
public@ResponseBodyObjectcheckUname（）{
List<
String>
nameList=newArrayList<
（）;
nameList.add（"
张三"
李四"
王五"
returnnameList;
在页面中点击按钮：
显示姓名列表：
7.2.3.2处理单个对象格式数据
若返回值是一个对象，如：
用户信息对象user，我们实现Ajax请求获取该用户对象，并在页面显示用户相关属性信息。
这与之前实现的返回姓名集合方法几乎一模一样，仅仅只是在回调函数中处理data参数的方式不同。
示例三：
实现显示用户对象信息功能。
显示对象信息<
userInfo.do"
if（null!
varhtml="
姓名：
+data.name+"
br/>
年龄：
+data.age+"
邮箱：
+data.email;
}
点击显示用户信息<
显示用户信息"
divid="
/div>
publicclassShowUserInfoController{
/userInfo.do"
Useruser=newUser（"
18,"
zhangsan@"
returnuser;
升级会员 