Page 1 of 1

AJAX XMLHttpRequest issues

Posted: Tue Jun 26, 2007 2:51 pm
by dan.kotowski
The Ninja Space Goat | Please use

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]

Posted: Tue Jun 26, 2007 3:00 pm
by Luke
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.

Posted: Tue Jun 26, 2007 4:13 pm
by dan.kotowski
I'm already using Firebug as it comes with Aptana, and yes they are in the same domain.

Posted: Tue Jun 26, 2007 9:19 pm
by JellyFish
Aptana looks pretty cool. Why the bleep haven't I heard of this by now? : :evil:

Posted: Tue Jun 26, 2007 10:17 pm
by bdlang
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.

Speaking of which...

Code: Select all

function getQuery(str) {
        queryValue = str;
        showSelection(queryValue);
}

function showSelection() {
I find it odd that your getQuery() function shows showSelection() as taking a parameter.

You should also consider not registering queryValue as global either.

Posted: Wed Jun 27, 2007 7:44 am
by dan.kotowski
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.

Code: Select all

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;
}

Posted: Wed Jun 27, 2007 8:02 am
by dan.kotowski
I just added a few breakpoints in the code to see what's going on and it seems as though the ready state is never getting past 1.

Posted: Wed Jun 27, 2007 8:25 am
by Gente
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:

Code: Select all

function ajax_request(page)
{
		var xmlhttp;
		
		if (window.XMLHttpRequest) 
		{
				try
				{
					xmlHttp = new XMLHttpRequest() 
				}
				catch(e) 
				{}
		}
		else if (window.ActiveXObject) 
		{
				try
				{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") 
				}
				catch(e) {}
				if (!xmlHttp) 
					try
					{
						xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") 
					}
					catch (e) {}
		}
		
		if(!xmlHttp)return;
		xmlHttp.open("POST",page,true);
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.send(null);
		xmlHttp.onreadystatechange = function() 
		{
			if (xmlHttp.readyState == 4)
			{
				if (xmlHttp.responseText == "")
				{
					// Code
				}
				else
				{
					// Code
				}
			}
		}			
}

Posted: Wed Jun 27, 2007 8:39 am
by dan.kotowski
Thanks a bunch! Finally got it working as a single script. I still haven't figured out why it didn't work before, but now it does.

Code: Select all

/**
 * @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);
}