xmlhttp無刷新數據更新

Xmlhttp是一種瀏覽器對象， 可用於模擬http的GET和POST請求。配合JavaScript可以實現頁面數據在無刷新下的定時數據更新，如果應用在聊天室、文字直播上可以取得較好的視覺效果。

IE中的 XmlHttp對象

在IE中XmlHttp被實現爲ActiveX對象，通常使用

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

來創建一個對象，然後使用該對象的open方法來發出一個Http請求。

xmlhttp.open("GET", fragment_url);

這時候瀏覽器已經發出了Http請求，我們需要註冊一個匿名函數給XmlHttp對象的onreadystatechange方法，這樣當請求返回時，xmlhttp就會自動調用我們註冊的這個函數，下邊是一個實際的例子。

xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
element.innerHTML = xmlhttp.responseText;
}
}

因爲我們不需要再發送任何信息，所以用下邊的語句結束

xmlhttp.send(null);

我們將上邊的過程封裝爲一個函數，下邊是這個函數的完整代碼：

function loadFragmentInToElement(fragment_url, element_id)
{
var element = document.getElementById(element_id);
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open("GET", fragment_url);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
element.innerHTML = xmlhttp.responseText;
}
}

xmlhttp.send(null);
PHPMORE VOL5 24/26
}

函數的調用方法如下所示：

loadFragmentInToElement( http://domain.com/url.php, DynamicContent_id );

有了上邊的代碼， 再配合JavaScript的定時函數， 我們就可以實現定時的無刷新數據更新了， 下邊這個函數每隔5秒對element_id 的數據進行一次更新。

function refresh( element_id )
{
loadFragmentInToElement( show.php , + element_id );
setTimeout( "refresh(ts)" , 5000 );
}

在 IE上使用XmlHttp要注意的問題

特別要注意的是由於IE的Cache的關係，我們看見的XmlHttp並不總是最新讀取的那一個，爲了讓IE不啓用Cache，我們發送給

IE一個特殊的Header，用PHP實現如下：

header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );

header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );

header( "Cache-Control: no-cache, must-revalidate" );

header( "Pragma: no-cache" );