JavaScript でリクエストを送信するために SSM を実装する方法について話しましょう

近年、Web分野ではフロントエンドとバックエンドの分離が話題になっており、フロントエンドの3つのコア技術の1つであるJavaScriptは、完全なエンタープライズレベルの開発アーキテクチャを形成しています。 、つまり、バックエンドに Spring MVC と Mybatis を備えた SSM です。

このアーキテクチャでは、フロントエンドは http リクエストを通じてバックエンドと対話し、JavaScript に対応するテクノロジは Ajax です。 Ajax は Asynchronous JavaScript and XML の略で、非同期の JavaScript と XML です。サーバーとのデータ交換と、ページ全体を再読み込みせずにページ コンテンツの一部を更新することがサポートされているため、ユーザー エクスペリエンスが向上します。この記事ではJavaScriptでリクエストSSMを送信する実装方法を紹介します。

1. フロントエンド コード

まず、フロントエンド JavaScript 実装コードを見てみましょう。

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

2. リクエストを送信し、応答データを処理します

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

2. バックエンド コード

フロントエンドがリクエストを処理した後、バックエンドは応答する必要があります。 SSM アーキテクチャでは、バックエンド コードは Spring MVC フレームワークを使用して実装され、@ResponseBody アノテーションによってコントローラー メソッドの戻り値を json データとしてマークできます。

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

3. 統合手順

1. フロントエンド コードでバックエンド コントローラー メソッドを呼び出す

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

2. jQuery および Jackson 関連のライブラリを導入する

バックエンド コードでは、json データを変換するために Jackson 関連のライブラリを導入する必要があります。

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

3. JavaConfig の設定、Controller のスキャン

Spring の JavaConfig ファイルでは、次の設定が必要です:

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

4. Spring MVC DispatcherServlet の設定

web.xml で DispatcherServlet を構成し、そのサーブレットを指定された URL にマップします。設定する必要があるパラメータは次のとおりです:

• contextConfigLocation: Spring の JavaConfig ファイルのパスを指定します
• : 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 を通じてリクエストを送信できます。この方法の利点は、ユーザー エクスペリエンスを向上させ、ページ全体を再読み込みすることなくフロント エンドとバック エンド間の非同期対話を通じて部分的な更新を実現できるため、ユーザー操作に迅速に応答できることです。

以上がJavaScript でリクエストを送信するために SSM を実装する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。