and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
I've been trying to learn AJAX and how to use the XMLHttpRequest and have it pull data from a MySQL database using PHP. When I load the php page manually in Firefox I can use it to query the database and it works fine, but as soon as I try to use JavaScript to load the php page, I get nothing. I loaded the source into Aptana and started it up in debug mode, and I can see that the PHP page is actually returning the right data, but for some reason I can't get the data to add to the page.
index.html
[syntax="html"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Fun!</title>
<script type="text/javascript" src="script.js" />
</head>
<body>
<p>AJAX Test...</p>
<p>Make a selection below to do things.</p>
<a href="javascript:getQuery('1')">Query 1</a>
<a href="javascript:getQuery('2')">Query 2</a>
<div id="txtHere">This will change when you select something</div>
</body>
</html>
script.js
/**
* @author Dan Kotowski
*/
var xmlHttp;
var queryValue;
function getQuery(str) {
queryValue = str;
showSelection(queryValue);
}
function showSelection() {
xmlHttp=GetXmlHttpObject();
if (xmlHttp===null) {
alert ("Your browser does not support AJAX and this page will not function correctly.");
return;
}
var url="http://localhost/~administrator/query.php?q="+queryValue;
xmlHttp.open('GET',url,true);
xmlHttp.onReadyStateChange=stateChanged();
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHere").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject() {
xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Are the PHP and javascript on the same domain name? What browser are you using? If you have firefox, try firebug for debugging your scripts... it's awesome.
I would suggest that your problem stems from the fact that you create xmlHttp as a global variable. Once the request has been made it's done. Eliminate the reference to xmlHttp outside your showSelection function.
I changed the code to conform to what you said (at least I think I did), but it still doesn't work. It's getting the request and retrieving the data. When I set up a system to send me an alert for what the readySate was it always returned something along the order of readyState never having been set.
function getQuery(queryValue) {
var xmlHttp=GetXmlHttpObject();
xmlHttp.overrideMimeType("text/html");
if (xmlHttp===null) {
alert ("Your browser does not support AJAX and this page will not function correctly.");
return;
}
var url="http://localhost/~administrator/query.php?q="+queryValue;
xmlHttp.open('GET',url,true);
xmlHttp.onReadyStateChange=stateChanged(xmlHttp);
xmlHttp.send(null);
}
function stateChanged(theObject) {
if (theObject.readyState==4) {
document.getElementById("txtHere").innerHTML=theObject.responseText;
}
}
function GetXmlHttpObject() {
var theRequest=null;
try {
// Firefox, Opera 8.0+, Safari
theRequest=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
theRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
theRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return theRequest;
}
I think the best way to debug your code is following.
Put everything in one function and the if you didn't like it try break your code step by step.
Here is an example from the one of my sites:
/**
* @author Dan Kotowski
*/
function getQuery(queryValue) {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert ("Your browser does not support AJAX and this page will not function correctly.");
return;
}
}
}
if (xmlHttp===null) {
alert ("Your browser does not support AJAX and this page will not function correctly.");
return;
}
xmlHttp.overrideMimeType("text/html");
var url="http://localhost/~administrator/query.php?q="+queryValue;
xmlHttp.open('GET',url,true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState==4) {
document.getElementById("txtHere").innerHTML=xmlHttp.responseText;
}
}
xmlHttp.send(null);
}