使用 JavaScript 实现 XMLHttpRequest,在IE,FireFox 上测试通过!

原创 2005年05月25日 15:37:00

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 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>

Ajax获取XmlHttpRequest对象的方法,兼容IE、火狐。用来与服务器进行通信。

方法一: function ajaxFunction(){    var xmlHttp;    try{ // Firefox, Opera 8.0+, Safari         x...
  • hongtengfei523
  • hongtengfei523
  • 2015年10月02日 18:22
  • 1302

ie对xmlhttprequest的支持

使用ajax一段时间了,一直以为IE浏览器不支持XmlHttpRequest类的使用,今天无意翻到一个微软的PDF文档,才知道,原来从IE7开始,也同样可以使用。 var xmlHttp= new ...
  • sweetsoft
  • sweetsoft
  • 2012年12月29日 20:14
  • 1668

JavaScript在IE浏览器和Firefox浏览器中的差异总结

JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 1.HTML对象的 id 作为对象名的问题 IE:HTML 对象...
  • wang8088498
  • wang8088498
  • 2015年12月14日 17:06
  • 812

兼容 IE和FireFox的 XML_HTTP和浏览器共享同一个SessionID

Xmlhttp默认以一个独立的client存在,所以它不使用调用他的浏览器的Cookie,在服务器端认为是一个新的client.  这对于使用Session作为客户身份的认证的系统很麻烦。同时考虑到F...
  • SonicDX
  • SonicDX
  • 2006年01月15日 13:24
  • 2222

JavaScript XMLHttpRequest使用介绍

开发各种各样的Web应用程序,Ajax几乎是必不可少的了,在众多的工具中,可以使用jQuery中的$.ajax(),也可是在MVC中使用封装好的相关的ajax库。现在我的例子是使用JavaScript...
  • u011467537
  • u011467537
  • 2016年12月07日 13:25
  • 1079

关于火狐和IE下href="javascript:void(0)"兼容性的问题

火狐和IE下href="javascript:void(0) 会弹出空白页 经过排查,发现是href="javascript:void(0);"导致的问题,本来javascript:vo...
  • zh521zh
  • zh521zh
  • 2016年04月11日 21:05
  • 5489

低版本jQuery在Firefox中运行不正确的解决

最近的项目中有个功能:从URL中抓取网页数据然后显示到项目页面中。 项目中使用的jquery版本为1.7,能够在chrome下运行并显示正确的结果。但是在firefox中运行,却无法将从URL中抓取...
  • njnujuly
  • njnujuly
  • 2016年06月16日 13:24
  • 765

如何在HTML页面中创建兼容不同浏览器的XMLHttpRequest对象

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  * Created on 2015-5-20  *  * ...
  • lengxin337
  • lengxin337
  • 2015年05月20日 17:12
  • 1092

ajax中获取XMLHttpRequest对象的方法(IE/Firefox/chrome)

function GetXmlHttpObject() { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari xmlHttp =...
  • frinder
  • frinder
  • 2011年12月02日 10:48
  • 2768

XMLHttpRequest 实现无刷新更新页面数据

XMLHttpRequest 实现无刷新更新页面数据
  • abccome
  • abccome
  • 2010年06月08日 11:01
  • 803
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用 JavaScript 实现 XMLHttpRequest,在IE,FireFox 上测试通过!
举报原因:
原因补充:

(最多只允许输入30个字)