在Web前端開(kāi)發(fā)中，JavaScript（JS）和Java都是常用的開(kāi)發(fā)語(yǔ)言。如何在這兩種語(yǔ)言之間傳輸數(shù)據(jù)成為一個(gè)常見(jiàn)的問(wèn)題。下面介紹兩種常用的數(shù)據(jù)傳輸方式。

1. Ajax

function sendData(){
// 創(chuàng)建XMLHttpRequest對(duì)象
var xmlhttp = new XMLHttpRequest(); 
// 設(shè)置請(qǐng)求方式和請(qǐng)求地址
xmlhttp.open("POST","/data",true); 
// 設(shè)置請(qǐng)求頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 發(fā)送數(shù)據(jù)
xmlhttp.send("name=張三&age=20"); 
}

JS通過(guò)XMLHttpRequest對(duì)象向后臺(tái)發(fā)送數(shù)據(jù)，在后臺(tái)處理完成后，再通過(guò)回調(diào)函數(shù)將返回結(jié)果更新到前端頁(yè)面中。這種方式實(shí)現(xiàn)了數(shù)據(jù)的異步傳輸，不會(huì)阻塞前端頁(yè)面，提高了用戶交互的體驗(yàn)。

2. WebSocket

// JS端代碼
var ws = new WebSocket("ws://localhost:8080");
ws.onopen = function(){
// 連接成功后發(fā)送數(shù)據(jù)
ws.send("Hello, world!");
};
ws.onmessage = function(evt){
// 接收后臺(tái)傳來(lái)的數(shù)據(jù)
var data = evt.data;
};
// Java端代碼
@ServerEndpoint("/websocket")
public class WebSocketServer {
@OnOpen
public void onOpen(Session session){
// 存儲(chǔ)會(huì)話信息
sessions.add(session);
}
@OnMessage
public void onMessage(Session session, String message){
// 處理消息
String result = handleMessage(message);
// 返回結(jié)果
session.getBasicRemote().sendText(result);
}
}

WebSocket是一種基于TCP協(xié)議的全雙工通信技術(shù)，可以實(shí)現(xiàn)服務(wù)器主動(dòng)向客戶端推送數(shù)據(jù)。在JS和Java之間建立WebSocket連接后，JS可以向Java發(fā)送消息，Java可以進(jìn)行相應(yīng)的處理，并將處理結(jié)果返回給JS。

以上兩種方式都可以實(shí)現(xiàn)JS和Java之間的數(shù)據(jù)傳輸，但在具體實(shí)現(xiàn)中，需要根據(jù)情況選擇合適的方式。