【JavaWeb】Day14.前后端交互基础——Ajax

在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状态码等。