使用XMLHTTP Request Object获取服务器数据

Xmlhttp是一种浏览器对象， 可用于模拟http的GET和POST请求。配合JavaScript可以实现页面数据在无刷新下的定时数据更新，如果应用在聊天室、文字直播上可以取得较好的视觉效果。

　　在IE中XmlHttp被实现为ActiveX对象，通常使用

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

　　也可以使用

　　var xmlhttp = createobject("MiCROSOFT.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脚本。

　　然后在创建XmlHttp对象时统一使用new XMLHttpRequest()就可以了； 其它的方法不用改变。 这个Js脚本运行我们在IE、 Gecko

　　（Mozilla/FireFox） 和Opera的特定版本使用XmlHttp。下边是调整后的loadFragmentInToElement函数， 这个函数在IE6

　　和FireFox1.0pre上运行通过。

　　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 );

　　将转码后的字符输出就可以看见正确显示的中文

============================================================================

  在Web客户端使用xmlhttp对象，可以十分方便的和服务器交换数据，我们可以获取和发送任何类型的数据，甚至二进制数据到服务器上。xmlhttp技术同时也是目前大多数无刷新页面使用的和服务器交换数据的方式，这种方式比以往的隐藏iframe的方法要方便和经济的多。

    同时让我们高兴得是xmlhttp并不是IE特有的东西，虽然目前还不是W3C的标准，不过IE, Netscape/Mozilla, 和Safari都支持。在IE中我们使用new ActiveXObject('MSXML2.XMLHTTP')或者new ActiveXObject("Microsoft.XMLHTTP")来获得的xmlhttp对象实例，使用前者还是后者和客户端机器安装的MSXML版本有关。在Netscape/Mozilla和Safari中，使用new XMLHttpRequest()来获得xmlhttp对象实例。比如在IE中，我们通常这样使用：

var  xmlhttp  =   null ; 
try  
{ 
    xmlhttp  =   new  ActiveXObject( " MSXML2.XMLHTTP " ); 
} 
catch (e) 
{ 
     try  
    { 
        xmlhttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " ); 
    } 
     catch (e2){} 
} 

 

    使用xmlhttp对象其实是并不是什么困难的事，它一共就6个方法8个属性。不过它最主要的是提供了两种执行模式：同步模式和异步模式。同步模式可以比较精确的控制程序流程，可是如果服务器的Response太慢，browser会有死掉失去相应的问题；而使用异步模式由于是事件触发方式控制流程，会给程序运行带来一些不可与预计的问题，因为你不知道客户端等待服务器Response的过程中，用户会在browser里做什么操作。 

    下面是一个同步方式获取服务器数据的简单示例：

function  GetRemoteData(url)
{
     var  xmlhttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
     try
    {  
         xmlhttp.open('GET', url,  false );
          if  ( xmlhttp.status  ==   200  )
         {
              return  xmlhttp.responseText;
         }
          throw  ''; 
    }
     catch (e)
    {
          return  '';
    }
}

    XMLHTTP对象的属性和方法列表(来自IXMLHTTPRequest接口)：

Name Type Description onreadystatechange N/A 指定当就绪状态发生改变时调用的事件处理函数，仅用于异步操作  readyState Long 异步操作的状态：未初始化(0)，正在加载(1)，已加载(2)，交互(3)，已完成(4) responseBody Variant 将响应信息正文作为unsigned byte数组返回 responseStream Variant 将响应信息正文作为一个ADO Stream对象返回 responseText String 将响应信息正文作为一个文本字符串返回 responseXML Object 通过XMLDom将响应信息正文解析为XMLDocument对象 status Long 服务器返回的HTTP状态码 statusText String 服务器HTTP响应行状态

Name Desciption abort 取消当前 HTTP 请求 getAllResponseHeaders 从响应信息中检索所有的标头字段 getResponseHeader 从响应信息正文中获得一个 HTTP 标头值 open(method, url, boolAsync, bstrUser, bstrPassword) 打开一个与 HTTP 服务器的连接 send(varBody) 设定一个请求的标头字段 setRequestHeader(bstrHeader, bstrValue) 向 HTTP 服务器发送请求。可包含正文。

    这里面显然就open方法比较麻烦，带了一大堆参数，它们的含义分别是：

Parameter Description method HTTP的通信方式，比如GET, HEAD, POST, PUT, DELETE, CONNECT等 url 接收数据的服务器的URL地址，URL可带QueryString boolAsync 一个布尔标识，说明请求是否为异步的。如果是异步通信方式，客户端就不等待服务器的响应；如果是同步方式，客户机会等到服务器返回消息后才去执行其它操作 bstrUser 用户ID，用于服务器身份验证 bstrPassword 用户密码，用于服务器身份验证

    异步通讯的示例：

xmlhttp.open( " GET " ,  " default.aspx " ,  true );
xmlhttp.onreadystatechange  =   function ()
{
     if  ( xmlhttp.readyState == 4  )
    {
        alert(xmlhttp.responseText);
    }
}
xmlhttp.send( null );

    其实使用xmlhttp就这么简单，复杂的是服务器端数据的组织方式，而且需要开发人员同时熟悉Client和Server端的开发，才能事半功倍。可是好像说了半天这个玩意儿和xml没有什么关系啊，怎么叫xmlhttp呢？我们注意到response的数据类型中有一个responseXML，不过它解析返回的XMLDocument属于XMLDOM的内容了，和使用xmlhttp来和服务器通讯的关系并不大，以后再来细说。

 

 

xmlhttp:open方法

创建一个新的http请求，并指定此请求的方法、URL以及验证信息
oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword);

参数bstrMethod

http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。

/*****
POST：用"POST"方式发送数据,可以大到4MB
GET：用"GET"方式发送数据,只能256KB

如果请求带有参数的化实用POST方式，POST方式将参数放置在页面的隐藏控件内

没有参数使用GET方式

对于请求的页面在中途可能发生更改的，也最好用POST方式

用GET方式可能会拿不到最新的信息

*****/

bstrUrl

请求的URL地址，可以为绝对地址也可以为相对地址。