2

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 ?

  • Yes, the requirement is possible. – guest271314 Feb 01 '19 at 18:58
  • I don't think it is. Yes, you can access a file from the local filesystem - but you need to run some code in order to get a different result depending on the query parameters, and for that you need a server. (It might just be localhost, but that's still a server.) – Robin Zigmond Feb 01 '19 at 19:01
  • @guest271314 : hope in the meanwhile you are writing an answer to the how part ... :) – private ryan Feb 01 '19 at 19:03
  • @RobinZigmond : Can I execute a file from the local filesystem ? – private ryan Feb 01 '19 at 19:03
  • One approach using jQuery would be to use `beforeSend` option of `$.ajax()`. Response can be adjusted in any way. Request can be parsed using `URLSearchParams()` and converted to uppercase before the request is made. Are there any restrictions as to what is not allowed to meet requirement? – guest271314 Feb 01 '19 at 19:05
  • `Can I execute a file from the local filesystem ?` - Not with client-side Javascript, no. Although you can use Ajax to access a local file, this isn't JS that's doing it - it's the browser, by reading the URL. And that's obviously not going to execute any code. For example, if you have a `.php` file in your computer, you can't just point your browser at it and have the PHP script execute. You can if you've installed something like XAMPP, but that's because that installs a server on your local system which is configured to execute PHP scripts. Without a server, you can't execute any code. – Robin Zigmond Feb 01 '19 at 19:10
  • @guest271314 - you're right, that would work, but it doesn't interact with any files, which I think is what the OP is asking about? Obviously you can do any string manipulations in client-side JS. – Robin Zigmond Feb 01 '19 at 19:11
  • @RobinZigmond Technically a file can be executed from the local filesystem, using various approaches. At Chrome/Chromium either Native Messaging or requestFileSystem can be used. For the purpose of this question what needs to be clearly defined are the restrictions to achieve the requirement. – guest271314 Feb 01 '19 at 19:12
  • @guest271314 - OK, I stand corrected, if you can show me an example :) – Robin Zigmond Feb 01 '19 at 19:12
  • I would not say that I understood completely what guest271314 suggested . I need a GET request or a POST request for a file to be made , that file in local filesystem would process the request and return the uppercase. Here I am using request in server-less sense – private ryan Feb 01 '19 at 19:16
  • @guest271314 : I am using Google chrome in a windows 10 system – private ryan Feb 01 '19 at 19:18
  • Maybe ..if there is some way to execute some visual basic code from internet explorer or any othe microsoft browsers .. – private ryan Feb 01 '19 at 19:19
  • @RobinZigmond [How to Write in file (user directory) using JavaScript?](https://stackoverflow.com/questions/36098129/how-to-write-in-file-user-directory-using-javascript/); [How to programmatically send a unix socket command to a system server autospawned by browser or convert JavaScript to C++ souce code for Chromium?](https://stackoverflow.com/questions/48219981/). Once Native Messaging host is activated JavaScript code can be used to call native executables – guest271314 Feb 01 '19 at 19:19
  • @privateryan Have not used ms browsers in some time. – guest271314 Feb 01 '19 at 19:21
  • @guest271314 : Ok – private ryan Feb 01 '19 at 19:25
  • @privateryan See https://github.com/jdiamond/chrome-native-messaging. Another option is to use `EventSource` [What HTTP Method does EventSource use to open a connection?](https://stackoverflow.com/q/48372650/) where `stream` can be process be an asynchronous operation before setting the value at `Blob` instance. – guest271314 Feb 01 '19 at 19:27
  • See also this answer where an ES6 module could be used to achieve the requirement https://stackoverflow.com/a/48217124/. Again, defining restrictions as to what is allowable to achieve requirement is necessary. – guest271314 Feb 01 '19 at 19:34
  • @privateryan Also, a `Response` object can be created and read client-side [Get HTTP Body of Form in JavaScript](https://stackoverflow.com/questions/40111982/get-http-body-of-form-in-javascript/) – guest271314 Feb 01 '19 at 19:42

1 Answers1

0

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');
guest271314
  • 1
  • 15
  • 104
  • 177
  • I need to go through this in a thorough manner ... but please do take a bow from my side for exploring through this topic and offering a solution . – private ryan Feb 02 '19 at 07:17