igenex
11/21/2017 - 7:37 PM

Ajax example

Ajax example

ajax.js
content_copyfile_download
window.onload = function() {
	/*var url = "http://html5/bgum/sales.json";
	var url = "http://gumball.wickedlysmart.com/?callback=updateSales";
	var request = new XMLHttpRequest();
	request.open("GET", url);
	request.onload = function() {
		if(request.status == 200) {
			updateSales(request.responseText);
		}
	}
	request.send(null);*/
}

/*function updateSales (responseText) {
	var salesDiv = document.getElementById("sales");
	var sales = JSON.parse(responseText);
	sales.forEach(function(magaz){
		var div = document.createElement("div");
		div.setAttribute("class", "saleItem");
		div.innerHTML = magaz.name + " sold " + magaz.sales + " gumballs";
		salesDiv.appendChild(div);
	})
}
*/

window.onload = function(){
	setInterval(handleRefresh, 3000);
}

// window.addEventListener("onload", function(){
// 									setInterval(handleRefresh, 3000)
// 								});

var lastReportTime = 0;

function handleRefresh () {
	var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&lastreporttime=" + lastReportTime + "&random=" + (new Date()).getTime();

	var newScript = document.createElement("script");
	newScript.setAttribute("src", url);
	newScript.setAttribute("id", "jsonp");

	var oldScript = document.getElementById("jsonp");
	var head = document.getElementsByTagName("head")[0];
	if(oldScript == null) {
		head.appendChild(newScript);
	}
	else {
		head.replaceChild(newScript, oldScript);
	}
}

function updateSales (sales) {
	var salesDiv = document.getElementById("sales");
	// var sales = JSON.parse(responseText);
	sales.forEach(function(magaz){
		var div = document.createElement("div");
		div.setAttribute("class", "saleItem");
		div.innerHTML = magaz.name + " sold " + magaz.sales + " gumballs";
		salesDiv.appendChild(div);
	});

	if(sales.length > 0) {
		lastReportTime = sales[sales.length-1].time;
	}
}
ajax-2-with-promises.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="myButton">Загрузить</button>
<div id="container"></div>
<script>
   /* myButton.addEventListener('click', () => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'test.txt');
        xhr.addEventListener('load', () => {
            console.log("Ответ получен! ", xhr.responseText);
            container.innerHTML = xhr.responseText;
        });
        xhr.send();
    });*/

   function sendAjax(url) {
       return new Promise((resolve, reject) => {
           let xhr = new XMLHttpRequest();
           xhr.open('GET', url);
           xhr.addEventListener('load', () => {
               resolve(xhr.responseText);
           });
           xhr.addEventListener('error', () => {
               reject();
           });
           xhr.send();
       });
   }

   myButton.addEventListener('click', () => {
       sendAjax('test.txt').then((responseText) => {
           console.log('Файл загружен');
           container.innerText = responseText;
           return responseText;
       },
           () => {
           console.log('Произошла ошибка при загрузке файла!');
           }).then(responseText => {
               console.log('получен ответ от сервера ', responseText);
       });
   })
</script>
</body>
</html>
ajax with parallel requests with promisses
content_copyfile_download
<button id="littleButton">Отправить запросы</button>
<div id="content"></div>
<script>
    function sendRequest (url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.send();
            xhr.addEventListener('load', () => {
                resolve(xhr.response);
            });
        });
    }

    const littleButton = document.querySelector('#littleButton');
    const content = document.querySelector("#content");

    littleButton.addEventListener('click', () => {
        Promise.all([
            sendRequest('file.txt'),
            sendRequest('file1.txt')
        ]).then(results => {
            console.log(results);
            content.textContent = [...results];
        })
    })
</script>