xmlhttp技术的规范使用，标准xmlhttp数据岛技术的实现

http://www.rdxx.com 05年11月07日 02:59 phpe.net 我要投稿

xml数据岛功能网上文章不少，有的用vbs实现的，有的用不规范的js，导致非ie浏览器下无法正常使用。
为此，我参考了google网站的一些代码，并将其xml数据下载部分抽出，给于讲解，希望对其他人有所帮助。

建立三个文件如下：
Req.htm
Req.js
ReqXml.php

Req.htm代码如下：

CODE

<html>
<head><title>xml数据岛屿技术</title>
<script language="javascript" src="Req.js"></script>
<script language="javascript">
function getAvailableNames() {
var url = "ReqXml.php";
//var url = "http://www.baidu.com";
myxmlhttp = CreateXmlHttpReq(CheckAvailXmlHttpHandler);
XmlHttpGET(myxmlhttp, url);
}
function CheckAvailXmlHttpHandler() {
/* Ready when readystate == 4
* Success when status == 200
*/
if (myxmlhttp.readyState != 4 || myxmlhttp.status != 200) {
return;
}
// get the values of the last inputs that were used to determine
// usernames & save them.
// extract the value of nextIndex from the response header
var responseHeader = myxmlhttp.getAllResponseHeaders();

// hidden variables to keep state information for the Handler
// if the inputs (firstname, lastname, desired username) don't change, then
// we want to update NextIndex so we show different username suggestions each time
var nextIndex = parseResponseHeader("NextIndex", responseHeader);
document.getElementById("errorDIV").innerHTML=myxmlhttp.responseText;
}
</script>
</head>
<body>
<input type="button" name="checkavail" value="check availability!" style="font-size:9pt" onclick="getAvailableNames()">
<div id="errorDIV"></div>
</body>
</html>

Req.js代码如下：

CODE

//

// Browser detect
//

var agt = navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf("msie") != -1);
var is_ie5 = (agt.indexOf("msie 5") != -1);
var is_opera = (agt.indexOf("opera") != -1);
var is_mac = (agt.indexOf("mac") != -1);
var is_gecko = (agt.indexOf("gecko") != -1);
var is_safari = (agt.indexOf("safari") != -1);
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
if (is_ie) {
// Guaranteed to be ie5 or ie6
var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
try {
xmlhttp = new ActiveXObject(control);
xmlhttp.onreadystatechange = handler;
} catch (ex) {
// TODO: better help message
alert("You need to enable active scripting and activeX controls");
}
} else {

// Mozilla
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = handler;
xmlhttp.onerror = handler;
}
return xmlhttp;
}
function XmlHttpPOST(xmlhttp, url, data) {
try {
xmlhttp.open("POST", url, true);
xmlhttp.send(data);
} catch (ex) {
// do nothing
}
}

// XMLHttp send GEt request
function XmlHttpGET(xmlhttp, url) {
try {
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
} catch (ex) {
// do nothing
}
}
/**
* parses the given xmlhttp response header for the given
* key's value
*
* The header will look like this:
* NextIndex: 4
* PrevFirstName: John
* PrevLastName: Smith
* PrevDesired: John
* Content-Type: text/html; charset=ISO-8859-1
* Date: Mon, 03 Nov 2003 21:19:53 GMT
* ...
*
*/
function parseResponseHeader(key, header) {
var lines = header.split("\n");
var re = new RegExp("^" + key + ":\\s");
for (var i in lines) {
if (re.exec(lines[i])) {
var returnValue = trim(RegExp.rightContext);
return returnValue;
}
}
return "";
}
/**
* Trim Function (trims leading and trailing whitespace)
* This function is used by parseResponseHeader, needed because the
* split function in IE doesn't strip the trailing "\n"
*/
function trim(value) {
var temp = value;
var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
if (obj.test(temp)) {
temp = temp.replace(obj, '$2');
}
return temp;
}

ReqXml.php代码如下:

共2页 1 2

标签：数据岛 , XMLHTTP , 技术 , 数据 , XML 打印本文