在JavaWeb中，前后端交互的基础是Ajax。Ajax（Asynchronous JavaScript and XML）技术使得我们可以使用JavaScript发送异步的HTTP请求，从而实现前后端的分离和交互。
以下是一个使用Ajax发送GET请求的例子：
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求行
xhr.open('GET', 'http://yourserver.com/api/data');
// 配置请求头
// xhr.setRequestHeader('Content-Type', 'application/json');
// 监听请求成功的状态
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理响应数据
var response = xhr.responseText;
console.log('Response:', response);
}
};
// 发送请求
xhr.send();
以下是一个使用Ajax发送POST请求的例子：
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求行
xhr.open('POST', 'http://yourserver.com/api/data');
// 配置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听请求成功的状态
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，处理响应数据
var response = xhr.responseText;
console.log('Response:', response);
}
};
// 发送数据
var data = JSON.stringify({ key: 'value' });
xhr.send(data);
在实际开发中，我们通常会使用更现代的方法，例如使用fetch API替代XMLHttpRequest。以下是使用fetch发送GET请求的例子：
fetch('http://yourserver.com/api/data')
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => console.log('Fetch Response:', data))
.catch(error => console.error('Fetch Error:', error));
以及使用fetch发送POST请求的例子：
fetch('http://yourserver.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
})
.then(data => console.log('Fetch Response:', data))
.catch(error => console.error('Fetch Error:', error));
这些例子展示了如何使用JavaScript发送HTTP请求，并处理响应。在实际应用中，你可能还需要处理错误、设置请求头、处理不同的HTTP状态码等。