谷歌插件开发:XMLHttpRequest 详解(手把手带你从零探索开发谷歌插件)

3,131 阅读14分钟

我正在参加「掘金·启航计划」

Google插件开发提供了丰富的API,其中XMLHttpRequest是一个强大而重要的API,用于进行异步HTTP请求。本节将详细介绍XMLHttpRequest的基本概念和核心功能,并深入探讨其在Google插件开发中的作用和重要性。我们将逐步解析XMLHttpRequest的运行方式、配置选项和常见应用场景,帮助您全面理解和掌握这一API,并为进一步深入学习和开发提供方法和指导。

课程目录(暂定18节)

后续可持续关注此贴,目录路径都会补上,点击即可跳转前往

  1. 序章:拓展技术池,一起来探索谷歌插件吧!
  2. 插件结构:manifest.json 配置文件详解
  3. 实战开发:创建自己的第一个Google插件
  4. 插件结构:background.js 文件详解
  5. 进阶高级:Browser Action API 详解
  6. 进阶高级:Tabs Manager API 详解
  7. 谷歌插件开发:content.js 文件详解
  8. 谷歌插件开发:Content Script API 详解
  9. 谷歌插件开发:Message Passing API 详解
  10. 谷歌插件开发:Storage API 详解
  11. 谷歌插件开发:File System Access API 详解
  12. 谷歌插件开发:XMLHttpRequest 详解
  13. 进阶高级:Bookmarks API 详解
  14. 进阶高级:Downloads API 详解
  15. 进阶高级:如何使用vue来开发一款Google插件
  16. 实战开发:从零开发一款企业级Google插件(上)
  17. 实战开发:从零开发一款企业级Google插件(下)
  18. 收官之作:总结与展望

一. 基本介绍

在开始探索XMLHTTPRequest之前,我们首先需要了解其基本概念。XMLHTTPRequest是一种在Web浏览器中用于与服务器进行异步通信的技术。它可以发送HTTP请求并接收来自服务器的响应,而无需刷新整个页面。这种异步通信的能力为Web应用程序提供了更加动态和交互式的用户体验。

作用

XMLHttpRequest 是一种在 JavaScript 中进行网络通信的技术,它可以通过发送 HTTP 请求与服务器进行数据交互。它的主要作用有:

  1. 发送异步请求:XMLHttpRequest 支持异步请求,即在请求发送的同时,JavaScript 可以继续执行其他操作,无需等待响应返回。
  2. 获取数据:通过发送 HTTP 请求,可以从服务器获取数据,如文本、XML、JSON 等格式的数据。
  3. 更新页面内容:获取到的数据可以用于动态更新页面内容,实现无需刷新整个页面的数据更新。
  4. 与服务器进行交互:可以向服务器发送数据,如表单提交、文件上传等,与服务器进行交互。

XMLHTTPRequest在Google插件开发中扮演着重要的角色。它可以用于与后端服务器进行数据交换、获取最新信息、更新内容等。XMLHTTPRequest的强大功能和灵活性使得开发者能够创建出更加智能、响应式的插件,为用户提供更好的体验。通过合理利用XMLHTTPRequest,插件可以实现实时数据更新、远程API调用、文件上传下载等功能,从而增强插件的实用性和功能。

应用场景

XMLHttpRequest 在 Web 开发中有广泛的应用场景,比如:

  1. AJAX 请求: XMLHttpRequest 可以实现异步加载数据,从服务器获取最新的数据并动态更新页面内容,提升用户体验。
  2. RESTful API 调用: 通过 XMLHttpRequest,可以与 RESTful API 进行通信,发送 GET、POST、PUT、DELETE 等请求,并处理响应数据。
  3. 文件上传和下载: 使用 XMLHttpRequest,可以实现文件的异步上传和下载,包括进度显示和取消操作。
  4. 实时通信: XMLHttpRequest 可以与服务器进行长轮询或 WebSocket 连接,实现实时通信功能,如聊天应用、即时通讯等。
  5. 跨域资源请求: 通过 XMLHttpRequest,可以发送跨域请求,获取其他域的数据,实现数据的共享和整合。

