AJAX XMLHttpRequest issues
Posted: Tue Jun 26, 2007 2:51 pm
The Ninja Space Goat | Please use
The Ninja Space Goat | Please use[/syntax]
Code: Select all
,Code: Select all
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>Code: Select all
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;
}The Ninja Space Goat | Please use[/syntax]
Code: Select all
,Code: Select all
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]