Уголок веб-разработчика

сайт для веб-мастеров и веб-разработчиков


Реклама на сайте
как разместить свою рекламу?



Читайте наш блог!



AJAX и jQuery. Как загрузить скрипт JavaScript динамически? (изменения от 16.01.2012)

Автор: Михаил Пестречихин
Источник: http://www.codething.ru/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 кб):
http://codething.ru/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 кб):
http://codething.ru/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/

Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме

AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON;
AJAX и jQuery. Динамическое обновление контента. Основы;
Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX;
Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.







Rambler's Top100
© Студия Михаила Пестречихина, 2008-2017
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.
Хостинг «Джино»