Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2018, 21:59
Интересующийся
Отправить личное сообщение для ar4ipers Посмотреть профиль Найти все сообщения от ar4ipers
 
Регистрация: 26.03.2018
Сообщений: 25

Callback javascript ajax
Здравствуйте, есть два запроса которые получают данные. использую XMLHttpRequest. Несмотря на то, что AJAX является асинхронной операцией, результаты запросов я хочу получить последовательно: сначала трёх пользователей, потом случайное число. Для этого пытаюсь использовать callback-и. Может ли объяснить мне как с ними работать?
window.onload = function () {
    document.querySelector("#callback").onclick = function () {
        const url = "https://randomuser.me/api?results=";
        let n = randomInteger(5, 10);
        ajaxGet(3, url + 3, getName);
        ajaxGet(n, url + n, getName);
    }
}

function getName(s, request) {
    let data = JSON.parse(request.responseText);
    for (let i in data.results) {
        document.getElementById("name").innerHTML += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
    }
}

function ajaxGet(s, url, callback) {
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            callback(s, this);
        }
    }
    request.open('GET', url);
    request.send();
}

function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
}

Последний раз редактировалось ar4ipers, 23.04.2018 в 23:20.
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2018, 22:06
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Там в angular вроде специальный интерфейс для ajax.
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2018, 22:08
Интересующийся
Отправить личное сообщение для ar4ipers Посмотреть профиль Найти все сообщения от ar4ipers
 
Регистрация: 26.03.2018
Сообщений: 25

Но я на нативном JS пишу. додумался только до этого, но правильно ли?
window.onload = function () {
    document.querySelector("#callback").onclick = function () {
        const url = "https://randomuser.me/api?results=";
        ajaxGet(3, url + 3, getName);
    }
}

function getName(s, request) {
    let data = JSON.parse(request.responseText);
    for (let i in data.results) {
        document.getElementById("name").innerHTML += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
    }
    const url = "https://randomuser.me/api?results=";
    let n = randomInteger(5, 10);
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            let dataq = JSON.parse(request.responseText);
            for (let i in dataq.results) {
                document.getElementById("name").innerHTML += "rand" + " " + dataq.results[i].name.first + " " + dataq.results[i].name.last + "<br>";
            }
        }
    }
    request.open('GET', url + n);
    request.send();
}

function ajaxGet(s, url, callback) {
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            callback(s, this);
        }
    }
    request.open('GET', url);
    request.send();
}

function randomInteger(min, max) {
    var rand = min - 0.5 + Math.random() * (max - min + 1)
    rand = Math.round(rand);
    return rand;
}
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2018, 22:30
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Просто тема создана в разделе angular. У вас есть функции, зачем вы копируете их содержимое.
Ответить с цитированием
  #5 (permalink)  
Старый 23.04.2018, 22:40
Интересующийся
Отправить личное сообщение для ar4ipers Посмотреть профиль Найти все сообщения от ar4ipers
 
Регистрация: 26.03.2018
Сообщений: 25

ой, извиняюсь, засиделся и не обратил внимание на тему
Цитата:
У вас есть функции, зачем вы копируете их содержимое.
Вы про это?
function getName(s, request) {
    let data = JSON.parse(request.responseText);
    for (let i in data.results) {
        document.getElementById("name").innerHTML += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
    }
    const url = "https://randomuser.me/api?results=";
    let n = randomInteger(5, 10);
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            let dataq = JSON.parse(request.responseText);
            for (let i in dataq.results) {
                document.getElementById("name").innerHTML += "rand" + " " + dataq.results[i].name.first + " " + dataq.results[i].name.last + "<br>";
            }
        }
    }
    request.open('GET', url + n);
    request.send();
}
Ответить с цитированием
  #6 (permalink)  
