使用 &#106avascript 实现 XMLHttpRequest

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

XMLHttp 方式实现无刷屏,在IE,FireFox 上测试通过

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

html {background-color:#eeeeee}

body {

background-color:#ccffcc;

font-family:Tahoma,Arial,Helvetica,sans-serif;

font-size:12px;

margin-left:15%;

margin-right:15%;

border:3px groove #006600;

padding:15px

}

h1 {

text-align:left;

font-size:1.5em;

font-weight:bold

}

</style>

<script type="text/javascript">

// global flag

var isIE = false;

// global request and XML document objects

var req;

// retrieve XML document (reusable generic function);

// parameter is URL string (relative or complete) to

// an .xml file whose Content-Type is a valid XML

// type, such as text/xml; XML source must be from

// same domain as HTML file

function loadXMLDoc(url) {

// branch for native XMLHttpRequest object

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null);

// branch for IE/Windows ActiveX version

} else if (window.ActiveXObject) {

isIE = true;

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send();

}

}

}

// handle onreadystatechange event of req object

function processReqChange() {

// only if req shows "loaded"

if (req.readyState == 4) {

// only if "OK"

if (req.status == 200) {

clearTopicList();

buildTopicList();

} else {

alert("There was a problem retrieving the XML data:\n" +

req.statusText);

}

}

}

// invoked by "Category" select element change;

// loads chosen XML document, clears Topics select

// element, loads new items into Topics select element

function loadDoc(evt) {

// equalize W3C/IE event models to get event object

evt = (evt) ? evt : ((window.event) ? window.event : null);

if (evt) {

// equalize W3C/IE models to get event target reference

var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

if (elem) {

try {

if (elem.selectedIndex > 0) {

loadXMLDoc(elem.options[elem.selectedIndex].value);

}

}

catch(e) {

var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");

alert("Unable to get XML data:\n" + msg);

return;

}

}

}

}

// retrieve text of an XML document element, including

// elements using namespaces

function getElementTextNS(prefix, local, parentElem, index) {

var result = "";

if (prefix && isIE) {

// IE/Windows way of handling namespaces

result = parentElem.getElementsByTagName(prefix + ":" + local)[index];

} else {

// the namespace versions of this method

// (getElementsByTagNameNS()) operate

// differently in Safari and Mozilla, but both

// return value with just local name, provided

// there aren't conflicts with non-namespace element

// names

result = parentElem.getElementsByTagName(local)[index];

}

if (result) {

// get text, accounting for possible

// whitespace (carriage return) text nodes

if (result.childNodes.length > 1) {

return result.childNodes[1].nodeValue;

} else {

return result.firstChild.nodeValue;

}

} else {

return "n/a";

}

}

// empty Topics select list content

function clearTopicList() {

var select = document.getElementById("topics");

while (select.length > 0) {

select.remove(0);

}

}

// add item to select element the less

// elegant, but compatible way.

function appendToSelect(select, value, content) {

var opt;

opt = document.createElement("option");

opt.value = value;

opt.appendChild(content);

select.appendChild(opt);

}

// fill Topics select list with items from

// the current XML document

function buildTopicList() {

var select = document.getElementById("topics");

var items = req.responseXML.

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航