Ajax trouble: Header posting 4 blank lines onto xml = error

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Ajax trouble: Header posting 4 blank lines onto xml = error

Post by intergroove »

I'm having problems trying to get an Ajax engine up & running. It is just a simple one - but my get() function seems to be causing trouble.

De-bugging - there seems to be a problem with the php header function:

Code: Select all

header("Content-Type: application/xml; charset=UTF-8");
It is causing 4 blank lines to be added at the start of my produced XML giving the error:
XML Parsing Error: xml declaration not at start of external entity
Location: http://www.kickinmusic.com/sns/classes/ ... s_test.php
Line Number 4, Column 1:<?xml version="1.0" encoding="ISO-8859-1" ?>
^
I'm pretty sure this is leading to my "request.responseXML has no properties" error.

I know the db connection is working as the XML is being produced but I can't get any further than proving that.

I'm very new to javascript/Ajax, any help would be greatly appreciated.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

header() normally doesn't add lines to the body of the document. Can you post more of your code?
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Post by intergroove »

OK, the XML error seems to have been a red-herring.

I have just tried on Firefox and get some partial successes at retreaving the XML - so it must be my IE7 ActiveX:

Code: Select all

function createRequestObject()
{
	if(window.XMLHttpRequest)
	{
		obj = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		obj = new ActiveXObject("MSXML2.XMLHTTP");
	}
	return obj;
}
I'm getting my XMLHttpRequest but not the ActiveXObject - what are the possible issues here?

This is my first play with Ajax...but need to use it for my next build.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

try this:

Code: Select all

if (window.XMLHttpRequest){
  reqsend = new XMLHttpRequest();
}else{
  reqsend = new ActiveXObject("Microsoft.XMLHTTP");
}
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Post by intergroove »

I have tried:

Code: Select all

if (window.XMLHttpRequest){ 
  reqsend = new XMLHttpRequest(); 
}else{ 
  reqsend = new ActiveXObject("Microsoft.XMLHTTP"); 
}
But this method still returns the responseXML.documentElement 'undefined'
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

:arrow: to Client Side (since its about AJAX and all).
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

reqsend = new XMLHttpRequest();
Should work for IE7 since it uses a native object instead of ActiveX AFAIK.

Maybe you should debug the server side output first - check what it is outputting before putting all the blame on getting an XMLHttpRequest object properly...
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Post by intergroove »

to Client Side (since its about AJAX and all)...
Sorry - I'm pretty sure my troubles are server side.

I have got my code working on one server - the problems where with not explicitly coding $_GET and using mysl_query instead of mysql_db_query - I don't quite understand the reasons why - but I'm happy to ignore it.

I have now copied the code to the server I need it on, and though it is identical to the working code - again it is coiming back with the error:
Error: xml declaration not at start of external entity
Source Code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
^
This is the XML test date pulled then formatted from the MySQL db

Code: Select all

<?xml version="1.0" encoding="ISO-8859-1" ?>
<posts>
<post>
<id>1</id>
<date>2006-10-19 01:02:03</date>
<title><![CDATA[Testing #1]]></title>
<description><![CDATA[mn kjdbsvsvd vsdvkjdsv dsvovj dvkjodsvkm sdkvoubsdv  sv
sdvsdvbsdjov sv sv sdvs
dvds vsdpkv ldv ksdv kdsvk s]]></description>
</post>
</posts>
When I view the XML (in Firefox) from the working server there is no space at the top of the display, however the not-working XML seems to have a gap at the top but this isn't selectable or copyable.

Could it be something to do with the PHP version? - I'm not sure what it is (I'm finding out) on the not-working server but it is PHP5 on the working one.
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Post by intergroove »

Just found out:
My 'code not working' server has PHP 4.3.10 and MySQL 3.23.35
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Post by intergroove »

Oh yeah: Server is Unix, OS: Linux 2.2.26

The server the code is working on is a Windows Server 2003 OS.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'm still waiting on seeing this code.
intergroove
Forum Commoner
Posts: 32
Joined: Wed Oct 11, 2006 4:42 pm

Post by intergroove »

feyd | 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]


This is my Post.class.php:

Code: Select all

<?

class Post
{
	var $table;
	
	function Post()
	{
		require_once('../dbconnection.php');
		$this->table = "testtable";
	}
	
