在没有服务器的情况下处理POST或GET请求

Question

I was going through the following article :

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

Here , the concept of AJAX is being illustrated however , for simple illustration ,instead of connecting to the server ,the content is being fetched from the system which has the browser in it .

So in the following code lines from the above mentioned link :

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

Here a GET verb is to fetch the contents of the file in the local system and no server is present there .

Similarly , by using javascript and in the absence of a server can we add some parameters to GET or POST verb and run a code in the local system which processes these parameters and sends an output .

Like :

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

and there will be some javascript file , which takes these parameter "name " and returns it in uppercase , like "VIM " .

Can we do anything like that using Javascript only (not nodejs or anything that sets up a server " ) without server listening ?

Answer 1

To achieve the requirement you can use Chromium or Chrome browser launched with --allow-file-access-from-files flag set.

fetch() does not permit requesting local files having file: protocol, though XMLHttpRequest() does. fetch() does allow requesting data URL and Blob URL .

For

some javascript file , which takes these parameter "name " and returns it in uppercase , like "VIM "

Worker can be used to get the contents of a local file, manipulate the content, then postMessage() can be called to communicate with main thread.

For example

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));
}

At console or within a 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');