JS使用ajax方法获取指定url的head信息中指定字段值的方法

要使用JS获取指定URL的Head信息中指定字段值，需要使用Ajax方法，具体操作流程如下：

1. 创建XMLHttpRequest对象

XMLHttpRequest对象是用于在后台与服务器交换数据的核心技术之一，能够在不刷新页面的情况下更新网页的局部信息。

const xhr = new XMLHttpRequest();

1. 用open方法指定请求信息

open方法用于指定HTTP请求的相关参数，其中第一个参数表示发送请求的方式（GET或POST），第二个参数是要请求的地址，第三个参数可选，用于指定请求是否异步（默认为true）。

xhr.open('HEAD', url, true);

1. 添加事件监听

添加ReadyStateChange事件监听，当服务器返回响应时会触发该事件。在事件监听中使用status属性可以获取响应的状态码。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理响应内容
  }
}

1. 发送请求

使用send方法发送请求，如果是GET请求，参数可以为空；如果是POST请求，需要将参数通过send方法传递。

xhr.send();

1. 解析响应内容

通过getAllResponseHeaders方法可以获取响应头信息，然后通过正则表达式匹配到指定字段的值。

const headers = xhr.getAllResponseHeaders();
const regex = /Content-Length:\s*(\d+)/i;
const match = regex.exec(headers);
const length = match[1];

下面给出两个完整的示例：

1. 获取指定URL的Content-Type字段值

const url = 'https://www.baidu.com';
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const headers = xhr.getAllResponseHeaders();
    const regex = /Content-Type:\s*(.+)\s*;?/;
    const match = regex.exec(headers);
    const contentType = match[1];
    console.log(contentType);
  }
}
xhr.send();

1. 获取指定URL的Content-Length字段值

const url = 'https://www.baidu.com';
const xhr = new XMLHttpRequest();
xhr.open('HEAD', url, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const headers = xhr.getAllResponseHeaders();
    const regex = /Content-Length:\s*(\d+)/i;
    const match = regex.exec(headers);
    const length = match[1];
    console.log(length);
  }
}
xhr.send();