Старый 23.04.2018, 23:42
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Да
window.onload = function () {
    var name = document.getElementById("name");
    var clbk = document.getElementById("callback");
    var url = "https://randomuser.me/api?results=";
    clbk.onclick = function () {
        var n = randomInteger(5, 10);
        ajaxGet(url + 3, function (data) {
            name.innerHTML += getName(3, data);
            ajaxGet(url + n, function (data) {
                name.innerHTML += getName(n, data);
            });
        });
    };
};

function getName(s, data) {
    var html = "";
    for (var i in data.results) {
        html += s + " " + data.results[i].name.first + " " + data.results[i].name.last + "<br>";
    }
    return html;
}

function ajaxGet(url, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            callback(JSON.parse(this.responseText));
        }
    };
    request.open("GET", url);
    request.send();
}

function randomInteger(min, max) {
    return Math.round(min - 0.5 + Math.random() * (max - min + 1));
}
Ответить с цитированием
  #7 (permalink)  
Старый 24.04.2018, 00:01
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<!DOCTYPE html>
<html>
<body>
	<script>
window.onload = function () {
document.querySelector("#callback").onclick = async function () {
	const url = "https://randomuser.me/api?results=";
	let n = randomInteger(5, 10);
	getName(...await ajaxGet(3, url + 3));
	getName(...await ajaxGet(n, url + n));
	}
}

function getName(s, request) {
	let data = JSON.parse(request.responseText);
	for (let { name: { first, last } } of Object.values(data.results)) {
		document.getElementById("name").innerHTML += s + " " + first + " " + last + "<br>";
	}
}

function ajaxGet(s, url) {
	return new Promise(function(resolve) {
		let request = new XMLHttpRequest();
		request.onreadystatechange = function () {
			if (request.readyState == 4 && request.status == 200) {
				resolve([s, this]);
			}
		}
		request.open('GET', url);
		request.send();
	});
}

function randomInteger(min, max) {
	var rand = min - 0.5 + Math.random() * (max - min + 1)
	rand = Math.round(rand);
	return rand;
}

</script>
<button id="callback">Button</button>
<div id="name"></div>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 24.04.2018, 00:07
Интересующийся
Отправить личное сообщение для ar4ipers Посмотреть профиль Найти все сообщения от ar4ipers
 
Регистрация: 26.03.2018
Сообщений: 25

Спасибо, разобрался благодаря вам, извиняюсь за дублирование темы
Ответить с цитированием
  #9 (permalink)  
Старый 24.04.2018, 00:09
Интересующийся
Отправить личное сообщение для ar4ipers Посмотреть профиль Найти все сообщения от ar4ipers
 
Регистрация: 26.03.2018
Сообщений: 25

Спасибо) Вы реализовали решение я так понимаю при помощи async/await?
Ответить с цитированием
  #10 (permalink)  
Старый 24.04.2018, 00:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Да

/// я ещё немного потрансформировал Ваш код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<button id="callback">Button</button>
<div id="name"></div>
<script>

document.querySelector("#callback").onclick = async function () {
	const url = "https://randomuser.me/api?results=";
	let n = randomInteger(5, 10);

	await getPersons(3, url).then(addPerson);
	await getPersons(n, url).then(addPerson);
}

function addPerson([s, data]) {
	for(let { name: { first, last } } of Object.values(data.results)) {
		document.getElementById("name").innerHTML += `${s} ${first} ${last}<br>`;
	}
}

function getPersons(s, url) {
	return fetch(url + s)
		.then(response => response.json())
		.then(data => [s, data]);
}

function randomInteger(min, max) {
	return Math.floor(min + Math.random() * (max - min));
}

</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как передать результат запроса ajax в переменную javascript? Irina_hines jQuery 4 07.06.2015 18:58
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
ajax javascript gunsoy Общие вопросы Javascript 3 24.06.2012 19:49
Не работает javascript в документе, вызванным AJAX. Hauster Общие вопросы Javascript 21 28.05.2012 23:14
Ajax и javascript а.Титов Общие вопросы Javascript 2 11.01.2009 10:51