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

сайт для веб-мастеров и веб-разработчиков
  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта


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



    Что нового в блоге?



    AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

    Автор:
    Источник: /ajax.php

    В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.

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

    jQuery - JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

    Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

    В данной статье мы будем рассматривать только одну функцию библиотеки jQuery, а именно функцию $.ajax(). Эта функция позволяет нам как передавать данные на сервер, так и получать ответы от сервера и все это в фоновом режиме, без перезагрузки страницы. Настройка приема или передачи данных зависит от параметров, с которыми вызывается функция $.ajax(). Основные из них будут рассмотрены ниже. Подробнее о параметрах можно прочесть в руководстве по jQuery.

    Перейдем к рассмотрению примеров.

    Важно!
    Для того, чтобы примеры работали корректно, необходимо:
    1. Все файлы должны быть записаны в кодировке UTF-8.
    2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

    Пример 1. Динамическое обновление контента по таймеру

    Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.

    Содержимое файла index.html.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    
    <body>
    	
    	<div id="content"></div>
    	
    	<script>
    		function show()
    		{
    			$.ajax({
    				url: "time.php",
    				cache: false,
    				success: function(html){
    					$("#content").html(html);
    				}
    			});
    		}
    	
    		$(document).ready(function(){
    			show();
    			setInterval('show()',1000);
    		});
    	</script>
    	
    </body>
    </html>
    

    В коде имеются несколько особенностей, поясним их.

    1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.

    <script type="text/javascript" src="jquery.js"></script>
    
    Сам файл jquery.js - находится в той же папке, что и файлы примера.

    2. В теле документа создается контейнер, в который мы будем загружать контент.

    <div id="content"></div>
    

    3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

    $(document).ready(function(){
    	show();
    	setInterval('show()',1000);
    });
    

    4. Функция show() состоит из обращения к функции $.ajax() с определенным рядом параметров, которая позволяет нам в фоновом режиме получить информацию из внешнего файла на сервере.

    $.ajax({
    	url: "time.php",
    	cache: false,
    	success: function(html){
    		$("#content").html(html);
    	}
    });
    

    Рассмотрим используемые параметры функции $.ajax().

    url: "time.php"
    
    Обращается к файлу time.php для получения контента.

    cache: false
    
    Результаты запросов не кэшируются.

    success: function(html){
    	$("#content").html(html);
    }
    
    При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:
    $("#content").html(html);
    

    Содержимое файла time.php.

    <?php echo date("H:i:s"); ?>
    

    Смысл работы файла time.php - выводим текущее время на экран.

    Скачать исходные файлы примера (16,6 кб):
    /files/ajax_ex1.zip

    Пример 2. Динамическое обновление контента по выбору пользователя

    Программа, динамически загружающая контент, по выбору пользователя.

    Содержимое файла index.html.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    
    <body>
    	
    	<p>Какую страницу желаете открыть?</p>
    	<form>
    		<input id="btn1" type="button" value="Страница 1"> 
    		<input id="btn2" type="button" value="Страница 2">
    	</form>
    	<div id="content"></div>
    	
    	<script>
    		$(document).ready(function(){
    		
    			$('#btn1').click(function(){
    				$.ajax({
    					url: "page1.html",
    					cache: false,
    					success: function(html){
    						$("#content").html(html);
    					}
    				});
    			});
    			
    			$('#btn2').click(function(){
    				$.ajax({
    					url: "page2.html",
    					cache: false,
    					success: function(html){
    						$("#content").html(html);
    					}
    				});
    			});
    			
    		});
    	</script>
    	
    </body>
    </html>
    

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

    Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.

    Событие нажатия на кнопку "Страница 1" обрабатывается функцией $('#btn1').click(), а событие нажатия на кнопку "Страница 2" обрабатывается функцией $('#btn2').click().

    Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

    Скачать исходные файлы примера (18,4 кб):
    /files/ajax_ex2.zip

    Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

    Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.

    Содержимое файла index.html.

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    
    <body>
    	
    	<form id="myForm">
    	Введите имя:<br/>
    		<input id="username" type="text" size="20"><br/><br/>
    		<input type="submit" value="Отправить">
    	</form>
    	
    	<div id="content"></div>
    	
    	<script>
    		$(document).ready(function(){
    		
    			$('#myForm').submit(function(){
    				$.ajax({
    					type: "POST",
    					url: "greetings.php",
    					data: "username="+$("#username").val(),
    					success: function(html){
    						$("#content").html(html);
    				   	}
    				});
    				return false;
    			});
    			
    		});
    	</script>
    	
    </body>
    </html>
    

    В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

    Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку "Отправить", выступает функция $('#myForm').submit(). Рассмотрим эту функцию.

    $('#myForm').submit(function(){
    	$.ajax({
    		type: "POST",
    		url: "greetings.php",
    		data: "username="+$("#username").val(),
    		success: function(html){
    			$("#content").html(html);
    		}
    	});
    	return false;
    });
    

    Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

    type: "POST"
    
    Тип передачи данных.

    data: "username="+$("#username").val()
    
    Параметры, передаваемые серверу. В данном случае мы передаем содержимое поля username - имя пользователя. В общем случае, параметры записываются также, как в методе GET, одной строкой, например:
    data: "username=Vasya&age=18&sex=male"
    

    Обратим внимание, что в конце написана строка:

    return false;
    
    Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.

    Содержимое файла greetings.php.

    <?php 
    	echo "Приветствую, <b>".$_REQUEST['username']."</b>!<br>";
    	echo "В вашем имени букв: ".strlen($_REQUEST['username']).".";
    ?>
    

    Выводим на экран приветствие и подсчитываем количество символов в имени.

    Скачать исходные файлы примера (16,8 кб):
    /files/ajax_ex3.zip

    В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
    «Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

    Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:

    1. На страницах с динамическим обновлением контента, кнопка "Назад" в браузере не работает корректно.

    2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

    3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

    От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.

    Хотите дополнить - пишите:

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

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






    Если вы хотите провести время необычно и ярко, то https://irk-dd.com - лучший вариант. | Девушки с сайта https://kiselevsksm.com готовы оказать профессиональные услуги и сделать ваш вечер незабываемым. | На сайте https://kamenskuralskiysm.com вы найдете девушек, готовых стать вашими нежными собеседницами и партнерами в любых приключениях. | На сайте https://ruzasm.com вы сможете выбрать девушку по своему вкусу, чтобы воплотить в жизнь свои самые смелые фантазии. | На https://uzhnosahalinsksm.com можно найти девушек разных возрастов, что позволяет выбрать подходящую по вашим предпочтениям. | По адресу https://voskresensksm.com вы найдете девушек на любой вкус и предпочтения. | https://prostitutkiizhevskacity.info - Неотразимые проститутки Ижевска предлагают эксклюзивные встречи, которые откроют для тебя новые грани удовольствия.

    © 2008 - 2022 :: Codething.ru
    При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
    Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
    Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.