Можно ли загрузить новые файлы Javascript с помощью AJAX?

Question

Я создаю новый веб-сайт с поддержкой AJAX с различными разделами. Каждый раздел требует нового набора функций Javascript для запуска. Я бы предпочел не загружать каждый скрипт в начале, так как их может быть довольно много.

Есть ли способ загрузить новые скрипты с использованием AJAX и удалить старые (чтобы убедиться, что нет проблем совместимости с похожими именами переменных или сигнатурами функций).

Спасибо

Редактировать - JQuery в порядке, он не обязательно должен быть старой школы Javascript

Answer 1

Три вещи:

1) Да, вы можете загружать новые скрипты. Вам даже не нужен AJAX в смысле XHR - просто включите тег script на свою страницу динамически. jQuery предоставляет $ .getScript () для подобных вещей, или вы можете просто создать элемент script и добавить его в заголовок вашего документа. Есть несколько примеров, если вы гуглите.

2) По поводу удаления старого (и конфликтов и т. Д.). Предполагая, что у вас есть контроль над этими именами функций, просто присвойте им пространство имен:

window.myapp = {};
window.myapp.mysection = {};
window.myapp.myothersection = {};
window.myapp.mysection.myfunction = function(){}

Тогда вам не нужно беспокоиться о конфликтах.

3) Будьте осторожны с этим. Затраты на загрузку всех этих сценариев по требованию могут быть не просто сжатием и загрузкой всего этого за один раз.

Answer 2

jQuery делает это довольно просто.

$.getScript('myscript.js', function() {
  console.debug('Script loaded.');
});

Если вы не можете использовать jQuery, есть еще несколько строк для записи.

var head = document.getElementByTagName('head')[0],
    script = document.createElement('script');
script.src = 'myscript.js';
head.appendChild(script);

Answer 3

Элементы скрипта также являются частью дерева DOM, вы можете прикреплять и удалять их по своему усмотрению.

Answer 4

Да, вы можете использовать oldschool Javascript.

function addScript(src) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    document.getElementsByTagName('head')[0].appendChild(s);
    return s;  // to remove it later
}

После загрузки скрипта вы можете снова удалить тег (с помощью removeChild), например, при загрузке нового раздела.Это причина для оператора return в конце моей функции.Я не совсем уверен, что это даже полезно.

Вы можете добавить атрибут "onload", чтобы получить предупреждение через обратный вызов, когда скрипт полностью загружен, хотя это, вероятно, не очень кроссплатформенно.

Answer 5

Для загрузки новых сценариев вы должны проверить LABjs

Однако их выгрузка невозможна, см. другой пост StackOverflow по этому вопросу.

Answer 6

Я никогда не пробовал это раньше ... но вы можете попробовать вызвать php-форму с помощью ajax и добавить новый javascript к элементу div in body. Я надеюсь, что это сработает ..

Answer 7

Просто Google JavaScript по требованию

http://www.google.ca/search?sourceid=chrome&ie=UTF-8&q=javascript+on+demand

Например, jQuery предоставляет $ .getScript (), см. http://api.jquery.com/jQuery.getScript/