带有加载通知的跨浏览器 xmlhttprequest 响应答案

【问题标题】：Cross browser xmlhttprequest response with loading notifications带有加载通知的跨浏览器 xmlhttprequest 响应
【发布时间】：2011-07-08 01:44:18
【问题描述】：

我有跨浏览器实用功能，用于设置我从该站点复制的适当 XMLHttpRequest 对象。其次，我想有一个适当的功能来返回文本或加载数据的加载通知。如果加载数据需要很长时间，最好有一个错误通知。谢谢。

if (!AJAX) var AJAX = {};
else if (AJAX && typeof(AJAX) != "object")
throw new Error("AJAX is not an Object type");

JSAJAX = {
NAME: "AJAX",
VERSION: 1.0,

initAJAX: function(){
    var objxml = null;
    var ProgID = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"];            

    try{
        objxml = new XMLHttpRequest();
    }
    catch(e){                
        for (var i = 0; i < ProgID.length; i++){
            try{
                objxml = new ActiveXObject(ProgID[i]);
            }
            catch(e){                        
                continue;
            }
        }
    }

    return objxml;            
},

getAJAXResponseText: function(xhr){
    var outObj = {};

    outObj.outMsg = "";
    outObj.loadingFlag = false;
    outObj.errorFlag = false;

    if (xhr.readyState == 4){

        if (xhr.status == 200){
            outObj.outMsg = xhr.responseText;
            outObj.loadingFlag = false;
            outObj.errorFlag = false;
        }else{
            outObj.outMsg = "There was a problem with the request " + xhr.status;
            outObj.loadingFlag = false;
            outObj.errorFlag = true;
        }

    }else{

        if (xhr.status == 200){
            outObj.loadingFlag = true;
            outObj.errorFlag = false;               
        }else{
            outObj.outMsg = "There was a problem with the request " + xhr.status;
            outObj.loadingFlag = false;
            outObj.errorFlag = true;                
        }
    }

    return outObj;
}
}

这里的代码：

window.onload = makeRequest;
var xhr = false;
var currMsg;

function makeRequest() {
currMsg = document.getElementById("updateArea").innerHTML;

xhr = AJAX.initAJAX();

if (xhr) {
    xhr.onreadystatechange = showState;
    xhr.open("GET", "colors.xml", true);
    xhr.send(null);
}
else {
    document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
}
}

function showState() {
var retObj = AJAX.getAJAXResponseText(xhr);

if (retObj.loadingFlag) { // Missing time expiriration of loading
    document.getElementById("updateArea").innerHTML = currMsg + "<h2>Loading...</h2>";
}else{
    document.getElementById("updateArea").innerHTML = currMsg + "<p>" + retObj.outMsg + "</p>";
}
}

【问题讨论】：

使用库 - 真的（mootools.net, jquery.com）

标签： javascript ajax cross-browser xmlhttprequest

【解决方案1】：

这是解决方案（感谢@Itay Moav）：

if (!AJAX) var AJAX = {};
else if (AJAX && typeof(AJAX) != "object")
throw new Error("AJAX is not an Object type");

AJAX = {
NAME: "AJAX scripts",
VERSION: 1.0,

initAJAX: function(){
    var objxml = null;
    var ProgID = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"];            

    try{
        objxml = new XMLHttpRequest();
    }
    catch(e){                
        for (var i = 0; i < ProgID.length; i++){
            try{
                objxml = new ActiveXObject(ProgID[i]);
            }
            catch(e){                        
                continue;
            }
        }
    }

    return objxml;            
},

getAJAXResponseText: function(xhr){
    var outObj = {};

    outObj.outMsg = "";
    outObj.loadingFlag = false;
    outObj.errorFlag = false;

    if (!xhr){
            outObj.outMsg = "The request has expired";
            outObj.loadingFlag = false;
            outObj.errorFlag = true;

    }else if (xhr.readyState == 4){

        if (xhr.status == 200){
            outObj.outMsg = xhr.responseText;
            outObj.loadingFlag = false;
            outObj.errorFlag = false;
        }else{
            outObj.outMsg = "There was a problem with the request " + xhr.status;
            outObj.loadingFlag = false;
            outObj.errorFlag = true;
        }

    }else{

        if (xhr.status == 200){
            outObj.loadingFlag = true;
            outObj.errorFlag = false;               
        }else{
            outObj.outMsg = "There was a problem with the request " + xhr.status;
            outObj.loadingFlag = false;
            outObj.errorFlag = true;                
        }
    }

    return outObj;
}
}

还有这个：

window.onload = makeRequest;
var xhr = false;
var currMsg;
var timer;

function makeRequest() {
currMsg = document.getElementById("updateArea").innerHTML;

xhr = AJAX.initAJAX();

if (xhr) {
    xhr.onreadystatechange = showState;
    xhr.open("GET", "colors.xml", true);
    timer = setTimeout(function(){xhr = null;}, 2000); // can't delete the object
    xhr.send(null);
}
else {
    document.getElementById("updateArea").innerHTML = "Sorry, but I couldn't create an XMLHttpRequest";
}
}

function showState() {
var retObj = AJAX.getAJAXResponseText(xhr);

if (!retObj.errorFlag){
    if (retObj.loadingFlag) {
        document.getElementById("updateArea").innerHTML = currMsg + "<h2>Loading...</h2>";
    }else{
        clearTimeout(timer);
        document.getElementById("updateArea").innerHTML = currMsg + "<p>" + retObj.outMsg + "</p>";
    }
}else{
    document.getElementById("updateArea").innerHTML = currMsg + "<p>" + retObj.outMsg + "</p>";
}
}

【讨论】：