Как грамотно загрузить HTML страницу в другую HTML страницу на JavaScript?

Question

[smart_alex]

Как написать эквивалентный код, но только чтобы common.htm загружался по сети не три раза, а только один раз? На чистом JavaScript и/или на jQuery.

$('#header').load('common.htm .header');
$('#menu').load('common.htm .menu');
$('#footer').load('common.htm .footer');

Comments

[smart_alex]

Огромное спасибо! Это работает. Программа минимум выполнена. Но есть один момент. Система имеет крайний дефицит ресурсов и, если есть возможность, нужно избавиться от jQuery. Может кто-нибудь написать эквивалент без jQuery?

[Алексей Уколов]

jQuery-то как на потребление ресурсов влияет?

[Алексей Уколов]

Anyway, вам сюда в таком случае - youmightnotneedjquery.com/#request

[Алексей Уколов]

Но никакого профита в плане потребления ресурсов вы не получите.

[smart_alex]

Пардон, никак не разберусь как тут пользоваться. Это проект Arduino Mega Server
https://geektimes.ru/post/259248/ и работает всё это на 8-и битной Ардуине, так что...

[Алексей Уколов]

smart_alex: так ведь это сервер, при чем тут jQuery? Или вы переживаете, что сам файл библиотеки нужно будет хранить на самом сервере и пытаетесь сэкономить место? В таком случае CDN будет лучшим решением.

[Алексей Уколов]

Опишите свою задачу в целом, я что-то не могу понять что вы пытаетесь сделать.

[smart_alex]

Смысл в том, что у W5100 четыре аппаратных сокета и нужно умудриться загрузить полноценную страницу за 3 — 4 запроса. Ваш код решает часть проблемы для загрузки и сборки HTML странички за один запрос. Ещё один — CSS и ещё один — JS.

iQuery нужна только для сборки страницы и занимает лишнее соединение, которое уходит на 3-х секундную ретрансмиссию и тормозит появление страницы на экране.

Так уже приемлемо, но без iQuery будет на 3 секунды быстрее.

[Алексей Уколов]

Никто не мешает сконкатенировать весь js в один файл, чтобы не грузить библиотеки отдельными соединениями. Ну а ссылку на реализацию ajax-запроса без jQ я выше дал.

[smart_alex]

Отлично, большое спасибо, отмечу ваш код как решение.

[smart_alex]

Алексей, вопрос вдогонку: а что в этом коде не нравится IE10? И можно ли это поправить?

Answer 1

[Алексей Уколов]

Если грамотно, то вот так:

var request = $.get('common.htm');

request.done(function(response) {
    var $response = $(response);

    // Вместо $response.find(), возможно, придется использовать $response.filter()
    // Это зависит от структуры возвращаемого документа
    $('#header').html($response.find('.header').html());
    $('#menu').html($response.find('.menu').html());
    $('#footer').html($response.find('.footer').html());
});