Помогите решить тестовое задание или намекните что почитать?

Вопрос-ответ JavaScript
1

Как получить данные на сайте “А” с сайта “Б”, где инфа хранится в виде json файла?

2

Читай:

  • AJAX (технологии забора данных с сервера на клиент)
  • Crossdomain AJAX (что нужно делать для того чтобы с помощью AJAX забирать данные с другого домена). Потому что по умолчанию браузер запрещает отсылать AJAX запросы с сайта A на сайт Б.
  • HTTP заголовки. Не надо учить все, а только понять как браузер поймет что с сервер домена A разрешил кроссдоменные запросы на сайт Б.
3

спасибо! нашёл инфу! с сервером связался, а что-то вывести от туда инфу не могу…

var output = document.getElementById('output');
var ajaxhttp = new XMLHttpRequest();
var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture";

ajaxhttp.open("GET", url, true);
ajaxhttp.setRequestHeader("content-type", "application/json");
ajaxhttp.onreadystatechange = function() {
	if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
		var jcontent = JSON.parse(ajaxhttp.responseText);
		output.innerHTML = jcontent;
		console.log(jcontent);
	}
}
ajaxhttp.send(null);

url по адресу хранит инфу о 50 пользователях в виде

{
    "gender": "male",
    "name": {
        "title": "mr",
        "first": "ethan",
        "last": "mitchell"
    },
    "location": {
        "street": "4091 lakeshore rd",
        "city": "springfield",
        "state": "north dakota",
        "postcode": 79650
    },
    "email": "ethan.mitchell@example.com",
    "phone": "(057)-543-1566",
    "picture": {
        "large": "https://user.me/api/......../78.jpg",
        "medium": "https://user.me/api/......../78.jpg",
        "thumbnail": "https://user.me/api/......../78.jpg"
    }
}

как выкурить 50 изображений (в смысле не текст в виде ссылки, а именно загруженные по ссылкам изображения), допустим picture.medium и допустим location.city у каждого

4

Нужно создать DOM узлы с помощью document.createElement, вставить их в DOM, и или вставить текст в эти узлы, или изменить их свойство src изображения. Самый простой и небезопасный путь - использовать innerHTML.

var output = document.body
var ajaxhttp = new XMLHttpRequest();
var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture";

function createItem(location, picSrc) {
	var div = document.createElement('div')
	div.innerHTML = '<div><span>' + location + '</span><img src="' + picSrc + '" /></div>'
	return div
}

ajaxhttp.open("GET", url, true);
ajaxhttp.setRequestHeader("content-type", "application/json");
ajaxhttp.onreadystatechange = function() {
	if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
		var jcontent = JSON.parse(ajaxhttp.responseText);
		//
		var listWrapper = document.createElement('div')
		jcontent.results.forEach(function (userJSON) {
			listWrapper.appendChild(createItem(userJSON.location.city, userJSON.picture.medium))
		})
		document.body.appendChild(listWrapper)
	}
}
ajaxhttp.send(null);
5

спасибо, работает)) осталось понять как:D почитаем)

6

ок, а возможно ли поместить малую инфу в блок мини, а большую инфу в блок макси, и мини выводить сразу, а макси по клику на блок мини?

		var userBlocks = document.getElementsByClassName('user-block');
			for (var i = 0; i < userBlocks.length; i++) {
			userBlocks[i].onclick = function()
			{
			alert ('hello');	
			}
		}

вот такой вариант при клике на блок мини, выводит только привет, а как картинку и текст запилить не знаю в выод, и связать её с ajax запросом

window.onload = function() {
var output = document.body;
var ajaxhttp = new XMLHttpRequest();
var url = “https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture”;

function createItem(picSrc, title, first, last) {
	var div = document.createElement('div');
	div.innerHTML = '<div class="user-block"><div class="user-block-img"><img src="' + picSrc + '" /></div><ul class="user-block-list"><li>' + title + '</li><li>' + first + '</li><li>' + last + '</li></ul></div>';
	return div;		
}

ajaxhttp.open("GET", url, true);
ajaxhttp.setRequestHeader("content-type", "application/json");
ajaxhttp.onreadystatechange = function() {
	if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
		var jcontent = JSON.parse(ajaxhttp.responseText);
		var listWrapper = document.createElement('div');			
		jcontent.results.forEach(function (userJSON) {
			listWrapper.appendChild(createItem(userJSON.picture.medium, userJSON.name.title, userJSON.name.first, userJSON.name.last));
		});
		document.body.appendChild(listWrapper);
		var userBlocks = document.getElementsByClassName('user-block');
			for (var i = 0; i < userBlocks.length; i++) {
			userBlocks[i].onclick = function()
			{
			alert ('hello');	
			}
		}
	}
}
ajaxhttp.send(null);

}

9001398.gif1284×577 1.99 MB

7

Попапы (окошки, появляющиеся поверх контета) делаются с помощью html разметки, которая позиционируется так чтобы быть поверх контета.

Структурно код, отвечающий обработку клика по фейсу, выглядит так:

function handleClick() {
    var popup = showPopup() // Показать попап сразу после клика, с индикатором загрузки внутри
    sendAjax(function (ajaxResponse) { // Отправить запрос, и по получению ответа заполнить попап содержимым ответа
        fillPopup(ajaxResponse, popup)
    })
}