定时刷新:XmlHttp

zhangfan xu

unread,

Sep 13, 2006, 9:02:38 AM9/13/06

to Technology_DB

转载自 PHP More EasyChen / 文
什么是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);
}
函数的调用方法如下所示：
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" );
XmlHttp 对象在Gecko 上的实现
Gecko 上的XmlHttp 和IE
上略有不同，它并不需要通过ActiveX
来创建。另外回调函数必须在open 方法之前
注册，而IE 并不要求，这是一个很需要注意的问题。
使用JavaScript 实现XmlHttp 的跨浏览器应用
为了能在多种浏览器上有一个统一的实现，我们可以用JavaScript
来对不同浏览器的差异进行封装。这里我们采
用Andrew Gregory 的实现。首先我们要引用Andrew Gregory
的一个名为xmlhttprequest.js 的Js 脚本。
PHPMORE VOL5 25/26
<script type="text/javascript" src="xmlhttprequest.js"></script>
然后在创建XmlHttp 对象时统一使用new
XMLHttpRequest()就可以了；其它的方法不用改变。这个Js
脚本允
许我们在IE 、Gecko （ Mozilla/FireFox ）和Opera
的特定版本使用XmlHttp 。下边是调整后的
loadFragmentInToElement 函数，这个函数在IE6 和FireFox1.0pre
上运行通过。
<script type="text/javascript" src="xmlhttprequest.js"></script>
<script>
function loadFragmentInToElement(fragment_url, element_id)
{
var element = document.getElementById(element_id);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
element.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", fragment_url);
xmlhttp.send(null);
}
</script>
xmlhttprequest.js
文件和具体的使用例子可以在我写的一个DEMO 中找到。
XmlHttp 中的中文乱码问题
在默认情况下，XmlHttp 都是使用Utf-8
字符集，而我们使用的多是GB2312
字符集，这就要求我们进行GB2312
到Utf-8 的转码。PHP
提供了一个可选的专码模块，可以实现多种字符集之间的相互转化。加载这个专码模块的方
法如下：
打开PHP 配置文件php.ini，将 ;extension=php_mbstring.dll（*nix
是php_mbstring.so）前的分
号去掉。重新启动Apache
以后，这个模块就可以使用了。如果有错误出现，请检查扩展目录的路径设置是否正确。
加载这个模块以后，我们就可以使用mb_convert_encoding
函数来转码了：
$utf8_string = mb_convert_encoding( $gb_string , 'UTF-8' , 'GB2312' );
将转码后的字符输出就可以看见正确显示的中文了。
/*

Cross-Browser XMLHttpRequest v1.1
=================================

Emulate Gecko 'XMLHttpRequest()' functionality in IE and Opera. Opera
requires
the Sun Java Runtime Environment <http://www.java.com/>.

by Andrew Gregory
http://www.scss.com.au/family/andrew/webdesign/xmlhttprequest/

This work is licensed under the Creative Commons Attribution License.
To view a
copy of this license, visit http://creativecommons.org/licenses/by/1.0/
or send
a letter to Creative Commons, 559 Nathan Abbott Way, Stanford,
California 94305,
USA.

Not Supported in Opera
----------------------
* user/password authentication
* responseXML data member

Not Fully Supported in Opera
----------------------------
* async requests
* abort()
* getAllResponseHeaders(), getAllResponseHeader(header)

*/
// IE support
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new
ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') !=
-1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}
// Gecko support
/* ;-) */
// Opera support
if (window.opera && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
this.readyState = 0; //
0=uninitialized,1=loading,2=loaded,3=interactive,4=complete
this.status = 0; // HTTP status codes
this.statusText = '';
this._headers = [];
this._aborted = false;
this._async = true;
this.abort = function() {
this._aborted = true;
};
this.getAllResponseHeaders = function() {
return this.getAllResponseHeader('*');
};
this.getAllResponseHeader = function(header) {
var ret = '';
for (var i = 0; i < this._headers.length; i++) {
if (header == '*' || this._headers[i].h == header) {
ret += this._headers[i].h + ': ' + this._headers[i].v + '\n';
}
}
return ret;
};
this.setRequestHeader = function(header, value) {
this._headers[this._headers.length] = {h:header, v:value};
};
this.open = function(method, url, async, user, password) {
this.method = method;
this.url = url;
this._async = true;
this._aborted = false;
if (arguments.length >= 3) {
this._async = async;
}
if (arguments.length > 3) {
// user/password support requires a custom Authenticator class
opera.postError('XMLHttpRequest.open() - user/password not
supported');
}
this._headers = [];
this.readyState = 1;
if (this.onreadystatechange) {
this.onreadystatechange();
}
};
this.send = function(data) {
if (!navigator.javaEnabled()) {
alert("XMLHttpRequest.send() - Java must be installed and
enabled.");
return;
}
if (this._async) {
setTimeout(this._sendasync, 0, this, data);
// this is not really asynchronous and won't execute until the
current
// execution context ends
} else {
this._sendsync(data);
}
}
this._sendasync = function(req, data) {
if (!req._aborted) {
req._sendsync(data);
}
};
this._sendsync = function(data) {
this.readyState = 2;
if (this.onreadystatechange) {
this.onreadystatechange();
}
// open connection
var url = new java.net.URL(new
java.net.URL(window.location.href), this.url);
var conn = url.openConnection();
for (var i = 0; i < this._headers.length; i++) {
conn.setRequestProperty(this._headers[i].h,
this._headers[i].v);
}
this._headers = [];
if (this.method == 'POST') {
// POST data
conn.setDoOutput(true);
var wr = new
java.io.OutputStreamWriter(conn.getOutputStream());
wr.write(data);
wr.flush();
wr.close();
}
// read response headers
// NOTE: the getHeaderField() methods always return nulls for me
:(
var gotContentEncoding = false;
var gotContentLength = false;
var gotContentType = false;
var gotDate = false;
var gotExpiration = false;
var gotLastModified = false;
for (var i = 0; ; i++) {
var hdrName = conn.getHeaderFieldKey(i);
var hdrValue = conn.getHeaderField(i);
if (hdrName == null && hdrValue == null) {
break;
}
if (hdrName != null) {
this._headers[this._headers.length] = {h:hdrName,
v:hdrValue};
switch (hdrName.toLowerCase()) {
case 'content-encoding': gotContentEncoding = true; break;
case 'content-length' : gotContentLength = true; break;
case 'content-type' : gotContentType = true; break;
case 'date' : gotDate = true; break;
case 'expires' : gotExpiration = true; break;
case 'last-modified' : gotLastModified = true; break;
}
}
}
// try to fill in any missing header information
var val;
val = conn.getContentEncoding();
if (val != null && !gotContentEncoding)
this._headers[this._headers.length] = {h:'Content-encoding', v:val};
val = conn.getContentLength();
if (val != -1 && !gotContentLength)
this._headers[this._headers.length] = {h:'Content-length', v:val};
val = conn.getContentType();
if (val != null && !gotContentType)
this._headers[this._headers.length] = {h:'Content-type', v:val};
val = conn.getDate();
if (val != 0 && !gotDate) this._headers[this._headers.length] =
{h:'Date', v:(new Date(val)).toUTCString()};
val = conn.getExpiration();
if (val != 0 && !gotExpiration)
this._headers[this._headers.length] = {h:'Expires', v:(new
Date(val)).toUTCString()};
val = conn.getLastModified();
if (val != 0 && !gotLastModified)
this._headers[this._headers.length] = {h:'Last-modified', v:(new
Date(val)).toUTCString()};
// read response data
var reqdata = '';
var stream = conn.getInputStream();
if (stream) {
var reader = new java.io.BufferedReader(new
java.io.InputStreamReader(stream));
var line;
while ((line = reader.readLine()) != null) {
if (this.readyState == 2) {
this.readyState = 3;
if (this.onreadystatechange) {
this.onreadystatechange();
}
}
reqdata += line + '\n';
}
reader.close();
this.status = 200;
this.statusText = 'OK';
this.responseText = reqdata;
this.readyState = 4;
if (this.onreadystatechange) {
this.onreadystatechange();
}
if (this.onload) {
this.onload();
}
} else {
// error
this.status = 404;
this.statusText = 'Not Found';
this.responseText = '';
this.readyState = 4;
if (this.onreadystatechange) {
this.onreadystatechange();
}
if (this.onerror) {
this.onerror();
}
}
};
};
}
// ActiveXObject emulation
if (!window.ActiveXObject && window.XMLHttpRequest) {
window.ActiveXObject = function(type) {
switch (type.toLowerCase()) {
case 'microsoft.xmlhttp':
case 'msxml2.xmlhttp':
return new XMLHttpRequest();
}
return null;
};
}

zhangfan xu

unread,

Sep 13, 2006, 9:03:37 AM9/13/06

to Technology_DB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

function loadFragmentInToElement(fragment_url, element_id)
{
var element = document.getElementById(element_id);

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
element.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", fragment_url);
xmlhttp.send(null);

}

function refresh( element_id )

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

</SCRIPT>
</HEAD>

</BODY>
</HTML>

zhangfan xu

unread,

Sep 13, 2006, 9:15:36 AM9/13/06

to Technology_DB

XMLHTTP无刷新自动实时更新数据作者:yaosansi
日期:2006-03-11
字体大小: 小中大
【导读】对于一些时效性很强的网站，我们可以利用XMLHTTP让程序自动刷新，定时向服务器请求数据。

传统上，我们浏览网页,如果加入最新的数据。只能是等我们重新向服务器端请求时才能显示出来。但是，对于一些时效性很强的网站，传统的这种做法是不能满足的。

我们可以让程序自动刷新，定时向服务器请求数据。5秒取一次数据，10秒取一次数据。利用XMLHTTP发出请求并取得数据。传到客户端，客户端重新组织并显示数据。

demo.htm 前台显示.

<% @Language="JavaScript" %><%function
OpenDB(sdbname){/**--------------- OpenDB(sdbname) -----------------*
OpenDB(sdbname) * 功能:打开数据库sdbname,返回conn对象.*
参数:sdbname,字符串,数据库名称.* 实例:var conn =
OpenDB("database.mdb");*--------------- OpenDB(sdbname)
-----------------*/var connstr = "Provider=Microsoft.Jet.OLEDB.4.0;
Data Source="+Server.MapPath(sdbname);var conn =
Server.CreateObject("ADODB.Connection");conn.Open(connstr);return
conn;}var sResult = new Array();var oConn =
OpenDB("data.mdb");//特殊字符：+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的//所以服务器端先要经过unescape解码.//Update:2004-6-1
12:22var sql = "select num1,num2 from nums order by id";var rs =
oConn.Execute(sql);while(!rs.EOF){//一条记录用"###"隔开.每列数据用"@@@"隔开.
这是以只有两个列数据的情况.sResult[sResult.length] =
rs("num1").Value + "@@@" +
rs("num2").Valuers.MoveNext();}//escape解决了XMLHTTP。中文处理的问题.Response.Write(escape(sResult.join("###")));%>

数据库data.mdb

表 nums

id,自动编号

num1,文本

num2,文本

测试数据

id num1 num2

1 20.70 20.810

2 10.5 20.5

3 12.3 300

4 132 323

5 563 56

6 20 10

Reply all

Reply to author

Forward