AJAX и jQuery. Как загрузить скрипт JavaScript динамически? (изменения от 16.01.2012)
Автор:
Источник: /ajax_script.php
Если вы только начинаете изучение технологии AJAX, то рекомендую начать со статьи "AJAX и jQuery. Динамическое обновление контента. Основы". Но те, кто уже ознакомился с основами, часто обращают внимание на то, что невозможно динамически загрузить страницу, содержащую JavaScript. И интересуются, как это сделать. Способ есть и он описан в данной статье.
За один AJAX-вызов можно сделать что-то одно. Либо динамически загрузить HTML-страницу, способом, который описывался в статье выше, либо динамически загрузить JavaScript, используя jQuery-функцию .getScript().
Если нужно загрузить сначала HTML, а затем выполнить скрипт, то эти два метода можно комбинировать.
Пример №1. Загрузка обычного скрипта JavaScript динамически.
Создадим 2 файла:
example1.html - с функией вызова скрипта и script.js - непосредственно вызываемый скрипт.
Содержимое HTML-файла example1.html:
<html>
<head>
<script src='jquery.js'></script>
</head>
<body>
<form>
<input type="button" value="Выполнить скрипт JavaScript" onclick="btnClick();"/>
</form>
<div id="content">
</div>
<script>
function btnClick() {
$.getScript('script.js'); // вызываем скрипт
}
</script>
</body>
</html>
Следует обратить внимание на то, что в этом файле вызывается библиотека jQuery, а также создается пустой контейнер content и форма с кнопкой, к которой привязывается событие btnClick().
JavaScript-файл с названием script.js будет содержать функцию вывода случайного числа в контейнер content.
// случайное число от 1 до 100
var rnd = Math.floor(Math.random()*100+1);
// выводим в контейнер content, добавляя уже к имеющемуся содержимому контейнера
$("#content").html($("#content").html()+rnd+"<BR/>");
Запускаем файл example1.html. Убеждаемся, что пример работает.
Скачать исходные файлы примера (32,1 кб):
/files/script_ex1.zip
Пример №2. Динамическая загрузка скрипта JavaScript, формируемого из PHP.
Как и в примере №1, базовая HTML-часть (файл example2.php) у нас остается практически без изменений. Изменим лишь название загружаемого файла в функции $.getScript():
$.getScript('script.php'); // вызываем скрипт
Скрипт (script.php) мы немного изменяем для того, чтобы продемонстрировать то, что он на самом деле генерируется с помощью PHP. Результатом его работы также станут случайные числа в диапазоне от 1 до 100.
<?php
// заголовок, который обозначает, что PHP будет генерировать
// JavaScript-файл в кодировке UTF-8.
header('Content-Type: text/javascript; charset=UTF-8');
// генерируем случайное число от 1 до 100
$rnd = rand(1,100);
// выдаем код скрипта в поток вывода
echo '$("#content").html($("#content").html()+'.$rnd.'+"<BR/>");';
?>
Запускаем файл example2.html. Убеждаемся, что пример работает.
Скачать исходные файлы примера (32,1 кб):
/files/script_ex2.zip
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.
3. Если вы формируете JavaScript-файл из PHP-скрипта, следует в начале PHP-файла обязательно добавить вызов функции header(), как это сделано в примере №2.
header('Content-Type: text/javascript; charset=UTF-8');
Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/
Хотите дополнить - пишите:
Статьи по теме
AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON;
AJAX и jQuery. Динамическое обновление контента. Основы;
Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX;
Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.
|
