SpringMVC和Ajax应用
Ajax回顾
Ajax可以做页面局部刷新。(性能提升、用户体验提升)
XMLHttpRequest对是核心,可以发送HTTP请求,可以接收服务器返回的JSON结果。需要基于JavaScript语言使用。返回结果可以是字符串、XML或JSON类型。
jQuery中有些函数对XMLHttpRequest做了封装应用,比如$.ajax、$.get、$.post、$.getJSON、load等函数。
Ajax流程
用户事件-->(Ajax发请求)-->Servlet(Service/DAO)-->返回JSON结果-->(Ajax回调函数)-->页面局部刷新
Spring MVC返回JSON结果
Ajax请求-->DispatcherServlet-->HandlerMapping-->XxxController(Service/Dao)-->返回模型数据对象-->@ResponseBody-->将对象转成JSON字符串输出
@ResponseBody标记会自动调用jackson、gson工具包将数据对象转成JSON字符串。
案例1:hello ajax入门示例
-
流程设计
/hello.do-->DispatcherServlet-->HandlerMapping-->HelloController(返回String)-->@ResponseBody-->"hello ajax"
-
编写缺失组件
编写Controller,将数据对象做返回值
//@Controller @RestController//@Controller+@ResponseBody public class HelloController { @RequestMapping("/hello.do") // @ResponseBody//导入gson或jackson工具包 public String sayHello(){ return "hello ajax"; } @RequestMapping("/user/load.do") // @ResponseBody public User loadUser(){ User user = new User(); user.setId("1001"); user.setName("tom"); user.setAge(20); return user; } }
-
配置流程
- 配置DispatcherServlet
- 配置HandlerMapping
- 配置Controller
SpringMVC和RESTful设计
RESTful介绍
符合REST规范的应用被称为RESTful应用。
REST规范是应用于客户端和服务器交互的,最常见的是HTTP交互。
常用于Web服务设计中,Web服务返回结果为JSON或XML。
REST即表述性状态传递(英文:Representational State Transfer,简称REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。
REST规范
-
URL设计规范
按资源设计URL,而不是按操作或动作设计。
-
按动作或操作设计
http://localhost:8080/xxx/load.do?id=1
http://localhost:8080/xxx/add.do
http://localhost:8080/xxx/delete.do?id=1
http://localhost:8080/xxx/modify.do?id=1
-
按资源设计
http://localhost:8080/xxx/user/1
-
区分资源操作
通过请求提交类型来区分不同操作。
GET : 对应查询操作
POST : 对应添加操作
DELETE : 对应删除操作
PUT:对应更新操作 -
请求参数传递
GET/DELETE : /user/xxx 或/user?id=xxx
POST/PUT : 采用HTTP Body体 -
请求提交方法
浏览器提交请求,仅支持GET和POST,不支持PUT和DELETE,可以采用Ajax或框架封装后的< form>标记。
$.ajax({url:"http://localhost:8080/xxx/user/1",type:"get|post|put|delete",});
案例2:做一套针对Book操作的Web服务接口
-
常规操作的接口设计
-
查询所有图书信息
http://localhost:8888/xxx/book GET提交
-
查询某一个图书信息
http://localhost:8888/xxx/book/2 GET提交
-
删除某一个图书信息
http://localhost:8888/xxx/book/2 DELETE提交
-
更新某一个图书信息
http://localhost:8888/xxx/book/2 PUT提交
-
添加一个图书信息
http://localhost:8888/xxx/book POST提交
-
-
在web.xml中将DispatcherServlet请求映射为/
<servlet> <servlet-name>springmvc</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
-
Controller中使用@RequestMapping、@RestController、@PathVariable标记
@RestController public class BookController { @Autowired private BookDao bookDao; @RequestMapping(value="/book",method=RequestMethod.GET) public List<Book> loadAll(){ List<Book> list = bookDao.findBooks(5); return list; } @RequestMapping(value="/book/{no}",method=RequestMethod.GET) public Book load(@PathVariable("no") int id){ Book book = bookDao.findById(id); return book; } @RequestMapping(value="/book/{no}",method=RequestMethod.DELETE) public boolean delete(@PathVariable("no") int id){ // 调用bookDao.delete(id); return true; } @RequestMapping(value="/book/{no}",method=RequestMethod.PUT) public boolean modify(@PathVariable("no") int id,Book book){ book.setId(id); // 调用bookDao.update(book); return true; } @RequestMapping(value="/book",method=RequestMethod.POST) public boolean add(Book book){ //调用bookDao.save(book) return true; } }
-
测试
利用spring-test测试框架中的MockMvc测试。
-
创建MockMvc对象
Mockmvc mockmvc = MockMvcBuilders .standaloneSetup(bookController).build();
-
创建HTTP请求对象
RequestBuilder getRequest = MockMvcRequestBuilders.get("/book/{no}", "20");
-
发送执行HTTP请求
MvcResult result = mockmvc.perform(getRequest).andReturn();
-
获取响应结果
String str = result.getResponse().getContentAsString(); System.out.println(str);
-
案例3:前端界面开发
-
查询
$.ajax({ url:"http://localhost:8888/spring_07/book", type:"get", dataType:"json", success:function(){...} })
-
删除
$.ajax({ url:"http://localhost:8888/spring_07/book/xx", type:"delete", dataType:"json", success:function(){...} })