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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Ajax и jQuery

Ajax и jQuery

ЯзыкJavaScript - это мощное, но не всесильное средство. Если вы хотите представить информацию из базы данных, отослать электронное письмо с результатами заполнения формы или просто загрузить дополнительный НТМL-код, вам необходимо связаться с веб-сервером. Для этого обычно нужно загрузить новую веб-страницу. Например, при поиске в базе данных мы обычно покидаем страницу поиска и переходим к странице с результатами.

Разумеется, ожидание загрузки новых страниц занимает какое-то время. От сайтов люди ждут быстроты и интерактивности, как от компьютерных программ. Сайты, подобные Facebook, Twitter, Google Docs и Gmail, фактически стирают грань между сайтами и прикладными программами. Технология программирования, делающая возможным появление этого нового поколения веб-приложений, носит название Ajax.

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

Несмотря на то, что базовый процесс XMLHttpRequest не слишком сложен, всякий раз при создании запроса XHR необходимо выполнить много шагов. К счастью, библиотека jQuery предоставляет несколько функций, весьма упрощающих весь процесс.

Использование метода load()

Простейшим из методов Ajax, предлагаемых библиотекойjQuеrу, является load(). Он загружает НТМL-файл в указанный элемент на странице.

Чтобы применить функцию load(), сначала воспользуйтесь селектором jQuery для идентификации элемента на странице, где должен быть размещен запрашиваемый НТМL-контент; затем вызовите функцию load() и передайте URL-aдpec страницы, которую нужно получить. Например, у вас есть элемент div с идентификатором content и вы хотите загрузить HTML из файла test60.php в данный элемент. Сделать это можно следующим образом:

$("#content").load("test60.php ");

В процессе выполнения кода браузер запрашивает файл test60.php у веб-сервера. После его загрузки браузер заменяет текущее содержимое элемента div с идентификатором content данными из нового файла. НТМL-файл может представлять собой полную веб-страницу (включая элементы html, head и body) или только ее фрагмент, например, запрашиваемый файл может содержать всего лишь элемент h1 и абзац текста. В этом случае этот НТМL-фрагмент и вставляется на текущую (полную) страницу.


$(document).ready(function(e) {
$("#but1").click(function(e) {
$("#content").load("test60.php ");
$(this).css("display","none");
});
})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
#but1{margin:15px 0 0 15px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(e) {
$("#but1").click(function(e) {
$("#content").load("test60.php");
$(this).css("display","none");
});

});
</script>
</head>

<body>
<input type="button" value="Открыть" id="but1">
<div id="content">
Контент
</div>
</body>
</html>

Если мы нажмем кнопку "Открыть", то в то место на странице, где находится слово "контент", загрузится полностью страница test60.php. Кроме того, функция load() позволяет указать, какую часть загруженного НТМL-файла вы хотите добавить на страницу. Например, запрашиваемая страница является обычной страницей с сайта: она включает такие привычные элементы, как баннер, панель навигации и нижний колонтитул. Допустим, вас интересует лишь часть содержимого этой страницы, находящаяся в отдельно взятом элементе. Чтобы выбрать ее, вставьте пробел и селектор jQuery после URL-aдpeca. В нашем примере нам нужно вставить содержимое элемента form с идентификатором signup в файле test63.php. Для этого используем следующий код:

$("#content").load("test60.php #signup");

В данном случае браузер загружает страницу test60.php, но не вставляет все ее содержимое в элемент div с идентификатором content, а извлекает только элемент form (и все, что там есть) с идентификатором signup.


$(document).ready(function(e) {
$("#but1").click(function(e) {
$("#content").load("test60.php #signup");
$(this).css("display","none");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Использование метода load()</title>
<style>
#but1{margin:15px 0 0 15px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(e) {
$("#but1").click(function(e) {
$("#content").load("test60.php #signup");
$(this).css("display","none");
});

});
</script>
</head>

<body>
<input type="button" value="Открыть" id="but1">
<div id="content">
Контент
</div>
</body>
</html>

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

Для решения этой задачи разместим код JavaScript с целью "захватить" обычную функцию ссылки, затем получить URL-aдpec этой ссылки, после чего загрузить ссылку на страницу и поместить ее содержимое в пустой элемент div.

Начнем с присвоения события click каждой из ссылок маркированного списка в главной части страницы. Маркированный список (элемент ul) имеет идентификатор newslinks, так что с помощью библиотеки jQuеrу мы легко можем выбрать каждую ссылку и присвоить ей функцию click().

 $("#newslinks a").click(function(e) {
    
});

Код $("#newslinks a") - это способ выбора каждой ссылки, иcпользуемый библиотекой jQuery, а функция click() присваивает функцию (обработчик событий) событию click.

Внутри функции click введем код:

var url = $(this).attr("href");

Эта строка кода создает новую переменную (url) и присваивает ей значение атрибута ссылки href. При присоединении функции (типа click ()) к выборке jQuery ($("#newslinks a") в нашем случае) библиотека сканирует все элементы выборки (каждую ссылку) и применяет к каждому из них функцию. Код $(this) - это способ обращения к выбранному в данный момент элементу. Иначе говоря, ключевое слово $(this) будет относиться к разным ссылкам при проработке коллекции элементов в цикле. Следующим шагом используем этот URL-aдpec наряду с функцией load() для извлечения содержимого страницы и его вставки в элемент div на странице.

Для не допущения загрузки новой страницы введем следующий код:

return false;

$(document).ready(function(e) {
$("#newslinks a").click(function(e) {
var url = $(this).attr("href");
$("#content").load(url);
return false;
});

})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Использование метода load()</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#content, ul{margin:10px 0 0 20px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(e) {
$("#newslinks a").click(function(e) {
var url = $(this).attr("href");
$("#content").load(url);
return false;
});
});
</script>
</head>

<body>
<ul id="newslinks">
<li><a href="test32.php">test32.php</a></li>
<li><a href="test52.php">test52.php</a></li>
<li><a href="test60.php">test60.php</a></li>
</ul>
<div id="content"></div>
</body>
</html>