JavaScript 调用后台方法的方式有多种，包括AJAX请求、Fetch API、WebSocket、RESTful API、GraphQL等。这些方法各自有不同的应用场景和优缺点。下面将详细介绍其中一种常用的方法：AJAX请求。
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够与服务器交换数据的技术。AJAX 的核心在于 XMLHttpRequest 对象，它使网页能够在后台与服务器进行通信，并根据服务器的响应动态更新网页内容。尽管 AJAX 的名字中包含 XML，但现代应用中更多是使用 JSON 格式的数据。
一、AJAX请求
AJAX 是一种非常常见的前端与后端交互的方式，它可以在不刷新网页的情况下，与服务器进行异步数据交换。AJAX 的核心在于 XMLHttpRequest 对象，它可以发送 HTTP 请求，并处理服务器的响应。
1、基本概念
AJAX 是一种创建快速动态网页的技术。通过使用 XMLHttpRequest 对象，网页能够在后台与服务器进行通信，并根据服务器的响应动态更新网页内容，而不需要重新加载整个页面。这不仅提高了用户体验，还可以减少服务器负担。
2、优点
用户体验提升：无需刷新页面，用户操作更加流畅。
减少服务器压力：只需加载需要更新的数据，节省带宽和服务器资源。
更灵活的界面更新：可以局部更新页面，提供更灵活的用户界面。
3、缺点
复杂性增加：前后端通信逻辑较为复杂，需要处理各种异常情况。
SEO问题：对于一些搜索引擎爬虫而言，动态加载内容可能不易抓取。
浏览器兼容性：尽管现代浏览器大多支持，但一些老旧浏览器可能存在兼容性问题。
4、使用方法
下面是一个简单的 AJAX 请求示例，它通过 GET 方法从服务器获取数据：
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 定义请求方法和 URL
xhr.open('GET', 'https://api.example.com/data', true);
// 设置请求头（如果需要）
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听响应事件
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 请求成功，处理响应数据
var response = JSON.parse(xhr.responseText);
console.log(response);
} else {
// 请求失败，处理错误
console.error('请求失败：' + xhr.statusText);
}
}
};
// 发送请求
xhr.send();
在这个示例中，我们首先创建了一个 XMLHttpRequest 对象，然后通过 open 方法定义了请求的类型（GET）和目标 URL（https://api.example.com/data）。接着，通过 setRequestHeader 方法设置了请求头（如果需要）。之后，定义了一个 onreadystatechange 事件处理函数，用于监听请求的状态变化，并处理服务器的响应数据。最后，通过 send 方法发送请求。
5、POST请求示例
除了 GET 请求，AJAX 还可以用于发送 POST 请求。下面是一个发送 POST 请求的示例：
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 定义请求方法和 URL
xhr.open('POST', 'https://api.example.com/data', true);
// 设置请求头（如果需要）
xhr.setRequestHeader('Content-Type', 'application/json');
// 监听响应事件
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 请求成功，处理响应数据
var response = JSON.parse(xhr.responseText);
console.log(response);
} else {
// 请求失败，处理错误
console.error('请求失败：' + xhr.statusText);
}
}
};
// 发送请求，包含请求数据
var requestData = JSON.stringify({ key: 'value' });
xhr.send(requestData);
在这个示例中，我们通过 open 方法定义了 POST 请求，并设置了请求头为 'Content-Type: application/json'。在发送请求时，我们通过 send 方法将 JSON 格式的请求数据发送到服务器。
二、FETCH API
Fetch API 是现代浏览器中 AJAX 的替代品，它提供了更优雅和简洁的方式来进行异步 HTTP 请求。Fetch API 基于 Promise，可以更方便地处理异步操作。
1、基本概念
Fetch API 是一种基于 Promise 的现代浏览器 API，用于进行 HTTP 请求。与 XMLHttpRequest 相比，Fetch API 更加简洁和现代化，提供了更好的错误处理机制和更灵活的请求配置。
2、优点
基于 Promise：更好地支持异步操作和链式调用。
简洁的语法：代码更简洁、更易读。
更好的错误处理：Promise 的 reject 可以捕获网络错误，而不会将其视为成功的响应。
3、缺点
兼容性问题：旧版浏览器可能不支持，需要使用 polyfill。
默认不发送 cookies：需要手动配置 credentials 选项。
4、使用方法
下面是一个简单的 Fetch API 请求示例，它通过 GET 方法从服务器获取数据：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
在这个示例中，我们通过 fetch 方法发送 GET 请求，并通过 then 方法处理响应数据。response.ok 用于检查响应状态，如果不成功则抛出一个错误。最后，通过 catch 方法捕获并处理错误。
5、POST请求示例
Fetch API 也可以用于发送 POST 请求。下面是一个发送 POST 请求的示例：
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
在这个示例中，我们通过 fetch 方法发送 POST 请求，并在配置对象中指定了请求方法、请求头和请求体。响应和错误处理机制与 GET 请求类似。
三、WEBSOCKET
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，适用于需要频繁数据交换的实时应用，如聊天应用、在线游戏等。与传统的 HTTP 请求相比，WebSocket 提供了更低的延迟和更高的效率。
1、基本概念
WebSocket 是一种基于 TCP 的通信协议，能够在单个连接上进行全双工通信。这意味着客户端和服务器可以同时发送和接收数据，而无需等待对方的响应。WebSocket 连接建立后，客户端和服务器之间可以保持长时间的连接，适用于需要实时数据更新的应用场景。
2、优点
低延迟：相对于 HTTP 请求，WebSocket 提供了更低的延迟，适用于实时应用。
高效率：在单个连接上进行全双工通信，减少了连接建立和关闭的开销。
长时间连接：客户端和服务器之间可以保持长时间的连接，适用于需要频繁数据交换的应用。
3、缺点
复杂性增加：需要处理连接的建立、维护和关闭，以及各种异常情况。
兼容性问题：某些防火墙和代理服务器可能不支持 WebSocket 协议。
资源消耗：长时间保持连接可能会消耗服务器和客户端的资源。
4、使用方法
下面是一个简单的 WebSocket 客户端示例，它连接到服务器并处理消息：
// 创建 WebSocket 对象
var socket = new WebSocket('wss://example.com/socket');
// 监听连接打开事件
socket.onopen = function (event) {
console.log('WebSocket connection opened:', event);
// 发送消息到服务器
socket.send('Hello, Server!');
};
// 监听消息事件
socket.onmessage = function (event) {
console.log('Message from server:', event.data);
};
// 监听连接关闭事件
socket.onclose = function (event) {
console.log('WebSocket connection closed:', event);
};
// 监听错误事件
socket.onerror = function (error) {
console.error('WebSocket error:', error);
};
在这个示例中，我们首先创建了一个 WebSocket 对象，并连接到服务器（wss://example.com/socket）。通过 onopen 事件处理函数监听连接打开事件，并发送消息到服务器。通过 onmessage 事件处理函数监听服务器发送的消息，并进行处理。通过 onclose 和 onerror 事件处理函数监听连接关闭和错误事件，并进行相应处理。
四、RESTful API
RESTful API 是一种基于 HTTP 协议的设计风格，用于构建网络应用。RESTful API 通过标准的 HTTP 方法（如 GET、POST、PUT、DELETE 等）进行操作，并使用 URL 表示资源。
1、基本概念
REST（Representational State Transfer）是一种架构风格，用于设计网络应用。RESTful API 是基于 REST 架构风格的 API，通过标准的 HTTP 方法操作资源，并使用 URL 表示资源。RESTful API 具有简单、统一的接口设计，易于理解和使用。
2、优点
简单易懂：基于 HTTP 协议，使用标准的 HTTP 方法，易于理解和使用。
无状态：每个请求都是独立的，不需要服务器保存客户端的状态，简化了服务器设计。
资源表示：通过 URL 表示资源，清晰明了。
3、缺点
性能问题：由于每个请求都是独立的，可能会有性能开销。
实时性差：不适用于需要实时数据更新的应用场景。
复杂操作困难：对于一些复杂的操作，可能需要多个请求才能完成。
4、使用方法
下面是一个使用 Fetch API 调用 RESTful API 的示例，它通过 GET 方法从服务器获取资源：
fetch('https://api.example.com/resource')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
在这个示例中，我们通过 fetch 方法发送 GET 请求，从服务器获取资源，并通过 then 方法处理响应数据。response.ok 用于检查响应状态，如果不成功则抛出一个错误。最后，通过 catch 方法捕获并处理错误。
5、POST请求示例
下面是一个使用 Fetch API 调用 RESTful API 的示例，它通过 POST 方法向服务器发送资源：
fetch('https://api.example.com/resource', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
在这个示例中，我们通过 fetch 方法发送 POST 请求，并在配置对象中指定了请求方法、请求头和请求体。响应和错误处理机制与 GET 请求类似。
五、GRAPHQL
GraphQL 是一种用于 API 的查询语言，由 Facebook 开发。与 RESTful API 相比，GraphQL 更加灵活，客户端可以指定需要的数据字段，避免了过多或过少的数据传输。
1、基本概念
GraphQL 是一种用于 API 的查询语言，允许客户端指定需要的数据字段，避免了过多或过少的数据传输。GraphQL 提供了灵活的查询和变更操作，客户端可以根据需要组合查询，获取所需的数据。
2、优点
灵活性高：客户端可以指定需要的数据字段，避免了过多或过少的数据传输。
单一端点：所有查询和变更操作都通过单一端点进行，简化了 API 设计。
强类型系统：GraphQL 提供了强类型系统，便于错误检查和调试。
3、缺点
学习成本高：需要学习新的查询语言和操作方式。
复杂性增加：需要处理复杂的查询和变更逻辑。
性能问题：对于一些复杂的查询，可能会有性能开销。
4、使用方法
下面是一个使用 Fetch API 调用 GraphQL API 的示例，它通过查询获取数据：
const query = `
query {
user(id: "1") {
id
name
}
}
`;
fetch('https://api.example.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ query })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
在这个示例中，我们通过 fetch 方法发送 POST 请求，并在配置对象中指定了查询语句。响应和错误处理机制与其他请求类似。
5、变更操作示例
下面是一个使用 Fetch API 调用 GraphQL API 的示例，它通过变更操作修改数据：
const mutation = `
mutation {
updateUser(id: "1", input: { name: "New Name" }) {
id
name
}
}
`;
fetch('https://api.example.com/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ query: mutation })
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
在这个示例中，我们通过 fetch 方法发送 POST 请求，并在配置对象中指定了变更操作语句。响应和错误处理机制与其他请求类似。
六、总结
JavaScript 调用后台方法有多种方式，包括 AJAX 请求、Fetch API、WebSocket、RESTful API 和 GraphQL。每种方法有不同的应用场景和优缺点。在选择合适的方法时，需要根据具体的需求和应用场景进行权衡。
AJAX 请求：适用于需要在不刷新页面的情况下与服务器进行通信的场景。优点是提高用户体验，减少服务器压力；缺点是复杂性增加，可能存在 SEO 和浏览器兼容性问题。
Fetch API：是现代浏览器中 AJAX 的替代品，提供了更优雅和简洁的方式进行异步 HTTP 请求。优点是基于 Promise，语法简洁，错误处理更好；缺点是旧版浏览器可能不支持，默认不发送 cookies。
WebSocket：适用于需要频繁数据交换的实时应用。优点是低延迟，高效率，长时间连接；缺点是复杂性增加，兼容性问题，资源消耗。
RESTful API：是一种基于 HTTP 协议的设计风格，用于构建网络应用。优点是简单易懂，无状态，资源表示清晰；缺点是性能问题，实时性差，复杂操作困难。
GraphQL：是一种用于 API 的查询语言，允许客户端指定需要的数据字段。优点是灵活性高，单一端点，强类型系统；缺点是学习成本高，复杂性增加，性能问题。
根据具体的需求和应用场景，可以选择合适的方法来调用后台方法，实现高效的前后端交互。在团队项目管理中，推荐使用 研发项目管理系统 PingCode 和 通用项目协作软件 Worktile，以提高团队协作效率和项目管理水平。
相关问答FAQs：
1. 如何在JavaScript中调用后台方法？JavaScript可以通过使用AJAX技术来调用后台方法。AJAX允许在不刷新整个页面的情况下与服务器进行通信。您可以使用XMLHttpRequest对象来发送异步请求，并在收到响应后更新页面内容。
2. 在JavaScript中如何使用AJAX来调用后台方法？您可以创建一个XMLHttpRequest对象，并使用open()方法指定请求的类型（GET或POST）和URL。然后，使用send()方法发送请求，并通过onreadystatechange事件监听请求的状态变化。当readyState值为4且status值为200时，表示请求成功，您可以通过responseText或responseXML属性获取服务器的响应数据。
3. 如何将后台方法的结果显示在网页上？一旦收到后台方法的响应，您可以通过JavaScript将结果显示在网页上。您可以选择使用DOM操作来动态创建、修改和删除HTML元素，以反映后台方法的结果。例如，您可以使用createElement()方法创建新的HTML元素，然后使用appendChild()方法将其添加到页面中的适当位置。您还可以使用innerHTML属性来设置元素的内容，以显示后台方法的结果。
原创文章，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2598797