JavaScript 的 HTTP 请求可以使用多种方式实现，比较常见的是使用 JavaScript 内置的 XMLHttpRequest 或者使用第三方库例如 axios、fetch 等进行 HTTP 请求。
使用 XMLHttpRequest 对象
XMLHttpRequest 对象可以用于异步发送 HTTP 请求和接收 HTTP 响应。以下是使用 XMLHttpRequest 对象发送 GET 和 POST 请求的示例代码：
// 发送 GET 请求var xhr = new XMLHttpRequest();xhr.open('GET', '/api/data');xhr.onload = function() {if (xhr.status === 200) {console.log(xhr.responseText);} else {console.error('请求失败：' + xhr.status);}};xhr.send();// 发送 POST 请求var xhr = new XMLHttpRequest();xhr.open('POST', '/api/data');xhr.setRequestHeader('Content-Type', 'application/json');xhr.onload = function() {if (xhr.status === 200) {console.log(xhr.responseText);} else {console.error('请求失败：' + xhr.status);}};var data = { name: 'John', age: 30 };xhr.send(JSON.stringify(data));
使用 fetch API
fetch API 是现代 Web 应用程序中常用的用于发送 HTTP 请求的方法。以下是使用 fetch API 发送 GET 和 POST 请求的示例代码：
// 发送 GET 请求fetch('/api/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));
除了 XMLHttpRequest 和 fetch API，还有一些其他的 HTTP 请求库，比如 Axios、Superagent 等，它们的使用方法类似于 fetch API，这里就不再赘述了。需要注意的是，发送 HTTP 请求时需要注意跨域问题，如果请求的 URL 和当前页面的 URL 跨域，则需要使用 JSONP 或 CORS 等技术来解决跨域问题。
以下是一个完整的示例，展示如何使用 JavaScript 发出 HTTP 请求并处理响应：
使用 XMLHttpRequest：
<html><head><title>HTTP 请求示例</title></head><body><button onclick="sendRequest()">发起请求</button><div id="response"></div><script>function sendRequest() {const xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.onload = function () {if (xhr.status === 200) {document.getElementById('response').textContent = xhr.responseText;} else {document.getElementById('response').textContent = '请求失败';}};xhr.onerror = function () {document.getElementById('response').textContent = '发生了错误';};xhr.send();}</script></body></html>
使用 fetch:
<!-- index.html --><html><head><title>HTTP 请求示例</title></head><body><button onclick="sendRequest()">发起请求</button><div id="response"></div><script>function sendRequest() {fetch('https://api.example.com/data').then(function (response) {if (response.ok) {return response.text();} else {throw new Error('请求失败');}}).then(function (data) {document.getElementById('response').textContent = data;}).catch(function (error) {document.getElementById('response').textContent = error.message;});}</script></body></html>
这些示例将在点击"发起请求"按钮后发送一个 GET 请求到 https://api.example.com/data，并将响应数据显示在页面上。请将 URL 替换为实际的 API 端点或数据源路径以进行测试。
在Vue.js中如何使用？
当在 Vue.js 中进行 HTTP 请求时，可以使用 axios 或者 Vue.js 内置的 vue-resource 库进行处理。以下是使用 axios 和 vue-resource 进行 HTTP 请求的示例。
使用 axios:
首先需要安装 axios：
npm install axios然后在 Vue 组件中使用 axios 进行 HTTP 请求：
<template><div><button @click="sendRequest">发起请求</button><div>{{ response }}</div></div></template><script>import axios from 'axios';export default {data() {return {response: '',};},methods: {sendRequest() {axios.get('/api/data').then((response) => {this.response = response.data;}).catch((error) => {console.error(error);});},},};</script>
使用 vue-resource:
首先需要安装 vue-resource：
npm install vue-resource然后在 Vue 组件中使用 vue-resource 进行 HTTP 请求：
<template><div><button @click="sendRequest">发起请求</button><div>{{ response }}</div></div></template><script>import Vue from 'vue';import VueResource from 'vue-resource';Vue.use(VueResource);export default {data() {return {response: '',};},methods: {sendRequest() {this.$http.get('/api/data').then((response) => {this.response = response.body;}).catch((error) => {console.error(error);});},},};</script>
在以上示例中，点击"发起请求"按钮将使用对应的库发起 GET 请求到 /api/data，并将响应数据存储在组件的 response 数据属性中，然后在页面上显示。请根据实际需求修改请求的 URL 和处理响应的逻辑