Hi, I am trying to call a php page through ajax to show a png file created in that php file.
My code is this:
Index.html
<script text="text/Javascript">
//////////////////////////////////////////////////////////////////////////////////////////////
// AJAX FUNCTIONS ////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
function xmlhttpPost(f, strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(f, self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(f);
}
function updatepage(f,str) {
document.getElementById(f).innerHTML = str;
}
</script>
<input id="makebutton" onclick="this.disabled=true; document.getElementById('result').innerHTML='<p><b>Bringing pic...</b> Please wait</p>.'; xmlhttpPost('result','button.php');" value="Bring Pic" type="button">
<div style="text-align: center;"><span id="result"></span></div>
button.php
<?
// print the header telling the web browser that its a png image
header ("Content-type: image/png",false);
// Create an image width 200 and height 30 pixels
$im=imagecreate(200,30) or die("Can not initialize GD Stream");
// BackGround Color of the image
$bgcolor=ImageColorAllocate($im,255,0,0);
// text color of the image
$textcolor=ImageColorAllocate($im,255,255,255);
//write string to image
// 5 : font , 1 : x , 5 : y
imagestring($im,5,1,5,"Hello World",$textcolor);
imagepng($im); // output to browser
imagedestroy($im); // Frees Memory
?>
Output
What the hell am i doing wrong ? ??? ???