Read web page into an array

[Redline]

I've written a php script to read my current winamp playlist. I need to write javascript to call upon http://josh.avclan.net/playlist.php and read the output into an array of song titles. I don't have a problem doing it in php, but I don't do much javascript, so if anyone can help me out, that'd be fantastic.

I plan to throw this bit of javascript onto my myspace page, otherwise I'd just stick with php

Thanks

[sde]

i have json installed on the server. you can convert a php to a javascript array string by using this:

PHP Code:

<?
$array = array('apple', 'orange', 'pear');
echo json_encode($array);
?>

then u can use some ajax stuff like this:

<script>
// start ajax stuff
var xmlHttp;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function startRequest(method, URL) {
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open(method, URL, true);
	xmlHttp.send(null);
}

function handleStateChange() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			processResponse(xmlHttp.responseText);
		}
	}
}

function processResponse(response) {
	my_songs = eval(response);

}
// end ajax stuff

// initialize your song array
var my_songs;

// make ajax request
startRequest('GET', 'my_php_script.php');

// now my_songs is set to your php array
</script>

[Redline]

Thanks Mike, I'm really close to getting this working. The only problem is that my_songs is still "undefined", it isn't getting set to anything, and ajax is greek to me. Arg...

You can see the php version of it at http://josh.avclan.net/ though

[sde]

i can't test it myself right now, but try moving the 'var my songs' line to the top.

[Redline]

Yeah I thought of that, didn't change anything. Am I correct in pointing the startRequest() function to http://josh.avclan.net/playlist.php ?

The xmlHttp.readyState never changes to 4, it is still 1 when the page loads. I'm trying to look up information on ajax to figure it out though

[sde]

change the processResponse to this to make sure it is being triggered and you are getting output:

function processResponse(response) {
  alert(response);
  my_songs = eval(response);

}

another thing you may want to try is initialize the song var to an empty array

var my_songs = new Array();

[Redline]

processResponse isn't getting triggered because xmlHttp.readyState = 1 and doesn't seem to change. I stripped out the if statements in handleStateChange(), but obviously if the readyState isn't changing from 1, there's no data to eval()

I'm assuming a readyState of 1 means the code isn't able to render the page? Any idea why that would be? It wouldn't have to do with security or permissions would it?

[sde]

are you running the page locally? there could be a browser security issue. make sure the files are uploaded to the server. i just tested this code and it works.

test.html

["First Song","Second Song"]

mypage.html

<script language="javascript">
var my_songs = new Array();

// start ajax stuff
var xmlHttp;

function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function startRequest(method, URL) {
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open(method, URL, true);
	xmlHttp.send(null);
}

function handleStateChange() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			processResponse(xmlHttp.responseText);
		}
	}
}

function processResponse(response) {
	my_songs = eval(response);
	
	for( x in my_songs ) {
		alert( my_songs[x] );
	}
}

// make ajax request
startRequest('GET', 'test.html');
</script>

[Redline]

Awesome, it's working now. Not sure what I was doing wrong before, though I might have been trying to access the my_songs array outside of the scope of processResponse. Maybe if I had made it global, I wouldn't have had any issues?

Either way, it works great now. Thanks again Mike

[sde]

now that you have a little AJAX structure setup, you can get creative with your song list.

for example, you can use a javascript timeout function to re-call startRequest every 20 seconds or so. Then your songlist could refresh without the browser refreshing.

i'm not sure how much other information winamp provides, but you could probably do some cool stuff.

[Redline]

I'm interfacting with a pre-existing plugin which turns winamp into a web server. It can accept requests to control playback, change playlists, turn up the volume etc. Basically the plugin allows you to turn winamp into a remote-controlled media player.

If I can figure it out, I'll add play controls to the script, and maybe even configure it to stream audio.

[Redline]

Dammit. Myspace doesn't support javascript. Go figure. Let's see if I can find a language that myspace will allow.

[teknomage1]

Why not make your own blog elsewhere, then all your myspace friends will be jealous.

[Redline]

Well, that's actually what I'm working on and the reason why I wrote the php side of it in the first place. My blog is a work in progress and it's placeholder is here: http://josh.avclan.net

I just wanted to get it working on myspace to see if I could do it, and I'd probably be the first person to have something like that on his myspace...but for security reasons they can't allow javascript support on myspace. Bastards.