Загрузка HTML из файла с помощью JavaScript


Сегодня я пытался загрузить навигации с другой HTML-страницы. Вот код, который я использую. Что вы думаете об этом? Есть ли другой способ сделать это?

var x = document.getElementsByClassName("PageLoader");
var url = "";

for (var i = 0;i<x.length;i++){
    url = x[i].dataset.url;
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", url, false );
    xmlHttp.send( null );
    x[i].innerHTML = xmlHttp.responseText;
}


191
2
задан 13 февраля 2018 в 03:02 Источник Поделиться
Комментарии
2 ответа

У меня есть некоторые проблемы с вашим кодом и возможных альтернатив для реализации.

Использование var

В JavaScript с использованием var вместо let или const несколько разочарованы (в новую эпоху из ES6). Есть какое-то значение в блоке простор для петель с использованием var но вы можете, конечно, всегда использовать ES6 в' let вместо. Поскольку вы не переназначили xmlHttp вы могли бы также const что (то же касается x и let для url).

Использовать fetch вместо XMLHttpRequest

Принести приходит с обещанием-готовые упрощенные API для обработки запросов. CanIUse сообщает, что он почти поддерживается на каждом новом браузере, а также. Полифилла должно быть достаточно для поддержки остальных браузеров. Это также помогает в читаемость и простота.

В вашем случае, получая HTML из запросов является простой, как:

fetch(...)
.then(function (response) {
// Status 200? Type text/html? Might aswell check that here.
return response.text();
})
.then(function (body) {
// Insert into dom here...
console.debug(body);
})

Обработка ошибок Спасибо fetch

Что произойдет, если Ваш URL-адрес неисправен, временно не работает, а какая-то другая ошибка? Если вам нужна обработка ошибок, тогда просто добавьте ловить ниже then:

.catch(e){
// Display message, console silenty
console.debug(e);
}

Использование внешних библиотек обычно не требуется, а ЕС6 приносит в любом случае самый удар для доллара.

5
ответ дан 14 февраля 2018 в 09:02 Источник Поделиться


Что вы думаете об этом?

Прохождение false а в 3РД параметра (т. е. асинхронно), чтобы .открыть() несколько сомнительна. Есть причина, что желательно? Возможно, цель была, чтобы запросы запустить в серию. Иначе, если их запустить параллельно приемлемо, то время загрузки все запросы могут быть короче. Конечно, можно было бы дождаться ответа, чтобы быть готовой перед использованием responseText, и убедитесь, что значение я это поддерживается должным образом. Один из способов сделать это-использовать функцию.привязать() сделать частично примененные функции. Расширить фрагмент кода ниже и запустите его для демонстрации.



var x = document.getElementsByClassName("PageLoader");
var url = "";

for (var i = 0; i < x.length; i++) {
url = x[i].dataset.url;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url);
xmlHttp.send(null);
xmlHttp.onload = function(xmlHttp, i) {
if (xmlHttp.readyState === XMLHttpRequest.DONE) {
if (xmlHttp.status === 200) {
console.log('readyState == DONE, status == 200; i: ', i);
x[i].innerHTML = xmlHttp.responseText
} else {
console.log('readyState == DONE, status: ', xmlHttp.status);
}
}
//bind context to a null object, pass the current xmlHttp instance and i to the function
}.bind(null, xmlHttp, i);
}


.cell {
display: table-cell;
max-width: 200px;
word-wrap: break-word;
border: 2px solid #f00;
padding: 8px;
margin: 5px;
}

<div class="cell">Badges:
<div data-url="https://api.stackexchange.com/2.2/badges?order=desc&sort=rank&site=stackoverflow&pagesize=1" class="PageLoader"></div>
</div>
<div class="cell">Tags:
<div data-url="https://api.stackexchange.com/2.2/tags?order=desc&sort=popular&site=stackoverflow&pagesize=1" class="PageLoader"></div>
</div>



Есть ли другой способ сделать это?

Да, в дополнение к выше примере, вы могли бы также использовать один из многих библиотек, реферат функции объекта XMLHttpRequest в фантики (А. К. А. фантиков Аякс). Многие из этих фантиков использовать обещания. В XMLHttpRequest код может быть абстрагирована в оболочку с помощью обещаний (см. В этом примере). Для сравнения многие популярные библиотеки, смотрите на этой странице.

Одним из примеров является извлечение API-интерфейс. Однако помните, браузер с совместимостью могут быть проблемы (например, если поддержка старых браузеров, как IE нужен).

1
ответ дан 13 февраля 2018 в 05:02 Источник Поделиться