Обработка запроса POST или GET без сервера

Question

Я просматривал следующую статью:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

Здесь проиллюстрирована концепция AJAX, однако для простой иллюстрации вместо подключения к серверу используется контентизвлекается из системы, в которой есть браузер.

Таким образом, в следующих строках кода из вышеупомянутой ссылки:

var url = verse + '.txt';
var request = new XMLHttpRequest();
request.open('GET', url);

Здесь глагол GET предназначен для извлечения содержимого файла в локальной системе, и там нет никакого сервера.

Аналогичным образом, используя javascript и при отсутствии сервера, мы можем добавить некоторые параметры в глагол GET или POST и запустить код в локальной системе, который обрабатывает эти параметры и отправляет вывод.

Например:

var url =  'verse + '.txt' + '?' 'name = ' + 'vim' ; //Adding parameters

и будет какой-то файл javascript, который принимает эти параметры "name" и возвращает его в верхнем регистре, как "VIM".

Можетмы делаем что-то подобное, используя только Javascript (не nodejs или что-то, что настраивает сервер ") без прослушивания сервера?

Answer 1

Для выполнения требования вы можете использовать браузер Chromium или Chrome, запущенный с установленным флагом --allow-file-access-from-files.

fetch() не разрешает запрашивать локальные файлы с протоколом file:, а XMLHttpRequest() - нет.fetch() позволяет запрашивать data URL и Blob URL.

Для

некоторый файл javascript, который принимает эти параметры «name» и возвращает его в верхнем регистре, например «VIM».«

Worker можно использовать для получения содержимого локального файла, манипулирования содержимым, затем можно вызвать postMessage() для связи с основным потоком.

Например,

worker.js

onmessage = e => {
  // do stuff
  let url = new URL(e.data);
  let [[,param]] = [...url.searchParams]; // get query string parameter `'vim'`
  let request = new XMLHttpRequest();
  request.open('GET', 'file:///path/to/local/file' /* e.data */);
  request.onload = e => {
    console.log(request.responseText); // `setTimeout()` can be inside `load` handler
  }
  request.send();
  // asynchronous response
  setTimeout(() => {
    // set `data URL` that `fetch()` will request
    postMessage(`data:text/plain,${param.toUpperCase()}`);
  }, Math.floor(Math.random() * 2000));
}

В console или в пределах script

const localRequest = async(url) => {
  const request = await fetch(await new Promise(resolve => {
    const worker = new Worker('worker.js');
    worker.onmessage = e => {
      resolve(e.data);
      worker.terminate();
    }
    worker.postMessage(url);
  }));
  const response = await request.text();
  console.log(response);
}

localRequest('file:///verse.txt?name=vim');