How to send and receive Form Data by Javascript

Question

First consider this: StackoverFlow link.

Here, Ajax is used to open an Xhttp channel to the server, and send some data to the php script file using post method. I have a perl script file inside CGI-bin, but that should work too.

I want to send the data via Javascript to the Perl script, and receive it back without the page refreshing, so I did this:

Javascript:

var basepath = "localhost";
var req = new XMLHttpRequest();

req.open("POST", basepath+"/perlweb/lox.pl", false);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send("script="+this.script);

req.onreadystatechange = function(){     
    // execute this when ready state changes, i.e. server responds
    if (req.readyState == 4 && req.Status == 200) {
        // we got what we wanted
        console.log(req.responseText);
    }
}

lox.pl is my script name. It is in /perlweb under localhost.

I have created this file in the same place under the name test.pl:

#! /path/to/perl
print "Content-type: text/plain\n\n";
print "it now works\n";

Calling this with /localhost/perlweb/test.pl produces the expected output. So I am thinking perl is ready as well.

Now, back to the javascript I have two things:

I have this warning :

Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/

Translates to : Synchronous XMLHttpRequest in main thread should not be used any more, because it can have sustainable effects (?? sic) for the final result of the end users.

I want to get rid of this, but I am not aware, where to start. Looking up the link xhr.spec.whatwg.org is confusing me. That seems like a full specification document.

Could anyone please simply point me to what I am supposed to do?

And I have this error:

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

Although the file exists in my own machine (because the file exists in my own machine, I am assuming that I am not going to hit the CORS issue).

What is then causing the problem?

score 4 · Accepted Answer · edited May 23 '17 at 11:51

To send asynchronously, change

req.open("POST", basepath+"/perlweb/lox.pl", false); // false - sync

to

req.open("POST", basepath+"/perlweb/lox.pl", true);  // true - async

async - An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send() method does not return until the response is received. (Ref)

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

This is why you are getting the warning "Synchronous XMLHttpRequest in main thread should not be used any more".

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

I suggest changing

var basepath = "localhost";

to either

var basepath = "http://localhost";  or
var basepath = "/localhost";

because, if I'm not mistaken, you want to open either a URL, or a local path on your machine, but "localhost" by itself is probably neither.

If you are still having this error, please see "NS_ERROR_DOM_BAD_URI: Access to restricted URI denied"

How to send and receive Form Data by Javascript

1 Answers1