I've been working on developing a compact JavaScript utilities library, and one of the essential functions I'm trying to implement is a method that:
- Accepts a URL and an ID
- Uses these parameters to retrieve content via Ajax (from the provided URL) and inserts it into an HTML element (specified by the ID).
The strategy I have in mind involves:
- Creating a namespace object for the library [Not directly related at this point, but it helps clarify the code structure below]
- Designing general methods that fetch ajax content based on a given URL [The requests are functioning correctly, but passing the content to another function is where I'm encountering difficulties.]
- Devising a generic method that can take the ajax response and inject the returned value into a specified HTML element [I anticipate this should be relatively simple once I resolve issue 2]
My current obstacle lies in finding a way to access the retrieved content when onreadystatechange identifies the readyState as 4. At that juncture, I need a mechanism to pass the value of this.responseText to a function responsible for embedding it within the HTML.
The pertinent snippet of code is presented below (in its entirety, with key portions enclosed in comments)
// Utilize init-time branching to detect objects and set functions accordingly.
var utilite = {
addListener: null,
removeListener: null,
createAjaxObject: null,
ajaxReadyStateHandler: function() {
console.log('The current ready state is: ' + this.readyState);
if (this.readyState === 4) {
// Check the status code:
if ( (this.status >= 200 && this.status < 300) || (this.status === 304) ) {
console.log('Status OK');
if(this.status === 304){
console.log('Utilizing cached version');
}
// Issue arises here:
// Despite 'testingAjax' being passed initially to the parent calling function
// Directly accessing it proves problematic, hence necessitating hard-coding at this location.
utilite.setElementContent({id: 'testingAjax', content: this.responseText});
} else { // Status error!
console.log('Encountered status error: ' + this.statusText);
}
} // End of readyState IF.
},
doAjax: function(passedObject) {
var ajax = utilite.createAjaxObject();
ajax.onreadystatechange = utilite.ajaxReadyStateHandler;
ajax.open(passedObject.requestType, passedObject.resource, true);
ajax.send(null);
},
getElement: function (id) { // Retrieve element by specified id
'use strict';
if (typeof id == 'string') {
return document.getElementById(id);
}
},
setElementContent: function(passedObject){
'use strict';
var theElement = utilite.getElement(passedObject.id);
theElement.textContent = passedObject.content;
}
}; // Conclusion of utilite
// Branching for Event listeners
if (typeof window.addEventListener === 'function') { // W3C compatibility including IE9
utilite.addListener = function (obj, type, fn) {
obj.addEventListener(type, fn, false);
};
utilite.removeListener = function (obj, type, fn) {
obj.removeEventListener(type, fn, false);
};
} else if (typeof document.attachEvent === 'function') { // For IE
utilite.addListener = function (obj, type, fn) {
obj.attachEvent('on' + type, fn);
};
utilite.removeListener = function (obj, type, fn) {
obj.detachEvent('on' + type, fn);
};
} else { // DOM Level 0
utilite.addListener = function (obj, type, fn) {
obj['on' + type] = fn;
};
utilite.removeListener = function (obj, type, fn) {
obj['on' + type] = null;
};
}
// Ajax Object creation branches
utilite.createAjaxObject = function() {
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Designed for Older IE versions
ajax = new Ac
var utilite = {
addListener: null,
removeListener: null,
createAjaxObject: null,
ajaxReadyStateHandler: function() {
if (this.readyState === 4) {
if ( (this.status >= 200 && this.status < 300) || (this.status === 304) ) {
if(this.status === 304){
console.log('Utilizing cached version');
}
/* -------------------------
The challenge lies in providing the value of this.responseText from here to an external function
*/ -------------------------
} else { // Status error!
console.log('Encountered status error: ' + this.statusText);
}
} // End of readyState IF.
},
doAjax: function(passedObject) {
var ajax = utilite.createAjaxObject();
ajax.onreadystatechange = utilite.ajaxReadyStateHandler;
ajax.open(passedObject.requestType, passedObject.resource, true);
ajax.send(null);
},
getElement: function (id) { // Retrieves element by selected id
'use strict';
if (typeof id == 'string') {
return document.getElementById(id);
}
}
}; // Currently referencing all things utilite
// Event listener branches
if (typeof window.addEventListener === 'function') { // Compatibility for W3C standards and IE9
utilite.addListener = function (obj, type, fn) {
obj.addEventListener(type, fn, false);
};
utilite.removeListener = function (obj, type, fn) {
obj.removeEventListener(type, fn, false);
};
} else if (typeof document.attachEvent === 'function') { // Targeting IE browsers
utilite.addListener = function (obj, type, fn) {
obj.attachEvent('on' + type, fn);
};
utilite.removeListener = function (obj, type, fn) {
obj.detachEvent('on' + type, fn);
};
} else { // Focus on DOM Level 0
utilite.addListener = function (obj, type, fn) {
obj['on' + type] = fn;
};
utilite.removeListener = function (obj, type, fn) {
obj['on' + type] = null;
};
}
// Branch out for creating Ajax Objects
utilite.createAjaxObject = function() {
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) { // For older IE versions
ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
}
return ajax;
};
setup = function(){
utilite.doAjax({requestType: 'GET', resource: 'test.txt'});
};
utilite.addListener(window, 'load', setup);
tiveXObject('MSXML2.XMLHTTP.3.0');
}
return ajax;
};
setup = function(){
utilite.doAjax({requestType: 'GET', resource: 'test.txt', target: 'testingAjax'});
};
utilite.addListener(window, 'load', setup);
Your assistance with this matter would be greatly appreciated.
Thank you!