change images in clients browser on my demand

Question

I have a friend who call his clients by phone. He want to present his product on his website. But to be sure they look at the product he want to sell, he want them to go to a page where he can change images by demand. Like running a powerpoint presentation in the clients browser. If the client for example need other features he can show another image.

1. During phone call client go to a specific page on my friends website.
2. The image shown, or html data, change on demand by my friend.

Can this be implemented easily by AJAX?

Answer 1

Sure!

Client side:

<script type="text/javascript">
//The first image to load
CurrentImage="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif";

//The Image, eg: <img id=imgBox src=foo.jpg>
ImgBox = document.getElementById('imgBox');

function CheckForImg()
{
    var ajaxRequest;  // The variable that makes Ajax possible! 
        try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
        } catch (e){
        try
            {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Ajax is kinda disabled :(\n you won't be able to do some stuff around :(");
            return false;
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){    
    if(ajaxRequest.readyState == 4){
        var str = ajaxRequest.responseText;
        if(str != CurrentImage) // we have a new image
        {
            ImgBox.src = str;
            currentImage = str;
        }
    }
ajaxRequest.open("GET", "getCurrentImagUrl.php", true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
ajaxRequest.send(null);
}
</script>

Now we need a way to keep the client posted, so either we put that to a frequency, or show a button to press which is way better and more efficient:

Method 1(Button):

<Button onclick="CheckForImg();">Check For Image!</button>

Method 2(Periodically check):

Simply call

SetInterval("CheckForImg", 5000);

I'll leave the server side for you :)

Any further help is kindly offered.