Ajax+SpringMvc前后端分离

前言：

      传统的，我们在访问页面时，我们会将填充完数据的html页面返回给浏览器去解析。从而看到包含业务数据的网页。如jsp会在页面文件中添加Java代码来渲染页面。用EL表达式来输出model的业务内容。

       这种方式在一定程度上做了前后端的分离。但并不能完全的分离。前端设计师需要懂点Java基础编程或者EL表达式。或者后端程序员需要懂一些前端页面的html知识，css知识，甚至要再会一些JavaScript。

这种设计大致是这样的：

jsp页面hello.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>










 <%-- hello,I'm helloJsp2. ${users[4].userName} --%>

	  

	

		

			
序列
			
名称
			
id
		
	

	    
${status.count}
	    
${item.userName}
	    
${item.userId}
	  


再见.
 <% %>

hello.java:

package xyz.jangle.action;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import xyz.jangle.model.User;
import xyz.jangle.service.UserService;

@Controller
@RequestMapping("/mvc")
public class Hello {
	// 养成一种习惯，将项目的控制层对象，对应的视图，视图所用的js文件，三个名称进行统一。用Ctrl+R查找时可以很方便地找到他们
	@Autowired
	private UserService userService;

	@RequestMapping("/hello")
	public ModelAndView hello() {
		System.out.println("全都一起上吧，我根本没在怕，啦蜡辣拉拉");
		List users = userService.getAllUser();
		ModelAndView mav = new ModelAndView("hello"); // 参数为试图名称 viewName
		mav.addObject("users", users); // 添加model用于EL表达式输出值
		return mav;
	}

}

我们访问http://127.0.0.1/mvc/hello。 用通俗非专业的口吻来说：  该请求由后端逻辑Hello.java处理之后，返回给视图hello.jsp，视图jsp结合model的内容解析渲染(EL表达式输出)最终的html页面返回给浏览器。 这种方式我们在打开页面的时候页面会有短暂的空白与等待（业务逻辑越复杂，数据越多就越慢）

正题：

        下面介绍下Ajax获取业务数据再渲染页面的前后端分离的设计，其核心思想是：当请求时，直接返回用户想要的页面资源，再由浏览器发送Ajax请求从服务器获取业务数据，再次渲染页面进行数据展示。这里将会有两次的http请求。一次取页面，一次取数据。

        一般我们的Ajax请求返回JSON数据或者xml数据，前端设计师需掌握这两种数据格式，就可以很好的设计产品所预期达到的页面效果。

大致的设计如：helloAjax.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>










	

		

			
序列
			
名称
			
id
		
	
	

HelloAjax.java:

package xyz.jangle.action;


import java.util.HashMap;
import java.util.List;
import java.util.Map;



import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;


import xyz.jangle.model.User;
import xyz.jangle.service.UserService;


/**
 * @author huhj
 * @email  [email protected]
 * @time   2018年7月6日 上午10:27:20
 */
@Controller
@RequestMapping("/hello")
public class HelloAjax {
	
	@Autowired
	private UserService userService;
	
	@RequestMapping("/helloAjax")
	public ModelAndView hello(){
		ModelAndView mav = new ModelAndView("helloAjax"); 	//参数为试图名称 viewName
		return mav;
	}
	
	@RequestMapping("/helloData")
	@ResponseBody
	public Map helloData(){
		Map map = new HashMap();
		List users = userService.getAllUser();
		map.put("users",users);
		return map;
	}

}

一个方法用于返回页面，一个方法用于返回数据。http://127.0.0.1/hello/helloAjax

总结：两种方式展示的页面是一样的，内容也是一致的。但是在开发与分工上还是会有一些差别。所需掌握的技术也会有所偏差。

注：ajax请求时，SpringMvc会有一个默认的解析器（jackson）将各种数据类型转化为JSON等ajax请求时（dataType）要求的数据格式。