AJAX、XMLHttpRequest 及 BOM

2023-12-31 23:47:31

在软件开发中，浏览器对象模型 (BOM) 提供了用于与浏览器交互的 API，而 XMLHttpRequest 是一种 JavaScript 对象，允许对 Web 服务器执行 HTTP 请求，而不需要页面重新加载。利用这些技术，您可以构建具有更高交互性的应用程序。本文将介绍这些技术的基础知识以及如何利用它们进行 Web 开发。

BOM 基础知识

BOM 是一个包含浏览器对象集合的 JavaScript 对象，其中包括文档对象、窗口对象、屏幕对象、历史对象等。通过 BOM，您可以访问浏览器中的各种信息，如 URL、页面大小、屏幕尺寸，并且可以在浏览器中进行各种操作，如打开或关闭窗口、导航到新的页面，或者操作历史记录。

例如，可以使用以下代码来获取当前页面所在的 URL：

const url = window.location.href;

XMLHttpRequest 基础知识

XMLHttpRequest 是一个 JavaScript 对象，允许您发送 HTTP 请求并接收响应，而不需要重新加载页面。这使得您可以与 Web 服务器进行异步通信，从而创建更具交互性的应用程序。

例如，可以使用以下代码发送一个 GET 请求：

const request = new XMLHttpRequest();
request.open('GET', 'https://example.com/api/data');
request.send();

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    console.log(data);
  }
};

跨域请求

在大多数情况下，XMLHttpRequest 请求只能发送到与当前页面同源的服务器。同源意味着协议、主机和端口都必须相同。然而，有时候您可能需要发送请求到不同的源，这就是跨域请求。

跨域请求受到浏览器同源策略的限制，这是一种安全措施，旨在防止恶意脚本访问其他域的数据。为了允许跨域请求，您需要在服务器端进行一些配置，如设置 CORS 头。

示例：使用 BOM 和 XMLHttpRequest 加载外部数据

以下是使用 BOM 和 XMLHttpRequest 加载外部数据的示例：

const url = 'https://example.com/api/data';

const request = new XMLHttpRequest();
request.open('GET', url);
request.send();

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);

    const list = document.createElement('ul');
    for (const item of data) {
      const li = document.createElement('li');
      li.textContent = item.name;
      list.appendChild(li);
    }

    document.body.appendChild(list);
  }
};