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.getElementsByTagName("item"); // loop through <item> elements, and add each nested // <title> element to Topics select element for (var i = 0; i < items.length; i++) { appendToSelect(select, i, document.createTextNode(getElementTextNS("", "title", items[i], 0))); } // clear detail display document.getElementById("details").innerHTML = ""; }
// display details retrieved from XML document function showDetail(evt) { evt = (evt) ? evt : ((window.event) ? window.event : null); var item, content, div; if (evt) { var select = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if (select && select.options.length > 1) { // copy <content:encoded> element text for // the selected item item = req.responseXML.getElementsByTagName("item")[select.value]; content = getElementTextNS("content", "encoded", item, 0); div = document.getElementById("details"); div.innerHTML = ""; // blast new HTML content into "details" <div> div.innerHTML = content; } } } </script>
[1] [2] 下一页 [C语言系列]使用C#实现ADSL自动拨号 [Web开发]通过伪静态规则实现子目录绑定 [Web开发]狂人采集器规则使用详解 [电脑技术]windows7快捷键使用大全 [Web开发]利用QQWry.Dat实现IP 地址高效检索 [Web开发]巧妙运用PHP函数实现采集器的制作 [Web开发]用PHP实现Javascript的escape(),unescape()的方法 [网页制作]利用HTML meta refresh 实现页面刷新与跳转(重定向… [实用文档]基于WebGIS的杭州公交线路查询系统设计与实现毕业… [网页制作]Javascript获取各种浏览器可见窗口大小
|