XMLHttpRequest 主要提供了以下内容:

字段名描述
open(method, url, async)初始化一个请求,指定请求的方法(GET、POST 等)、URL 和是否使用异步(默认为异步)
setRequestHeader(name, value)设置请求头,可以在发送请求之前设置自定义的请求头信息
send(data)发送请求,可选地传递请求体数据,如 POST 请求的表单数据或 JSON 数据
abort()取消当前的请求
getResponseHeader(name)获取指定名称的响应头信息
getAllResponseHeaders()获取所有的响应头信息
onreadystatechange用于设置请求状态改变时的回调函数,可以在此函数中处理响应数据

需要注意的事项 ⚠️

  • 在发送跨域请求时,需要注意浏览器的同源策略。跨域请求需要服务器端设置适当的 CORS 头部,或者使用代理服务器来转发请求。
  • 异步请求需要通过事件监听器(如 onreadystatechange)来处理响应数据。在监听器中,可以根据请求的状态(readyState)和 HTTP 状态码(status)来判断请求的完成和成功状态,并处理返回的数据。
  • XMLHttpRequest 可以发送多个连续的请求,但需要注意在前一个请求完成之前不要发送下一个请求,以免出现并发请求导致的问题。
  • 在处理大量数据或文件上传时,需要注意请求的性能和安全性。可以考虑使用流式传输(streaming)或分块上传(chunked upload)来提高效率,并设置适当的安全策略。
  • 为了确保代码的可靠性和兼容性,建议在使用 XMLHttpRequest 时进行错误处理,包括检查请求的错误状态、网络连接错误等,并给用户提供适当的错误提示或回退方案。

二. 主要方法

1. open

open 方法用于初始化一个请求,并指定请求的方法、URL 和是否采用异步方式。它的作用主要有以下几个方面:

  1. 设置请求的方法:通过 open 方法可以指定 HTTP 请求的方法,常见的包括 GET、POST、PUT、DELETE 等。
  2. 指定请求的 URL:可以通过 open 方法传入一个 URL 参数,指定要发送请求的目标 URL。
  3. 配置是否使用异步方式:通过第三个参数 async,可以指定请求是否使用异步方式。异步请求可以在发送请求的同时继续执行其他 JavaScript 代码,提升页面的响应性能。

需要注意的事项 ⚠️

  • 同源策略:由于浏览器的安全策略限制,XMLHttpRequest 请求默认受到同源策略的限制,即只能向同一域名下的资源发送请求。跨域请求需要服务器设置适当的 CORS 头部,或者使用代理服务器来转发请求。
  • 安全性考虑:尤其是在发送包含用户敏感信息的请求时,需要注意保护数据的安全性。使用 HTTPS 协议进行安全的加密传输,避免敏感信息被拦截和篡改。
  • 请求方法的语义:不同的请求方法有不同的语义含义,需要根据具体的业务需求选择合适的请求方法。GET 用于获取资源,POST 用于提交数据,PUT 用于更新资源,DELETE 用于删除资源等。
  • 异步请求的处理:由于 open 方法的第三个参数 async 默认为 true,即使用异步方式发送请求,因此需要通过设置 onreadystatechange 事件监听器来处理请求的状态变化和响应数据。

下面我们做一个简单的示例,看看如何使用 XMLHttpRequest 的 open 方法发送一个 GET 请求:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};
xhr.send();

在上述示例中,我们创建了一个 XMLHttpRequest 对象 xhr,然后调用 open 方法来初始化一个 GET 请求。我们指定了目标 URL 为 'api.example.com/data',并将异步标… true。

接下来,通过设置 onreadystatechange 事件监听器来处理请求的状态变化。当请求状态为 4 且 HTTP 状态码为 200 时,表示请求成功,可以通过 xhr.responseText 获取响应数据。在示例中,我们将响应数据解析为 JSON 格式,并打印在控制台上。

最后,通过调用 xhr.send() 方法发送请求。

在实际应用中,可以根据需要使用不同的请求方法和传递参数。通过修改 open 方法的参数,可以实现不同的请求类型和目标 URL。

