近年來，前后端分離成為web領域的熱點話題，Javascript作為前端三大核心技術之一，與后端的Spring MVC、Mybatis組成了一種完整的企業級開發架構，即SSM。
在這種架構下，前端通過http請求與后端進行交互，而javascript相應的技術就是Ajax。Ajax全稱為Asynchronous JavaScript and XML，即異步的Javascript和XML。它支持在不重新載入整個頁面的情況下與服務器交換數據并更新部分頁面內容，從而提升了用戶的使用體驗。本文將介紹JavaScript方式提交請求SSM的實現方法。
一、前端代碼
我們先來看一下前端javascript的實現代碼。
創建XMLHttpRequest對象
在javascript中，需要先創建XMLHttpRequest對象，通過該對象發起異步請求。
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}發送請求并處理響應數據
通過xmlhttp對象的open方法設置請求方式、請求地址、是否異步等參數，再通過send方法發送請求。在請求的回調函數中，可以通過修改DOM元素、改變樣式等方式來處理響應數據。
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}二、后端代碼
前端處理完請求后，需要后端進行響應。在SSM架構中，后端代碼使用Spring MVC框架實現，其中@ResponseBody注解可以標記一個Controller方法的返回值為json數據。
@RequestMapping(value="/getUserName",method=RequestMethod.POST)
@ResponseBody
public String getUserName(@RequestParam("userId")String userId) {
// 處理業務邏輯，獲取用戶名稱
String userName = userService.findNameById(userId);
// 返回json格式的數據
return "{\"userName\":\"" + userName + "\"}";
}三、整合步驟
在前端代碼中調用后端Controller方法
var userId = "123";
$.ajax({
type : 'POST',
url : '/ssm-demo/getUserName',
data: {"userId" : userId},
dataType : 'json',
success : function(data) {
console.log(data.userName);
}
});引入jQuery和Jackson相關庫
在后端代碼中，需要引入Jackson相關庫來實現json數據的的轉換。
<!-- jQuery庫 --> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> <!-- Jackson庫 --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.8</version> </dependency>
配置JavaConfig，掃描Controller
在Spring的JavaConfig文件中，需要進行如下配置：
@Configuration
@ComponentScan(basePackages="com.demo.controller")
public class AppConfig {
// ...
}配置Spring MVC的DispatcherServlet
在web.xml中配置DispatcherServlet，將Servlet映射到指定url。需要配置的參數有：
contextConfigLocation：指定Spring的JavaConfig文件的路徑
<url-pattern>：指定DispatcherServlet的映射url
DISPATCHER_SERVLET_NAME：指定DispatcherServlet的名字
<servlet> <servlet-name>demo-dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:com/demo/config/AppConfig.java</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>demo-dispatcher</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
通過對以上步驟的整合，即可在SSM架構中實現通過Javascript方式提交請求。這種方式的優點在于，可以提升用戶的使用體驗，在不重新載入整個頁面的情況下通過前后端異步交互，實現局部刷新，從而快速響應用戶的操作。
