Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

help on 1st ajax try

Status
Not open for further replies.

gj165

Programmer
Apr 4, 2001
5
US
I visited the ajax tutorial in w3cschools yesterday, the following html is mostly copied directly from that tutorial:
---------------------------------------------------------------------------
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML= "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange= function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML= xmlhttp.responseText;
}
};
xmlhttp.open("GET", "....cgi-bin/ajax_tst.cgi?str=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a letter in the input field below:</b></p>
<form>
enter a lettr: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>


------------------------------------------------------------
The following perl is my 1st try to run on my server
------------------------------------------------------------
#!/usr/bin/perl
use strict;
use CGI;
our $qq= new CGI;
print $qq->header("text/xml"); # I have tried to not print this, but failed also

my $str=$qq->param("str");

#print "<?xml version='1.0'?><response>you entered $str</response>"; # I tried this one but did not work
#print "you entered $str"; # tried this one also did not work
print "<html><body>you entered $str</body></html>"; # neither this one works

open(OUT,">/var/ # for debugging
print OUT "seeing $str\n"; # I saw the correct result on my server, proving that ajax has transferred the str from browser to server correctly
1;
---------------------------------------------------------------

But this perl did not correctly transfer the result back to the browser,
What is the problem?

Thank you in advnace for helping!
 
Hi

First of all, please enclose the code you post here between [tt][ignore]
Code:
[/ignore][/tt] and [tt][ignore]
[/ignore][/tt] TGML tags.

Then please explain what you mean by "did not correctly transfer the result back". In case your web server's error log mentions something, please post that too. Otherwise would be hard to help, as the code you posted works for me.

A quick checklist in meantime ( please forgive the stupid ones, no idea how familiar you are with the web things ) :
[ul]
[li]You are accessing the CGI script through HTTP protocol.[/li]
[li]Perl interpreter or web server module is installed and the web server is configured to use it.[/li]
[li]The CGI script file has execute permission for the user or group that runs the web server.[/li]
[li]Perl CGI module is installed.[/li]
[/ul]

And a couple of things that I would do differently anyway, though should make no difference in this phase :
[ul]
[li]The CGI response contains HTML, so better say so : [tt]print [navy]$qq[/navy][teal]->[/teal]header[teal]([/teal][green]"text/[highlight]html[/highlight]"[/green][teal]);[/teal][/tt]. ( Yes, this line is needed. )[/li]
[li]The CGI response will be used as part of a HTML document, so send only a HTML fragment, not an entire document : [tt]print [green]"you entered $str"[/green][teal];[/teal][/tt], maybe [tt]print [green]"<p>you entered <b>$str</b></p>"[/green][teal];[/teal][/tt]. ( After the response gets inserted into original document, that should be still valid HTML. )[/li]
[/ul]


Feherke.
feherke.ga
 
Thank you very much for your meticulous explanation.
Now the code on the server is modified as you instructed:
Code:
#!/usr/bin/perl
use strict;
use CGI;
our $qq= new CGI;
print $qq->header("text/html");

my $str=$qq->param("str");

print "your entered:$str";

open(OUT,">/var/[URL unfurl="true"]www/htm/upload/junk.txt");[/URL]
print OUT "seeing $str\n";
1;
(but it still does not work)

Answering your question about CGI: yes I have hundreds of perl CGI programs running for years, except no Ajax yet.
What I meant "did not correctly transfer the result back" is that I did not see what I typed echoing on the invoking browser page.
If ajax runs correctly, after I entered "j", for example, on the web page, a few seconds later I should see the web page showing
"Suggestions:you entered j", buy I didn't see it.

On the server side, I did see "seeing j" in the file junk.txt(that means ajax did transferred "j" from browser to server correctly). Also I checked the server error log there is nothing about this program.
 
Hi

gj165 said:
Answering your question about CGI: yes I have hundreds of perl CGI programs running for years, except no Ajax yet.
Now that you mentioned it, could it be CORS ( Cross-Origin Resource Sharing ) issue ? I mean, are the HTML page that performs the AJAX request and that "....cgi-bin/ajax_tst.cgi" on the same protocol + domain + port ?

If that is the problem, in the browser's console should appear a message like this :
console said:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ..../cgi-bin/ajax_tst.cgi?str=j. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
In such case the CGI script runs without problem, writes to junk.txt, outputs response, but the browser will not allow the JavaScript code to find out anything about it.

And forgot earlier : terminating the Perl file with [tt][purple]1[/purple][teal];[/teal][/tt] ( in other words returning a value that evaluates to true ) is only needed for packages.


Feherke.
feherke.ga
 
yes you are right! I checked the console, it says:

XMLHttpRequest cannot load http:..../ajax_tst.cgi?str=a. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

How to set the requesting html or the browser to allow it?
(where to add: Access-Control-Allow-Origin: http:...my server.com?)


Thanks a million!
 
Hi

Just change the [tt]CGI::header()[/tt] call to return the necessary HTTP response header too :
Code:
[b]print[/b] [navy]$qq[/navy][teal]->[/teal][COLOR=orange]header[/color][teal]([/teal]
  [teal]-[/teal]type [teal]=>[/teal] [i][green]'text/html'[/green][/i][teal],[/teal]
  [teal]-[/teal]access_control_allow_origin [teal]=>[/teal] [i][green]'*'[/green][/i][teal],[/teal]
[teal]);[/teal]

Note that this way any web site will be able to send AJAX request to your server. If you not want to allow that, replace the [tt]*[/tt] with the protocol and domain ( no path ) where the HTML document with the form is.

Feherke.
feherke.ga
 
It works now!

Thanks a million, sincerely, thanks a million!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top