23.04.2018, 21:59
|
Интересующийся
|
|
Регистрация: 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.
|
|
23.04.2018, 22:06
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Там в angular вроде специальный интерфейс для ajax.
|
|
23.04.2018, 22:08
|
Интересующийся
|
|
Регистрация: 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;
}
|
|
23.04.2018, 22:30
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Просто тема создана в разделе angular. У вас есть функции, зачем вы копируете их содержимое.
|
|
23.04.2018, 22:40
|
Интересующийся
|
|
Регистрация: 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();
}
|
|
23.04.2018, 23:42
|
Профессор
|
|
Регистрация: 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));
}
|
|
24.04.2018, 00:01
|
|
Профессор
|
|
Регистрация: 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>
|
|
24.04.2018, 00:07
|
Интересующийся
|
|
Регистрация: 26.03.2018
Сообщений: 25
|
|
Спасибо, разобрался благодаря вам, извиняюсь за дублирование темы
|
|
24.04.2018, 00:09
|
Интересующийся
|
|
Регистрация: 26.03.2018
Сообщений: 25
|
|
Спасибо) Вы реализовали решение я так понимаю при помощи async/await?
|
|
24.04.2018, 00:17
|
|
Профессор
|
|
Регистрация: 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>
|
|
|
|