Lassen Sie uns darüber sprechen, wie Sie SSM zum Senden von Anfragen in JavaScript implementieren

In den letzten Jahren ist die Trennung von Front-End und Back-End zu einem heißen Thema im Web-Bereich geworden. Als eine der drei Kerntechnologien des Front-Ends ist Javascript zusammen mit Spring MVC und Mybatis auf Das Back-End bildet eine vollständige Entwicklungsarchitektur auf Unternehmensebene, nämlich SSM.

Unter dieser Architektur interagiert das Front-End mit dem Back-End über http-Anfragen, und die entsprechende Technologie für Javascript ist Ajax. Ajax steht für Asynchronous JavaScript and XML, also asynchrones Javascript und XML. Es unterstützt den Datenaustausch mit dem Server und die Aktualisierung eines Teils des Seiteninhalts, ohne die gesamte Seite neu laden zu müssen, wodurch das Benutzererlebnis verbessert wird. In diesem Artikel wird die Implementierungsmethode zum Senden von SSM-Anfragen in JavaScript vorgestellt.

1. Front-End-Code

Werfen wir zunächst einen Blick auf den Front-End-Javascript-Implementierungscode.

1. XMLHttpRequest-Objekt erstellen

In Javascript müssen Sie zuerst ein XMLHttpRequest-Objekt erstellen und über dieses Objekt eine asynchrone Anfrage initiieren.

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");
}

2. Anfrage senden und Antwortdaten verarbeiten

Anforderungsmethode, Anforderungsadresse, asynchrone oder andere Parameter über die offene Methode festlegen das xmlhttp-Objekt und senden Sie dann die Anforderung über die Sendemethode. In der Anforderungsrückruffunktion können die Antwortdaten durch Ändern von DOM-Elementen, Ändern von Stilen usw. verarbeitet werden.

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

2. Back-End-Code

Nachdem das Front-End die Anfrage verarbeitet hat, muss das Back-End antworten. In der SSM-Architektur wird der Back-End-Code mithilfe des Spring MVC-Frameworks implementiert, wobei die Annotation @ResponseBody den Rückgabewert einer Controller-Methode als JSON-Daten markieren kann.

@RequestMapping(value="/getUserName",method=RequestMethod.POST)
@ResponseBody
public String getUserName(@RequestParam("userId")String userId) {
    // 处理业务逻辑，获取用户名称
    String userName = userService.findNameById(userId);
    // 返回json格式的数据
    return "{\"userName\":\"" + userName + "\"}";
}

3. Integrationsschritte

1. Backend-Controller-Methode im Front-End-Code aufrufen

var userId = "123";
$.ajax({
    type : 'POST',
    url : '/ssm-demo/getUserName',
    data: {"userId" : userId},
    dataType : 'json',
    success : function(data) {
        console.log(data.userName);
    }
});

# 🎜🎜 #JQuery- und Jackson-bezogene Bibliotheken einführen

Im Back-End-Code müssen Jackson-bezogene Bibliotheken eingeführt werden, um die Konvertierung von JSON-Daten zu realisieren.

<!-- 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 konfigurieren, Controller scannen

In der JavaConfig-Datei von Spring ist die folgende Konfiguration erforderlich:

@Configuration
@ComponentScan(basePackages="com.demo.controller")
public class AppConfig {
    // ...
}

#🎜🎜 # Konfigurieren Sie das DispatcherServlet von Spring MVC

4. Konfigurieren Sie das DispatcherServlet in web.xml und ordnen Sie das Servlet der angegebenen URL zu. Die Parameter, die konfiguriert werden müssen, sind:

contextConfigLocation: Geben Sie den Pfad der JavaConfig-Datei von Spring an.

• : Geben Sie die Zuordnungs-URL von an DispatcherServlet#🎜🎜 #
DISPATCHER_SERVLET_NAME: Geben Sie den Namen von DispatcherServlet an

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

Durch die Integration der oben genannten Schritte können Sie Anfragen über Javascript in der SSM-Architektur übermitteln. Der Vorteil dieser Methode besteht darin, dass sie die Benutzererfahrung verbessern und durch asynchrone Interaktion zwischen Front- und Back-End eine teilweise Aktualisierung erreichen kann, ohne die gesamte Seite neu laden zu müssen, wodurch schnell auf Benutzervorgänge reagiert werden kann.

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Sie SSM zum Senden von Anfragen in JavaScript implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!