2011-07-07 17 views
2

私はこのサイトからコピーした適切なXMLHttpRequestオブジェクトを設定するためのブラウザユーティリティユーティリティを用意しています。第二に、私はテキストを返す、またはデータを読み込むための通知を読み込むための適切な機能を持っていたいと思います。データの読み込みに多くの時間がかかる場合は、エラー通知が必要です。ありがとう。クロスブラウザ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>"; 
} 
} 
+0

ユースAライブラリ - 本当に(mootools.net、jquery.com) –

答えて

0

は、溶液(@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>"; 
} 
} 
関連する問題