Cross browser xmlhttprequest response with loading notifications
I have cross browser utility function for setting up a proper XMLHttpRequest object, that I had copied from this site. Secondly, I would like to have a proper function for returning text or loading notification of loading data. If loading data takes to much time, it would be good to have an error notification. Thanks.
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;
}
}
And this code here:
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>";
}
}
Here is the solution (thanks to the @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;
}
}
And this:
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>";
}
}
精彩评论