need ajax help

[craigt]

Hello,
I'm working in dhtml (html, CSS, JavaScript, and Perl) using the latest Apache / mod_perl server on Windows 10. I don't seem to be able to get ajax to work. I'm trying to 'get' a multiline file (directory and file name) out of a database location. I'm thinking that the response text will return a string of lines separated by new lines (\n). I've tried the w3 simplest approach, jquery, and d3. The w3 approach is below.

   var mFn = document.forms[0]['thefdir'].value + 'Measures/all.mea?t=' + Math.random(); // Unique ID bypasses cache.

   var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'dog.txt', true);
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     fieldName3.value = this.responseText;
    }
    };    
    xhttp.send();

Its executed onChange to a field on a form generated by a Perl CGI program. The fieldName3.value would be processed downstream in the JS. I've tried it with the fully qualified location (mFn) and a relative location (dog.txt) with 1 line in it. Neither worked. I don't know what directory the relative location resolves to. So I put a copy in the server root and the cgi-bin directories. It did not work. Nothing happens and no error information.

Any help will be appreciated.
craigt

[NickMNS]

What you posted is not jQuery it is simply Javascript. If you are using plain Javascript you may want to consider the Fetch api. One caveat is that it is not supported by IE.

[developer.mozilla.org...]
[developer.mozilla.org...]

[craigt]

Yes, the w3 example ( [w3schools.com ] ) is JavaScript. I have also tried jQuery and d3.

W3 says that ajax is supported by all major browsers today and the example is what I would like to do. And it is their 1st and simplest example. They talk about Fetch as being a more modern approach, but indicate the above should be solid cross browser.

Is there something wrong with the w3 approach? The example is an html file and my JavaScript is called in a Perl/CGI file. My JS is in the header. The w3 JS is in the body. Are these problems?

I need a cross browser solution.

ct

[NickMNS]

So Fetch is out of the question.

What exactly is the problem? What error does the browser throw when you run the script?

[craigt]

No errors are produced. I get the first alert and nothing else happens. The dog.txt file has 1 line in it. I've tried to address it fully qualified and relatively as below. The data file I really want is the mFn location below. It is a multi-line file, and I was expecting the lines to be returned as a string separated by line ends ('\n').

var mFn = document.forms[0]['thefdir'].value + 'Measures/all.mea?t=' + Math.random(); // Unique ID bypasses cache.

alert('here');
var fieldName3;
var xhttp = new XMLHttpRequest();
xhttp.open('GET', 'dog.txt', true);
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
fieldName3.value = this.responseText;
}
};
xhttp.send();
alert(fieldName3.value);

[NickMNS]

No errors are produced

OK, so what is in the response returned by the request?
Also are using the console? It is preferrable to use console.log() instead of alert. The console.log display a message in the developer console of the browser. It allows you to get a better idea of the timing of the message and errors.

I regards to the my question "what is returned by the request", if you go to the network tab in developer console of the browser it will show you the request, including all the headers and data sent to the server, as well as the contents of the response with it's header and data. So what is shown there?

[craigt]

this.responseText is undefined. ct

[craigt]

I'll adjust the alerts and look at the network tab.
.

[craigt]

The console does have some errors. I should have looked there first. It looked simple and the same in several places. I know thats no excuse. I'll get back.

[craigt]

NickMNS, hello again. I was quite frustrated and confused by the behavior I saw yesterday while trying the JavaScript/ajax methods from W3 (simplest), jQuery, and d3. I ran all 3 methods again (after talking with you) in the 5 browsers (Chrome, Edge, FF, IE, and Opera) I'm testing in.

The same behavior and errors occurred both times I've been through this. All 3 method do the same thing. If I run without diagnostics (alerts), none of the 3 methods runs in any of the 5 browsers. They fail on the split and kick a console error.

However if I put alerts after the ajax code to print the data brought back from the server AND print out say the 0 position of the split array, the data field is undefined, the array locations contain what they should, the test and error message works as it should in FF and IE only and no error are produced.. The other 3 browsers still fail on the split. When FF and IE work, the console contains the file of lines and notebook++ tells me that each line but the last is ended with a CRLF. If I take the alerts out, those 2 browsers fail and the errors reappear.. The code follows.

var fieldValue3;

var xhttp = new XMLHttpRequest(); // W3.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
fieldValue3 = this.responseText;
}
};
xhttp.open('GET', 'http://steepusa.no-ip.info/dog.txt', true);
xhttp.send();

\ $.get({ // jQuery.
url: 'http://steepusa.no-ip.info/dog.txt',
success: function(response) {
console.log(response);
fieldValue3 = response;
}
});

alert(fieldValue3);

fv3Arr = fieldValue3.split('\\r\\n'); // Create array.
alert(fv3Arr[0]);

fv3Len = fv3Arr.length;

Its been sort of strange. Any suggestions will be appreciated. Again, the javascript above is called onchange from a Per/cgi program. I'm on a Windows 10 platform running Apache and mod_perl. The OS, server technology, language interpreter, and browsers are current version.

ct

[craigt]

The console.log() shows that all browsers bring the data from the server. But I don't seem to be able to work with the data. The split fails in all browsers.
The exceptions to this are FF and IE when I insert alerts as above. Then these 2 browsers allow the split. Its like I need to translate the data from ajax into javascript somehow to work with it.

[NickMNS]

The console.log() shows that all browsers bring the data from the server.

This is good you know that the XMLHttpRequest works.

But I don't seem to be able to work with the data.

What does the data look like?

The split fails in all browsers.

If the split fails, then that is a pretty good starting point.
Maybe the your lines do not end with ('\\r\\n') try to split on '\n' only.

I wouldn't worry too much about other browsers now. Getting working in one place and then worry about the others.

[craigt]

The data in the console and finally in an alert looks like a multi-line file where each line ends in a CRLF, as verified by Notepad++. This is what the file on the server is.

Apparently, with the asynchronous request, the downstream javascript gets executed before the request from the server completes. When I change it to a synchronous request it worked as hoped in all 5 browsers. So I ether have to 1) be able to make the JS process wait until the onreadystatechange assignment has completed or 2) accept the synchronous execution. I have read several cautions about 2. The file is small, the activity is aperiodic and increasingly infrequent, and the synchronous effect will be very brief. What do you think about 1 or 2.

And thanks for working with me. I apologize for opening this when I did. I could have done a lot more first.

[craigt]

Putting all my down stream code in the onreadystatechange function worked for the asynchronous request.