探索 XMLHttpRequest：网页与服务器的异步通信之道（下）
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
四、XMLHttpRequest 的优缺点强调 XMLHttpRequest 的异步特性带来的好处讨论可能遇到的跨域请求限制
五、实际应用示例提供一些使用 XMLHttpRequest 的实际代码示例
六、总结总结 XMLHttpRequest 的重要性和用途
四、XMLHttpRequest 的优缺点
强调 XMLHttpRequest 的异步特性带来的好处
XMLHttpRequest 的异步特性带来了以下几个好处：
提高用户体验：异步请求允许用户在发送请求后继续与页面进行交互，而不必等待请求完成。这意味着用户可以在请求进行的同时继续浏览页面、填写表单或执行其他操作，而不会被请求的处理过程阻塞。 避免页面卡顿：如果请求是同步的，即在请求完成之前页面会被阻塞，用户将无法进行任何其他操作，这可能导致页面卡顿或失去响应。异步请求则可以避免这种情况，确保页面的流畅性和响应性。 提升性能：异步请求允许在后台进行数据加载或其他处理，而不会阻塞页面的主线程。这可以提高页面的整体性能，因为用户可以继续与页面进行交互，而不必等待长时间的请求处理。 增强并发性：通过异步请求，可以同时发送多个请求并并行处理它们。这有助于提高应用程序的效率和响应能力，特别是在需要获取多个数据或与多个服务器进行通信的情况下。 更好的错误处理：异步请求使得错误处理更加灵活。如果请求失败或发生错误，可以在回调函数中进行相应的错误处理逻辑，而不会导致整个页面崩溃或失去响应。
总而言之，XMLHttpRequest 的异步特性对于构建现代、高效和用户友好的 Web 应用程序至关重要。它提供了更好的用户体验、性能和并发处理能力，同时也使开发人员能够更灵活地处理请求和响应。
讨论可能遇到的跨域请求限制
当使用 XMLHttpRequest 进行跨域请求时，可能会遇到一些限制。以下是一些常见的跨域请求限制：
同源策略：浏览器的同源策略限制了脚本只能访问与当前页面来源相同的域名、协议和端口。这意味着，如果你尝试从一个域发送请求到另一个域，浏览器将会阻止该请求，除非目标域明确允许跨域请求。 CORS（跨域资源共享）：为了解决跨域请求的限制，CORS（跨域资源共享）是一种 W3C 标准，它允许服务器明确指定哪些起源可以进行跨域请求。服务器可以通过在响应中设置适当的头部来指示是否允许跨域请求。 预检请求：在某些情况下，浏览器在发送实际的跨域请求之前会发送一个预检请求（OPTIONS 请求）。预检请求用于检查服务器是否允许跨域请求，并获取相关的权限信息。如果服务器响应中没有正确设置 CORS 头部，或者拒绝了跨域请求，那么实际的请求将不会被发送。 受限的头部：在跨域请求中，一些头部信息可能受到限制，例如 Cookie、Set-Cookie 和 Authorization 头部。这是为了防止泄露敏感信息或进行跨站请求伪造（CSRF）攻击。 证书和 SSL 问题：如果跨域请求涉及到安全连接（如 HTTPS），可能会遇到证书验证和 SSL 相关的问题。如果服务器的 SSL 证书不受信任或存在其他问题，跨域请求可能会失败。
要解决跨域请求限制，可以采取以下一些常见的方法：
使用适当的 CORS 设置：在服务器端设置适当的 CORS 头部，明确允许跨域请求来自特定的起源。 避免使用受限的头部：尽量避免在跨域请求中发送敏感的头部信息，或者使用适当的授权机制来传递必要的信息。 确保 SSL 连接正常：如果跨域请求涉及到安全连接，确保服务器的 SSL 证书是有效的，并且受信任。 使用 JSONP：如果目标服务器不支持 CORS，或者你无法控制服务器端的设置，可以考虑使用 JSONP（JSON with Padding）作为一种替代方法来进行跨域请求。
需要注意的是，跨域请求限制是为了保护用户的安全和隐私，因此在处理跨域请求时需要谨慎考虑，并遵循适当的安全措施和最佳实践。
五、实际应用示例
提供一些使用 XMLHttpRequest 的实际代码示例
以下是一些使用 XMLHttpRequest 的实际代码示例，涵盖了一些常见的用例：
简单的 GET 请求：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 在这里处理响应
console.log(response);
}
};
xhr.send();
这个示例发送了一个 GET 请求到指定的 URL，并在 onreadystatechange 事件处理程序中处理响应。当请求完成（readyState 为 4）且响应状态码为 200 时，通过 responseText 属性获取响应内容。
带参数的 POST 请求：
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");
var data = {
name: "John Doe",
age: 30
};
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 在这里处理响应
console.log(response);
}
};
xhr.send(JSON.stringify(data));
这个示例发送了一个 POST 请求到指定的 URL，并将一个 JSON 对象作为请求体的数据。在 onreadystatechange 事件处理程序中处理响应。
设置请求头：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.getResponseHeader("Content-Type");
// 在这里处理响应头
console.log(response);
}
};
xhr.send();
这个示例在发送请求之前使用 setRequestHeader() 方法设置了一个请求头。然后，在响应的 onreadystatechange 事件处理程序中，通过 getResponseHeader() 方法获取响应头，并进行处理。
这些示例只是 XMLHttpRequest 的一些基本用法，你可以根据自己的需求进行扩展和修改。请注意，XMLHttpRequest 已经被较新的 Fetch API 所取代，但 XMLHttpRequest 在一些旧的浏览器或特定场景下仍然可以使用。
六、总结
总结 XMLHttpRequest 的重要性和用途
XMLHttpRequest（简称 XHR）在 Web 开发中具有重要的作用，它提供了一种在浏览器中与服务器进行异步通信的方式，使得网页能够在不刷新整个页面的情况下，动态地获取和更新数据。以下是 XMLHttpRequest 的一些重要性和用途：
异步请求：XMLHttpRequest 允许网页在后台与服务器进行通信，而不会阻塞用户与页面的交互。这意味着用户可以继续在页面上进行其他操作，而请求在后台进行，提高了用户体验。 按需获取数据：通过 XMLHttpRequest，网页可以根据需要动态地从服务器获取数据，而不必在页面加载时一次性获取所有数据。这对于大型数据集或需要实时更新的数据非常有用。 实现动态网页：XMLHttpRequest 使得网页能够实时地与服务器交互，从而实现动态内容的展示，如实时数据更新、搜索结果的异步加载等。 构建 Web 应用程序：XMLHttpRequest 是构建现代 Web 应用程序的基础。它支持常见的 Web 应用程序架构，如单页应用程序（SPA）和 RESTful 服务。 改善性能：由于 XMLHttpRequest 可以按需获取数据，减少了不必要的数据传输，从而提高了网页的性能和加载速度。 与后端技术集成：XMLHttpRequest 可以与各种后端技术集成，如 PHP、Python、Node.js 等。它提供了一种通用的方式来与服务器进行数据交换。
尽管 XMLHttpRequest 已经逐渐被较新的技术（如 Fetch API 和 Axios 等库）所取代，但它仍然是理解和掌握 Web 开发中异步通信和数据获取的重要概念。对于一些旧的浏览器或特定的应用场景，XMLHttpRequest 仍然具有实用价值。