2. setRequestHeader

setRequestHeader 方法用于设置请求头,即向即将发送的 HTTP 请求中添加自定义的头部信息。它的作用主要有以下几个方面:

  1. 自定义请求头:通过 setRequestHeader 方法,可以自定义添加请求头信息,例如设置认证信息、指定数据类型、传递自定义标识等。
  2. 传递额外的信息:除了请求参数以外,某些情况下可能需要在请求头中携带额外的信息,如身份验证令牌、用户代理信息等。
  3. 与服务器进行交互:通过设置合适的请求头信息,可以与服务器进行更精确的交互,例如指定接受的数据类型、启用缓存控制等。

需要注意的事项 ⚠️

  1. 合法的头部信息:添加的请求头信息必须符合 HTTP 协议的规范,且不能包含非法字符。遵循标准的请求头信息可以确保与服务器之间的正常通信。
  2. 同源策略:同样受到同源策略的限制,即只能设置来自相同域名的请求头信息。跨域请求需要服务器设置适当的 CORS 头部,或者使用代理服务器来转发请求。
  3. 敏感信息的保护:在设置请求头信息时,需要注意保护敏感信息的安全性。避免在请求头中传递敏感的用户凭证、密码等信息,以免被恶意拦截或泄露。
  4. 请求头冲突:如果设置的请求头信息与浏览器或服务器默认的请求头信息发生冲突,可能会导致请求失败或结果不符合预期。在设置请求头时,需要避免与默认的请求头信息产生冲突。

下面做一个简单的示例,看看如何使用 XMLHttpRequest 的 setRequestHeader 方法来设置自定义的请求头:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer your_token_here');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};
xhr.send();

在上述示例中,我们通过调用 setRequestHeader 方法设置了两个自定义的请求头信息。

第一个请求头是'Content-Type': 'application/json',用于指定请求体的数据类型为 JSON。这对于向服务器发送 JSON 格式的数据是很常见的设置。

第二个请求头是 'Authorization': 'Bearer your_token_here',用于在请求中传递身份验证令牌。这是一种常见的身份验证方式,通过将令牌放置在请求头中,服务器可以验证用户的身份。

在示例中,我们在发送 GET 请求之前使用 setRequestHeader 方法来设置请求头。然后通过 onreadystatechange 事件监听器来处理请求的状态变化和响应数据。

当请求状态为 4 且 HTTP 状态码为 200 时,表示请求成功,可以通过 xhr.responseText 获取响应数据。在示例中,我们将响应数据解析为 JSON 格式,并打印在控制台上。

最后,通过调用 xhr.send() 方法发送请求。

在实际应用中,可以根据具体的需求和业务场景,设置不同的请求头信息。setRequestHeader 方法可以在 open 方法之后、send 方法之前调用,以确保请求头信息正确地添加到请求中。


三. 应用示例

下面我们需要使用XMLHttpRequest 来创建一个可以发送HTTP请求的Google插件,以帮助您更好地理解 XMLHttpRequest 的作用。

还是老样子,先配置好manifest.json:文件:

{
  "manifest_version": 2,
  "name": "HTTP Request",
  "version": "1.0",
  "description": "A plugin to send HTTP requests",
  "permissions": ["http://*/*", "https://*/*"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "HTTP Request"
  }
}

然后再编写background.js文件:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'sendRequest') {
    const xhr = new XMLHttpRequest();
    xhr.open(request.method, request.url, true);

    xhr.onload = function () {
      const response = {
        status: xhr.status,
        responseText: xhr.responseText
      };
      sendResponse({ success: true, response });
    };

    xhr.onerror = function () {
      sendResponse({ success: false, error: 'Failed to send the request' });
    };

    xhr.send(request.body);
    return true;
  }
});

在上面的代码中,我们使用了 Chrome 扩展的消息传递机制 chrome.runtime.onMessage 来监听消息。它使用了 addListener 方法来注册一个消息监听器,以便在收到特定类型的消息时执行相应的操作。

代码中的 addListener 函数用于监听来自扩展或内容脚本发送的消息。当收到消息时,函数中的回调函数会被调用,并且可以访问消息内容、消息发送者的信息以及一个用于向发送者发送响应的回调函数。

