Ajax+axios+跨域+JSONP

Ajax、axios 和 JSONP 都是常用的浏览器端技术，用于实现异步数据交换，但它们有不同的应用场景和实现方式。

1. Ajax (XMLHttpRequest)：Ajax 是一种浏览器技术，允许在不刷新页面的情况下更新网页的部分内容。使用原生的 XMLHttpRequest 对象进行跨域请求时，需要服务器支持 CORS (Cross-Origin Resource Sharing)。
2. axios：axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它支持跨域请求，通过在请求头中设置跨域资源共享的相关字段，或者使用代理服务器来绕过同源策略。
3. JSONP：JSONP 主要用于解决跨域请求数据的问题。它通过动态创建 <script> 标签，并在其 src 属性中传递一个 callback 函数名来请求数据。服务器端需要支持这种请求方式。

以下是使用 axios 进行跨域请求的示例代码：

// 引入 axios
import axios from 'axios';
 
// 发送 GET 请求
axios.get('https://api.example.com/data', {
  params: {
    // 查询参数
  }
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误情况
  console.error(error);
});
 
// 发送 POST 请求
axios.post('https://api.example.com/data', {
  // 请求体数据
})
.then(response => {
  // 处理响应数据
  console.log(response.data);
})
.catch(error => {
  // 处理错误情况
  console.error(error);
});

服务器端也需要设置适当的 CORS 头部，例如 Access-Control-Allow-Origin，来允许跨域请求。

如果服务器不支持 CORS，可以考虑使用 JSONP，但请注意，axios 不原生支持 JSONP，可能需要第三方库或者自定义实现。