在现代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并返回执行结果（即数据）。

相似文章

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政