This is mostly a copy paste from a project (loading data from mysql asynchronously) I was working some month ago. I changed it a little bit to your needs, I have put some comments for you, and creted a new file (getData.php).
I haven't gone exactly in detail with downloading movies, however it downloads an image, and uploads it, pretty much the same process, hope you can adjust it to your needs.
put these two file in a directory and run index.php
This is the firs file: index.php
<html>
<head>
<script type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
<script type="text/javascript">
function getData()
{
//inform the user for to wait a little bit
var txt=document.getElementById("messageBox")
txt.innerHTML="Please wait for the image to download...";
//we will call asychronously getData.php
var url = "getData.php";
var params = "";//no url parameters
request.open("POST", url, true);//use post for connect harder to attack, lots of data transfer
//Some http headers must be set along with any POST request.
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = updatePage;
request.send(params);
}////////////////////
//You're looking for a status code of 200 which simply means okay.
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200)
{
//getData.php sends as the image size, get it
var r=request.responseText.split("$");//$ is a custom data separator I use
//inform the user
var txt=document.getElementById("messageBox")
txt.innerHTML="The file was downloaded! Its size is:"+r[0]+"x"+r[1]+" the name is:"+r[2];
/*r is a javascript array, 0=width, 1=height, 2=file name
*/
//display the image
document.getElementById("imageBox").style.width = r[0] + 'px';
document.getElementById("imageBox").style.height = r[1] + 'px';
document.getElementById("imageBox").style.backgroundImage = "url("+r[2]+")";
}
else{
//alert("status is " + request.status);
}
}
}
</script>
</head>
<body onload="getData();">
<div id='messageBox'></div>
<div id='imageBox'></div>
<font color=red>
You see I am under the image but I am already loaded cause
I don't have to wait for the image to load cause it loads asychronously.
Whenever the image is ready the xmlhttp mechanism will let the page
know and the associated javascript function will update the dom and will
update the page without reloading it!
</font>
</body>
</html>
This is the second file getData.php
<?PHP
//make a name for the file
$file_name = rand(1,9999).'.jpg';
//download the file
file_put_contents($file_name, file_get_contents('http://chachatelier.fr/programmation/images/mozodojo-original-image.jpg'));
//get the size of the image
$size = getimagesize($file_name);
//send asycnhronously the width, height, and the name
echo $size[0],'$',$size[1],'$',$file_name;
?>