| « | August 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | | | | | | |
|
公告 |
| 暂无公告... |
| Blog信息 |
|
blog名称:
日志总数:10
评论数量:25
留言数量:0
访问次数:89390
建立时间:2005年3月7日 |
| |
|
 [xml]XMLHttp 方式实现无刷屏,在IE,FireFox 上测试通过
文章收藏
guan1200 发表于 2005/6/2 11:07:42 |
| 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 flagvar isIE = false;
// global request and XML document objectsvar 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 filefunction 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 objectfunction 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 elementfunction 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 namespacesfunction 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 contentfunction 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 documentfunction 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 documentfunction 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></head><body><h1>XMLHttpRequest Object Demo</h1><hr />
<form><p>Category:<br /><select onchange="loadDoc(event)"> <option value="">Choose One</option> <option value="songs.xml">Top 10 Songs</option> <option value="albums.xml">Top 10 Albums</option> <option value="newreleases.xml">Top 10 New Releases</option> <option value="justadded.xml">Top 10 Just Added</option></select></p><p>Items:<br /><select size="10" id="topics" onchange="showDetail(event)"> <option value="">Choose a Category First</option></select></p></form><div id="details"><span></span></div></body><html> |
|
|