21xrx.com
2024-11-22 06:16:36 Friday
登录
文章检索 我的文章 写文章
如何通过Java与前端进行数据通信
2023-06-14 20:57:28 深夜i     --     --
AJAX WebSocket GraphQL

在现代web开发中,很少有应用是仅由后端实现的。大多数应用程序都采用了前后端分离的方式。前端应用程序通常是使用Javascript编写的,而后端应用程序则可能使用各种编程语言(如Java)。因此,数据通信是前后端通信中的一个重要环节。

本文将介绍如何使用Java和前端进行数据通信以及一些相关案例。

一、使用Ajax进行数据通信

Ajax是使用HTTP请求从Web服务器异步获取数据的技术。这意味着前端JavaScript代码可以通过调用后端Java应用程序暴露的RESTful API来获取数据,而不必重新加载整个页面。

下面是一个简单的例子:

前端JavaScript代码


function getData() {

  $.ajax({

    type: "GET",

    url: "/api/data",

    success: function(data) {

      console.log(data);

    },

    error: function(error) {

      console.log(error);

    }

  });

}

在这个例子中,前端JavaScript代码使用jQuery库中提供的ajax()函数向后端发送了一个GET请求,URL为/api/data。如果成功获得数据,将在浏览器的控制台中记录响应数据。如果有任何错误,则在控制台中记录错误信息。

后端Java代码


@RestController

@RequestMapping("/api/data")

public class DataController {

  @GetMapping("")

  public ResponseEntity getData() {

    String data = "This is some data from the server.";

    return new ResponseEntity<>(data, HttpStatus.OK);

  }

}

在这个例子中,后端Java代码使用Spring Boot框架中的RestController注解将类声明为Web控制器,并使用RequestMapping注解来指定URL映射到该类。此类有一个@GetMapping注解,用于指定HTTP GET请求的URL映射/ api / data。请求返回一个字符串,表示从服务器获取的数据。

二、使用WebSocket进行实时通信

在某些情况下,必须实现实时数据通信。一个例子是在线聊天应用程序。JavaScript中的WebSocket API可以使浏览器与后端Java应用程序建立一个WebSocket连接,并在两个应用程序之间实现实时双向通信。

下面是一个简单的例子:

前端JavaScript代码


let socket = new WebSocket("ws://localhost:8080/endpoint");

socket.onopen = function() {

  console.log("Connection established!");

};

socket.onmessage = function(event) {

  console.log("Received message:", event.data);

};

socket.onclose = function() {

  console.log("Connection closed!");

};

function sendMessage() {

  let message = "Hello, server!";

  socket.send(message);

}

在这个例子中,前端JavaScript代码使用浏览器内置WebSocket API创建一个WebSocket连接,并在连接建立时记录它,输出连接已建立消息。此后,该页检测到任何消息传入时,输出消息。最后,当连接关闭时,输出连接已关闭消息。

后端Java代码


@Component

@ServerEndpoint(value = "/endpoint")

public class WebSocketServer {

  @OnOpen

  public void onOpen(Session session) {

    System.out.println("Connection opened!");

  }

  @OnMessage

  public void onMessage(Session session, String message) {

    System.out.println("Received message: " + message);

    session.getBasicRemote().sendText("Hello, client!");

  }

  @OnClose

  public void onClose(Session session) {

    System.out.println("Connection closed!");

  }

}

在这个例子中,后端Java代码使用Java标准规范JSR-356(Java API for WebSocket)中的WebSocket API来注释一个WebSocket端点。该类在WebSocket连接打开,接收消息和关闭WebSocket连接时执行相应操作。在接收到任何消息时,将发送响应消息“Hello,client!”。

三、使用GraphQL进行可查询接口定义

GraphQL是一种查询语言,可用于前后端通信。与传统的RESTful API不同,GraphQL允许通过单个HTTP请求提取所需的数据。GraphQL有两种类型的查询:查询和变异。查询用于从后端获取数据,变异用于更改后端数据。

下面是一个简单的例子:

前端JavaScript代码


const QUERY = `

{

  user(id: 1234)

    name

    email

  

}

`;

fetch("/graphql", {

  method: "POST",

  headers:

    "Content-Type": "application/json"

  ,

  body: JSON.stringify({query: QUERY})

})

.then(res => res.json())

.then(data => console.log(data));

在这个例子中,前端JavaScript代码使用fetch()函数向后端发送一个POST请求,将GraphQL查询作为JSON包装对象的正文。请求的URL是/graphql。如果成功获得数据,则在浏览器的控制台中记录响应数据。

后端Java代码


@Component

public class GraphQLController {

  private static final String QUERY = "src/main/resources/graphql/user.graphql";

  @PostMapping(value = "/graphql", produces = MediaType.APPLICATION_JSON_VALUE)

  @ResponseBody

  public ResponseEntity graphql(@RequestBody String request) {

    ExecutionResult result = createGraphQL().execute(request);

    return new ResponseEntity<>(result.getData().toString(), HttpStatus.OK);

  }

  private GraphQL createGraphQL() {

    String schemaString = SchemaParser.fileToString(QUERY);

    TypeDefinitionRegistry typeDefinitionRegistry = new SchemaParser().parse(schemaString);

    RuntimeWiring runtimeWiring = RuntimeWiring.newRuntimeWiring()

        .type("Query", builder -> builder.dataFetcher("user", new UserFetcher()))

        .build();

    SchemaGenerator schemaGenerator = new SchemaGenerator();

    return schemaGenerator.makeExecutableSchema(typeDefinitionRegistry, runtimeWiring);

  }

}

在这个例子中,后端Java代码使用Spring Boot框架中的RestController注解将类声明为Web控制器,并在RequestMapping注解中指定URL映射到该类。此类有一个@Post注解,用于指定请求映射到此方法。该方法执行GraphQL查询,构建相应的SchemaGenerator并返回执行结果(即数据)。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复