8. Spring MVC + Ajax Restful设计

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入门示例

1. 流程设计

   /hello.do-->DispatcherServlet-->HandlerMapping-->HelloController(返回String)-->@ResponseBody-->"hello ajax"

2. 编写缺失组件

   编写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;
       }
   }
   

3. 配置流程

   • 配置DispatcherServlet
   • 配置HandlerMapping
   • 配置Controller

SpringMVC和RESTful设计

RESTful介绍

符合REST规范的应用被称为RESTful应用。

REST规范是应用于客户端和服务器交互的，最常见的是HTTP交互。

常用于Web服务设计中，Web服务返回结果为JSON或XML。

REST即表述性状态传递（英文：Representational State Transfer，简称REST）是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。

REST规范

1. URL设计规范

   按资源设计URL，而不是按操作或动作设计。

2. 按动作或操作设计

   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

3. 按资源设计

   http://localhost:8080/xxx/user/1

4. 区分资源操作

   通过请求提交类型来区分不同操作。

   GET : 对应查询操作
   POST : 对应添加操作
   DELETE : 对应删除操作
   PUT：对应更新操作

5. 请求参数传递

   GET/DELETE : /user/xxx 或/user?id=xxx
   POST/PUT : 采用HTTP Body体

6. 请求提交方法

   浏览器提交请求，仅支持GET和POST，不支持PUT和DELETE，可以采用Ajax或框架封装后的< form>标记。

   $.ajax({url:"http://localhost:8080/xxx/user/1",type:"get|post|put|delete",});

案例2：做一套针对Book操作的Web服务接口

1. 常规操作的接口设计

   • 查询所有图书信息

     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提交
     

2. 在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>
   

3. 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;
       }
   }
   

4. 测试

   利用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：前端界面开发

1. 查询

   $.ajax({
       url:"http://localhost:8888/spring_07/book",
       type:"get",
       dataType:"json",
       success:function(){...}
   })
   

2. 删除

   $.ajax({
       url:"http://localhost:8888/spring_07/book/xx",
       type:"delete",
       dataType:"json",
       success:function(){...}
   })