Кросс-браузерный ответ xmlhttprequest с загрузкой уведомлений - PullRequest
Новая
       21

Кросс-браузерный ответ xmlhttprequest с загрузкой уведомлений

2 голосов
/ 07 июля 2011

У меня есть кросс-браузерная функция для настройки правильного объекта 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>";
}
}

1 Ответ

0 голосов
/ 07 июля 2011

Вот решение (спасибо @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>";
}
}
...