I'm practicing writing Ajax scripts that talk to mysql. I wrote two buttons that, when clicked, use ajax to talk to mysql. I had the "Show Databases" button working fine. It called the "show_mysql_databases.html" script successfully (an apache directive tells apache to go thru html files) .
I added the "Describe Customers Table" button that calls the "describe_customers_table.html script. This button works fine.
Something went wrong after I added the second button. Now, clicking either button calls the "describe_customer_tables" script. Both buttons call the "describe" script. Neither calls the show_mysql_databases script.
There is a line that I didn't write in the code below. I think my avg virus software wrote it. I highlighted the line in bold. I have the SAME problem with this script on another browser that doesn't run Windows XP or AVG antivirus.
The curly brackets for your functions in Javascript are wrong. You end the functions before you start the requests. I think you'll have to move the request part into(!) the functions. The functions themselves only handle the request status changes. This is not correct. This should only be done by onreadystatechange handlers. All of this explains the behaviour that you described.
Code:
function showDatabases() {
var show = encodeURIComponent(document.getElementById("1").value);
var parameters = "conn_to_mysql="+show
request.open("POST", "/cgi-bin/show_mysql_databases.html", true);
request.onreadystatechange = function() {
if(request.readyState == 4){
if(request.status == 200){
var ajaxAnswer=document.getElementById("2");
ajaxAnswer.innerHTML = request.responseText;
}
else
{
alert("No Ajax Zip Code Response");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(parameters);
}
function describeCustomersTable() {
var describe = encodeURIComponent(document.getElementById("3").value);
var parameters = "describe_customers_table="+describe
request.open("POST", "/cgi-bin/describe_customers_table.html", true);
request.onreadystatechange = function() {
if(request.readyState == 4){
if(request.status == 200){
var ajaxAnswer=document.getElementById("4");
ajaxAnswer.innerHTML = request.responseText;
}
else {
alert("No Ajax Zip Code Response");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(parameters);
}
first of all: It's onreadystatechange and not readystatechange
But, more importantly: This is just the way it works, and it works this way with every asynchronous methods you can call from Javascript.
Generally, Javascript is single-threaded. That means that only one thread will run at one given time (= the program flow). When you start a Ajax request it will run "in the background" (mostly on server side). When something happens with the request, the status of the request changes and the "normal program flow" must be informed about this. This is done by triggering the event "readystatechange" on the request object. The function that you assign to the onreadystatechange property will be called when this event is triggered.
So if you omit the request.onreadystatechange = function() {...} part you'll check for the readyState == 4 immediately. But this will never work since the request is still running (readyState will always be 1 there).
Thanks for the explanation. It makes sense. I'll repeat some of what you said in my own words.
Once javascript sends the key=value pair(in a post request) to the server script, it waits for the script to send an answer or response. Without the onreadystatechange event handler, the javascript if(readystate and status) function runs one time and does so immediately.
"Immediately" is usually a point in time that is before the script has done its work and sends a response.
If the server side script does not have a response ready before the if(readyState and status) function fires (it fires "immediately"), the function fires one time only and too soon to receive the response from the server.
The chain of events that make ajax work is broken. The onreadystatechange event waits until the time is right, then runs the nested if statements contained within it.
Only one ajax process can be run at a time, because it is single threaded. All of this makes sense. Thanks for pointing out the typo. I had it right in the script, so it works.
Once javascript sends the key=value pair(in a post request) to the server script, it waits for the script to send an answer or response.
No, it's exactly the opposite. It does not wait for anything, it just continues with the next line of code regardless of what the state of the request is.
Quote:
the javascript if(readystate and status) function runs one time
This is just an if statement and not a function. But you're right, the statement runs only once and it does that immediately after the request started but definitely before the request finishes.
Quote:
The onreadystatechange event waits until the time is right, then runs
It doesn't wait. It's being called ("triggered") by a status change of the request.
Quote:
Only one ajax process can be run at a time, because it is single threaded
Javascript is single threaded. But you can send more than one request to the same or different servers before another request has finished. So "Ajax" is not single threaded, just Javascript.
Thank you - one more question, if you're willing...
In your first response you showed me the proper way to write the function. The first and last lines only are shown below to minimize typing:
Code:
function showDatabases() {
var show = encodeURIComponent(document.getElementById("1").value);
request.send(parameters);
}
This function runs onclick. If I wanted it to run automatically on page load, without the user clicking on anything, would I simply have to remove this part:
Code:
function showDatabases(){
}
and put the rest in script tags like this?
Code:
<script type = "text/javascript">
var show = encodeURIComponent(document.getElementById("1").value);
request.send(parameters);
</script>
The first and last lines only are shown below to minimize typing
So you mean all of the code, but you only show two lines? I ask because the two lines alone won't do anything good :-)
Anyway, taking the code out of the function will only work if you move the code below the content of your page (maybe right before the closing </body> tag)
I know the entire code is needed to do the job. I haven't learned how to quote part of someone elses response, on this forum, in my own post yet. I just wrote the two lines to save myself some typing. I assumed you would know what I was referring to.
I understand every detail counts - especially in programming. One wrong or omitted thing can crash a script.
Thanks again for taking the time. You helped a lot.
To DanInMA: The ID inside getElementById() or element ID's in general should not start with a number? Could you explain that a little more?
Last edited by milesdriven; 04-02-2012 at 09:30 PM..
In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.
Before you post, read our: 