	function dbConnect()
	{
		DEFINE ('LINK', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
	}
	
	function get()
	{
		$this->dbConnect();
		$query = "SELECT * FROM $this->table ORDER BY id desc";
		$result = mysql_db_query (DB_NAME, $query, LINK);
		
		$xml = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>\n";
		$xml .= "<posts>\n";
		while($row = mysql_fetch_array($result))
		{
			$xml .= "<post>\n";
			$xml .= "<id>" . $row['id'] . "</id>\n";
			$xml .= "<date>" . $row['date'] . "</date>\n";
			$xml .= "<title><![CDATA[" . $row['title'] . "]]></title>\n";
			$xml .= "<description><![CDATA[" . $row['description'] . "]]></description>\n";
			$xml .= "</post>\n";
		}
		$xml .= "</posts>";
		mysql_close();
		
		header("Content-Type: application/xml; charset=UTF-8");
		echo $xml;
	}
	
	function save($id, $title, $description)
	{
		$this->dbConnect();
		$query = "SELECT * FROM $this->table WHERE id='$id'";
		$result = mysql_db_query (DB_NAME, $query, LINK);
		if (mysql_num_rows($result) > 0)
		{
			$query = "UPDATE $this->table SET title='$title', description='$description', date=NOW() WHERE id='$id'";
			$result = mysql_db_query (DB_NAME, $query, LINK);
			//$result = @mysql_query($query);
		}
		else
		{
			$query = "INSERT INTO $this->table (title, description, date) VALUES ('$title', '$description', NOW())";
			$result = mysql_db_query (DB_NAME, $query, LINK);
			//$result = @mysql_query($query);
		}
		mysql_close();
		$this->get();
	}
	
	function delete($id)
	{
		$this->dbConnect();
		$query = "DELETE FROM $this->table WHERE id='$id'";
		$result = mysql_db_query (DB_NAME, $query, LINK);
		mysql_close();
		$this->get();
	}

}

?>
Which feeds into my request.js:

Code: Select all

function makeRequest(url)
{
	sendRequest(url, onResponse);
}

function sendRequest(url, callbackMethod)
{
	request = createRequestObject();
	request.onreadystatechange = callbackMethod;
	request.open("POST", url, true);
	request.send(url);
}

function createRequestObject()
{
	if(window.XMLHttpRequest)
	{
		obj = new XMLHttpRequest();
	}
	else 
	{
		obj = new ActiveXObject("MSXML2.XMLHTTP");
	}
	return obj;
}

function checkReadyState(obj)
{
	if(obj.readyState == 0) { document.getElementById('loading').innerHTML = "Sending Request..."; }
	if(obj.readyState == 1) { document.getElementById('loading').innerHTML = "Loading..."; }
	if(obj.readyState == 2) { document.getElementById('loading').innerHTML = "Loading..."; }
	if(obj.readyState == 3) { document.getElementById('loading').innerHTML = "Loading..."; }
	if(obj.readyState == 4)
	{
		if(obj.status == 200)
		{
			document.getElementById('loading').innerHTML = "";
			return true;
		}
		else
		{
			document.getElementById('loading').innerHTML = "HTTP " + obj.status;
		}
	}
}
My onResponse function:

Code: Select all

function onResponse() 
{
	if(checkReadyState(request))
	{
		document.getElementById('posts').innerHTML = "...";
		var	response = request.responseXML.documentElement;
		
		var _post = response.getElementsByTagName('post');

		
		
		if(response == null)
		{
			document.getElementById('posts').innerHTML = "There are currently no available posts.<br/>Click the \"add a post\" button above to add a new post";	
		}
		
		var postDisplay = "style='display:block'";
		var formPostDisplay = "";
		
		for(var i=0; i<_post.length; i++)
		{
			var _title = response.getElementsByTagName('title')[i].firstChild.data;
			var _description = response.getElementsByTagName('description')[i].firstChild.data
			var _date = response.getElementsByTagName('date')[i].firstChild.data;
			var _id = response.getElementsByTagName('id')[i].firstChild.data;
			
			if(_title == "" && _description == "")
			{
				postDisplay = "style='display:none'";
				formPostDisplay = "style='display:block'";
			}
			else
			{
				postDisplay = "style='display:block'";
				formPostDisplay = "style='display:none'";	
			}
			
			var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
					+ "<div class='title' id='title_"+ i +"'>"+ _title +"</div>"
					+ "<div class='description' id='description_"+ i +"'>"+ _description +"</div>"
					+ "<div class='date' id='date_"+ i +"'>"+ _date +"</div>"
					+ "<a href=\"javascript:toggle('"+ i +"');\">edit this post</a><br/>"
					+ "</div>"
					+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +">"
					+ "<div class='title'><input type='text' name='title' id='formTitle_"+ i +"' size='60' value='"+ _title +"'></div>"
					+ "<div class='description'><textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' rows='15'>"+ _description +"</textarea></div>"
					+ "<div class='date'>"+ _date +"</div>"
					+ "<input type='button' name='cancel' value='cancel' onclick=\"javascript:toggle('"+ i +"');\">"
					+ "<input type='button' name='delete' value='delete this post' onclick=\"javascript:deletePost("+ _id +");\">"
					+ "<input type='button' name='submit' value='save this post' onclick=\"javascript:saveNewPost("+ _id +","+ i +");\">"
					+ "</div>"
					+ "<p>&nbsp;</p>";
			
			document.getElementById('posts').innerHTML += html;
		}
	}
}

As I said, all of this works on my Win 2003 Server, but not on the Linux. I have set up identical tables in MySQL.


feyd | 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]
Post Reply