作者adddream (哆啦A孟)
看板Ajax
標題[問題] 畫圖的問題
時間Tue Mar 20 12:45:57 2007
總共有三個檔案分別為.js，.php，.html，名稱皆為
.js檔負責html與.php中間傳輸的過程
.php檔負責產生圖案
.html負則顯示.php檔所產生之圖案
problem:如果.php檔不是產生圖案的話，.html檔可以正常顯示，但若
.php是產生圖案的話，則.html會顯示亂碼。
自己猜想問題應該是出現在.js檔下面幾行的地方
var response = xmlHttp.responseText;
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML = response;
因為我是經由.php產生圖，所以xmlHttp.responseText這裡所收到的內容
應該是一個圖吧@@；接著myDiv.innerHTML應該是指插入HTML語言
但我插入的卻不是@@，所以應該是這裡的問題。
但對WEB語法不熟@@；請各位大大幫幫忙啊
阿李阿鬥 ^^
以下為程式碼
.js
var xmlHttp = createXmlHttpRequestObject();
var count=0;
//-----creates an XMLHttpRequest instance start----
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// this should work for all browsers except IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {}
}
}
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
//---------creates an XMLHttpRequest instance end-------------------
function process()
{
//---------------count the GD number start---------------------
if(count==400)
count=0;
else
count=count+1;
//----------------count the GD number end----------------------
// -------only continue if xmlHttp isn't void start-------------------
if (xmlHttp)
{
// try to connect to the server
try
{
// initiate server access
xmlHttp.open("GET", "proxyping.php?count=" + count, true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
setTimeout('process()',100);
}
// display the error in case of failure
catch (e)
{
alert("Can't connect to server:\n" + e.toString());
}
}
}
//---------only continue if xmlHttp isn't void end--------------------
// -----function called when the state of the HTTP request changes--------
function handleRequestStateChange()
{
// when readyState is 4, we are ready to read the server response
if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK"
if (xmlHttp.status == 200)
{
try
{
// do something with the response from the server
handleServerResponse();
}
catch(e)
{
// display error message
alert("Error reading the response: " + e.toString());
}
}
else
{
// display status message
alert("There was a problem retrieving the data:\n" +
xmlHttp.statusText);
}
}
}
// -------------function called when the state of the HTTP request changes----------
// -------------handles the response received from the server------------
function handleServerResponse()
{
var response = xmlHttp.responseText;
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML=response;
}
// ---------------handles the response received from the server-------------------
.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Practical AJAX: Accessing Remote Server through Proxy PHP
Script</title>
<script type="text/javascript" src="proxyping.js"></script>
</head>
<body onload="process()">
<div id="myDivElement" />
</body>
</html>
.php
<?php
// load the error handling module
require_once('error_handler.php');
print $count=$_GET['count'];
header("Content-type:image/gif");
//設定header以讓瀏覽器將檔案視為圖檔
$im=ImageCreate(800,300); //產生一個空白圖
$red=ImageColorAllocate($im,0,0,255);
//第一個ImagecolorAllocate決定背景顏色
$white=ImageColorAllocate($im,255,0,255);
$yellow=ImageColorAllocate($im,255,255,255);
// Imageline($im,1,255,1,$array_line[0],$yellow); //為一線條影像，im像是
一個容器，Imageline像是內容物;前面四個數字表示
//x,y啟始位址與結束位置
$fp=fopen("Menu.txt","r");
$j=0;
while($line=fgets($fp,$count))
{
$array_line=explode(' ',$line); //using the explode function divide
the line from string to arry.
for($i=0,$num_count=count($array_line);$i<$num_count;$i++)
{
Imageline($im,(2+$i*1.5+$j*1.5),275,(2+$i*1.5+$j*1.5),275-$array_line[$i],$yellow);
}
$j=$j+$i;
Imagestring($im,5,$j+50,$j+50,$j,$yellow);
}
Imagegif($im);
//輸出圖檔
ImageDestroy($im);
//消毀圖片
?>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.122.79.88
1F：推 alpe:<img id="xx" src="img"> document[xx].src="new image" 03/20 13:01
※ 編輯: adddream 來自: 140.122.79.88 (03/20 13:28)