Почему страница показывается неполностью?

@tramp_1-3 · Регистрация: 13.10.2012

Студворк — интернет-сервис помощи студентам

Только начал изучать HTML с нуля. на сайте w3schools есть замечательный сквозной пример. по отдельности у меня всё получается, но вот решил на одну страницу засунуть обработку AJAX и JSON, в итоге показывается только JSON результат.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
    <title>Our company</title>
    <link href="Site.css" rel="stylesheet">
</head>
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
<h1>Customers</h1>
<p>AJAX</p>
<div id = "id01"></div>
<p>JSON</p>
<div id = "id02"></div>
<footer id="foot01"></footer>
</div>
 
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_HTML.php";
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("id01").innerHTML = 
        xmlhttp.responseText;
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
 
<script src="Script.js"></script>
 
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_JSON.php";
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
 xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
 
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
 
    out += "</table>"
    document.getElementById("id02").innerHTML = out;
}
</script>
</body>
</html>

Вкладка Customers
https://yadi.sk/d/MGuXSAv0dk4VH

@tramp_1-3 · 02.01.2015, 09:44 **[ТС]**

Оказывается, нужно было, чтобы в двух скриптах переменные назывались по-разному (конкретно - XMLHttpRequest). наверное, значения не очищаются при выходе и всё такое. где о таких вещах можно поподробнее почитать?

@whiteapps · 02.01.2015, 12:03

tramp_1-3,
гуглите js область видимости

@tramp_1-3 · 02.01.2015, 12:32 **[ТС]**

whiteapps, я понимаю, что видимость должна быть локальной. но на деле что-то непонятное происходит. переименовал переменную в первом скрипте и всё заработало.

@whiteapps · 02.01.2015, 13:33

tramp_1-3, нет, вы не понимаете

в обоих случая, xmlhttp - глобальная

JavaScript
1
var xmlhttp = new XMLHttpRequest();

область видимости в js определяется только ф-цией (в ecmascript 6 будет еще block scope, но пока об этом рано думать)

все остальное - глобальная ОВ

Добавлено через 8 минут
tramp_1-3, вообще в подобных случая, можно использовать замыкания

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
(function() {
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_HTML.php";
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("id01").innerHTML = 
        xmlhttp.responseText;
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
})()
 
 
(function() {
var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_JSON.php";
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
 xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
 
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
 
    out += "</table>"
    document.getElementById("id02").innerHTML = out;
}
})()

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@tramp_1-3 16 / 16 / 1 Регистрация: 13.10.2012 Сообщений: 454
	02.01.2015, 09:44 [ТС]
	Оказывается, нужно было, чтобы в двух скриптах переменные назывались по-разному (конкретно - XMLHttpRequest). наверное, значения не очищаются при выходе и всё такое. где о таких вещах можно поподробнее почитать? 0

@whiteapps 414 / 379 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	02.01.2015, 12:03
	tramp_1-3, гуглите js область видимости 0

@tramp_1-3 16 / 16 / 1 Регистрация: 13.10.2012 Сообщений: 454
	02.01.2015, 12:32 [ТС]
	whiteapps, я понимаю, что видимость должна быть локальной. но на деле что-то непонятное происходит. переименовал переменную в первом скрипте и всё заработало. 0

Почему страница показывается неполностью?

Решение