天天看点

使用 JavaScript 实现 XMLHttpRequest

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>

</head>

<body>

<h1>XMLHttpRequest Object Demo</h1>

<hr />

<form>

<p>Category:<br />

<select οnchange="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" οnchange="showDetail(event)">

    <option value="">Choose a Category First</option>

</select>

</p>

</form>

<div id="details"><span></span></div>

</body>

<html>

继续阅读