在这段代码中,回调函数首先检查收到的消息是否包含一个特定的动作(action)属性,并且该属性的值是 'sendRequest'。如果是这样,代码会创建一个 XMLHttpRequest 对象,并使用收到的消息中的信息设置该对象的请求方法、URL 和是否异步等参数。

接下来,代码定义了两个事件处理函数:xhr.onload 和 xhr.onerror。xhr.onload 函数在请求成功完成时被调用,它将请求的状态码和响应文本保存在一个对象中,并使用 sendResponse 回调函数将成功的响应发送给消息的发送者。而 xhr.onerror 函数则在请求发生错误时被调用,它向消息的发送者发送一个包含错误信息的失败响应。

最后,代码调用 xhr.send 方法来发送请求,并返回 true,表示异步发送请求,并保持消息通道打开,以便后续发送响应。

然后买我们来编写popup.html:页面:

<!DOCTYPE html>
<html>
  <head>
    <title>HTTP Request</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>HTTP Request</h1>
    <form id="request-form">
      <label for="url-input">URL:</label>
      <input type="text" id="url-input" required><br>
      <label for="method-select">Method:</label>
      <select id="method-select">
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
        <option value="DELETE">DELETE</option>
      </select><br>
      <label for="body-input">Body:</label>
      <textarea id="body-input"></textarea><br>
      <button type="submit">Send Request</button>
    </form>
    <div id="output"></div>
  </body>
</html>

这个文件中,我们定义了一个表单和一些相关的输入字段,允许用户输入请求的 URL、请求方法和请求体,并通过点击按钮发送请求。

最后我们再编写popup.js页面,完成功能的开发:

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('request-form');
  const urlInput = document.getElementById('url-input');
  const methodSelect = document.getElementById('method-select');
  const bodyInput = document.getElementById('body-input');
  const outputDiv = document.getElementById('output');

  form.addEventListener('submit', (event) => {
    event.preventDefault();

    const url = urlInput.value;
    const method = methodSelect.value;
    const body = bodyInput.value;

    chrome.runtime.sendMessage({ action: 'sendRequest', url, method, body }, (response) => {
      if (response.success) {
        const responseData = `Status: ${response.response.status}\n\n${response.response.responseText}`;
        outputDiv.innerText = responseData;
      } else {
        outputDiv.innerText = `Error: ${response.error}`;
      }
    });
  });
});

首先我们需要获取页面中的各个元素,包括表单、URL 输入框、方法选择框、请求体输入框和输出结果的

元素,通过元素的 ID 进行获取。

然后为表单添加提交事件的监听器,当用户点击提交按钮时,触发回调函数。在回调函数中,首先调用 event.preventDefault() 来阻止表单的默认提交行为,以便通过 JavaScript 控制请求的发送和结果的展示。

接下来使用 chrome.runtime.sendMessage 方法向扩展发送消息,包含一个对象作为参数。该对象包含了动作(action)、URL、方法和请求体等信息。这样,扩展就能够根据这些信息发送相应的请求。

这段代码主要实现了在用户填写请求信息并点击提交按钮后,将请求信息发送给扩展,并将扩展返回的响应结果展示在页面上。这样用户就可以通过页面上的界面和交互来进行简单的 HTTP 请求操作。

至此,就开发完成了。我们在Chrome浏览器中加载该插件,然后在插件弹出的界面中,填写URL、选择请求方法、填写请求体(可选),然后点击按钮,插件将会发送HTTP请求并显示响应结果:


通过本节的介绍,我们全面探索了XMLHTTPRequest的核心概念、作用和重要性,以及其在Google插件开发中的运行方式、可配置项和常见应用场景。XMLHTTPRequest作为一个强大的异步通信API,为开发者提供了丰富的功能和灵活性,可以实现各种与服务器的交互需求。合理使用XMLHTTPRequest可以大大增强插件的实用性和功能,为用户提供更好的体验。

本节课程源码 📥

链接: pan.baidu.com/s/1FSU04cTk… 提取码: hdsi