近年來，前后端分離成為web領(lǐng)域的熱點話題，Javascript作為前端三大核心技術(shù)之一，與后端的Spring MVC、Mybatis組成了一種完整的企業(yè)級開發(fā)架構(gòu)，即SSM。
在這種架構(gòu)下，前端通過http請求與后端進行交互，而javascript相應(yīng)的技術(shù)就是Ajax。Ajax全稱為Asynchronous JavaScript and XML，即異步的Javascript和XML。它支持在不重新載入整個頁面的情況下與服務(wù)器交換數(shù)據(jù)并更新部分頁面內(nèi)容，從而提升了用戶的使用體驗。本文將介紹JavaScript方式提交請求SSM的實現(xiàn)方法。
一、前端代碼
我們先來看一下前端javascript的實現(xiàn)代碼。
創(chuàng)建XMLHttpRequest對象
在javascript中，需要先創(chuàng)建XMLHttpRequest對象，通過該對象發(fā)起異步請求。
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");
}發(fā)送請求并處理響應(yīng)數(shù)據(jù)
通過xmlhttp對象的open方法設(shè)置請求方式、請求地址、是否異步等參數(shù)，再通過send方法發(fā)送請求。在請求的回調(diào)函數(shù)中，可以通過修改DOM元素、改變樣式等方式來處理響應(yīng)數(shù)據(jù)。
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;
}
}二、后端代碼
前端處理完請求后，需要后端進行響應(yīng)。在SSM架構(gòu)中，后端代碼使用Spring MVC框架實現(xiàn)，其中@ResponseBody注解可以標記一個Controller方法的返回值為json數(shù)據(jù)。
@RequestMapping(value="/getUserName",method=RequestMethod.POST)
@ResponseBody
public String getUserName(@RequestParam("userId")String userId) {
// 處理業(yè)務(wù)邏輯，獲取用戶名稱
String userName = userService.findNameById(userId);
// 返回json格式的數(shù)據(jù)
return "{\"userName\":\"" + userName + "\"}";
}三、整合步驟
在前端代碼中調(diào)用后端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相關(guān)庫
在后端代碼中，需要引入Jackson相關(guān)庫來實現(xiàn)json數(shù)據(jù)的的轉(zhuǎn)換。
<!-- 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。需要配置的參數(shù)有：
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架構(gòu)中實現(xiàn)通過Javascript方式提交請求。這種方式的優(yōu)點在于，可以提升用戶的使用體驗，在不重新載入整個頁面的情況下通過前后端異步交互，實現(xiàn)局部刷新，從而快速響應(yīng)用戶的操作。
