AJAX [VanillaJS] like jQuery
by slawe
HTML
<progress id="p"></progress>
<div id="_progress"></div>
<div id="output"></div>
CSS
#p {
-webkit-appearance: progress-bar;
-webkit-writing-mode: horizontal-tb;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
/*background: lightgreen;*/
}
#_progress {
display: block;
position: relative;
margin: 20px 20px 20px 0px;
width: 10px;
height: 50px;
background: lightgreen;
border: 2px solid #000;
text-align: center;
line-height: 50px;
}
JavaScript
function ajax(objData) {
var request = new XMLHttpRequest();
var progressBar = document.getElementById('p');
var _progress = document.getElementById('_progress');
//request.responseType = 'json';
//request.onprogress=newUpdateProgress;
//request.addEventListener('progress', updateProgress);
//request.addEventListener('load', transferComplete);
//request.addEventListener('error', transferFailed);
//request.addEventListener('abort', transferCanceled);
request.open(objData.type, objData.url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var resp = JSON.parse(request.responseText);
console.log(resp);
if (resp.type === 'success') {
console.log(ERROR(200));
objData.success(resp.value);
}
}
};
request.onerror = function() {
if (objData.type !== 'GET' || objData.type !== 'POST') {
console.log(ERROR(405));
} else {
console.log(ERROR(308));
}
objData.error(request);
};
/*request.onprogress = function(pe) {
if(pe.lengthComputable) {
progressBar.max = pe.total;
progressBar.value = pe.loaded;
}
}
request.onloadend = function(pe) {
progressBar.value = pe.loaded;
console.log(pe);
}*/
request.upload.addEventListener('progress', function(e) {
// only 4 this url (e.loaded/e.total)
var percent = Math.round((e.loaded * 100) / e.total);
_progress.style.width = percent + '%';
_progress.innerHTML = _progress.style.width;
progressBar.value = percent;
}, false);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(JSON.stringify(objData.data));
}
function newUpdateProgress(evt)
{
if (evt.lengthComputable)
{ //evt.loaded the bytes...