programmingSimilar presentations:
Программирование в компьютерных сетях. Лекция 9. Ajax
1.
Курс«Программирование в
компьютерных сетях»
Лекция 9
Приходько Татьяна Александровна
доцент кафедры
Вычислительных технологий КубГУ
1
2. Лекция 9
Ajax3. Библиотека JQurey
«WEB-технологии. JQuery»Библиотека JQurey
План лекции
• Ajax
• Задания для лабораторной
3
4. Ajax
«WEB-технологии. Ajax»Ajax
AJAX – группа технологий, которая используется в веб
разработке для создания интерактивных приложений. AJAX
позволяет передавать данные с сервера без перезагрузки
страницы.
Таким образом можно получать очень впечатляющие
результаты (по скорости). А библиотека jQuery существенно
облегчает реализацию AJAX с помощью встроенных методов.
AJAX, Ajax (Asynchronous Javascript and XML — «асинхронный
JavaScript и XML») — подход к построению интерактивных
пользовательских интерфейсов веб-приложений, заключающийся
в «фоновом» обмене данными браузера с веб-сервером.
В результате, при обновлении данных веб-страница не
перезагружается полностью, и веб-приложения становятся
быстрее и удобнее.
4
5. Ajax
«WEB-технологии. Ajax»Ajax
2
1
3
5
6. Синхронный обмен (без Ajax)
«WEB-технологии. Ajax»Синхронный обмен (без Ajax)
Пользователь не может заниматься чем-то другим на этой же странице,
пока происходит синхронный обмен данными.
1
2
3
1.HTTP-запрос отправляется с веббраузера на сервер.
2.Сервер получает и впоследствии
извлекает данные из БД.
3.Сервер отправляет запрошенные
данные в веб-браузер.
4.Веб-браузер получает данные и
перезагружает страницу для
отображения данных.
6
7. Ajax
«WEB-технологии. Ajax»Ajax
1
2
3
4
Здесь сервер сразу же уведомляет
браузер о том, что запрос принят в
обработку и освобождает его для
дальнейшей работы. Когда ответ будет
готов - сервер перешлет его, и в
браузере будет вызвана
соответствующая функция показа, но
пока этот ответ формируется и
пересылается - браузер свободен.
1.Браузер создаёт вызов JavaScript, который затем
активирует XMLHttpRequest.
2.В фоновом режиме веб-браузер создаёт HTTP-запрос к
серверу.
3.Сервер получает, извлекает и отправляет данные
обратно в веб-браузер.
4.Веб-браузер получает запрошенные данные, которые
будут непосредственно отображаться на странице.
Перезагрузка не требуется.
7
8. Ajax
«WEB-технологии. Ajax»Ajax
Считаем, что запрос уже был отправлен
8
9. Особенности асинхронной модели
«WEB-технологии. Ajax»Особенности асинхронной модели
•Сложность в реализации
• Недостаточные возможности браузера (javascript)
• Асинхронная модель сложнее для отладки
•Race conditions (гонки)
• Не определена последовательность выполнения
• Можно делать много одновременных задач, но задача, начатая первой,
может окончиться последней.
• Реакция тут же, но неизвестно, какой будет результат.
•Усложнена обработка ошибок
• Ошибок коммуникации - разрыв связи, и т.п.
• Пользовательских ошибок - например, не хватило привилегий
•Контроль целостности (bugproof)
• Например, редактор отправил асинхронный запрос на удаление ветки
дерева. Добавление в нее нужно отключить, пока не придет ответ
сервера. Если вдруг не хватило привилегий, то операция не удалась.
•Интерактивность
•Быстрый интерфейс
9
10. Ajax
«WEB-технологии. Ajax»Ajax
Наиболее полезные примеры использования AJAX:
•Система голосования и рейтинга
Вы когда-нибудь оценивали продукт, который вы купили онлайн? Вы когда-нибудь
заполняли форму онлайн-голосования? В любом случае, обе операции используют
AJAX. После того, как вы нажмёте кнопку рейтинга или голосования, веб-сайт
обновит расчёт, но вся страница останется неизменной.
•Чаты
На некоторых веб-сайтах есть встроенный чат на главной странице, для связи с
сотрудником службы поддержки. AJAX не будет перезагружать вашу страницу
каждый раз, когда вы отправляете и получаете новое сообщение. Одновременно
можно продолжать изучать страницу.
•Трендовое уведомление Twitter
Twitter недавно использовал AJAX для своих обновлений. Каждый раз, когда
появляются новые твиты по определённым актуальным темам, Twitter будет
обновлять новые цифры, не затрагивая главную страницу.
Проще говоря, AJAX упрощает многозадачность. Если две операции работают
одновременно, причём одна из них работает, а другая бездействует, это может
быть сделано с помощью AJAX.
10
11. Ajax
«WEB-технологии. Ajax»Ajax
•При использовании Google или web-клиента Gmail вам уже приходилось
сталкиваться с решением, основанном на AJAX. Это технология-конгломерат, которая
обеспечивает динамическое и асинхронное поведение, где исключается обновление
страниц. Посредством AJAX пользователь может взаимодействовать с webстраницами, подобно работе с клиентами с более богатыми возможностями.
•Технология, следующая за AJAX, вряд ли является новшеством, однако недавно
стали появляться некоторые мощные новые приложения, использующие объект
XMLHttpRequest, они вдохнули новую жизнь в концепцию обновления образа
клиентской части.
•Самым примечательным из этих новых приложений является Google Maps.
Пользуясь им, можно находить определенную местность на карте планеты, затем
переходить к более мелким объектам, прокручивать, перетягивать карту без
необходимости обновления страницы.
11
12. Ajax
«WEB-технологии. Ajax»Ajax
12
13. Ajax
«WEB-технологии. Ajax»Ajax
Термин Ajax представляет широкую группу веб-технологий, которые можно
использовать для реализации веб-приложения, которое взаимодействует с сервером в
фоновом режиме, не влияя на текущее состояние страницы. В статье, которая ввела
термин Ajax, Джесси Джеймс Гарретт объяснил, что включены следующие технологии:
• HTML (или XHTML ) и CSS для презентации
• (DOM) для динамического отображения и взаимодействия с данными
• JSON или XML для обмена данными и XSLT для их манипулирования
• Объект XMLHttpRequest для асинхронной связи
• JavaScript, чтобы объединить эти технологии
Нотация объектов JavaScript (JSON) часто используется в качестве альтернативного
формата для обмена данными, хотя могут использоваться и другие форматы, такие как
предварительно отформатированный HTML или простой текст. Различные популярные
библиотеки JavaScript, включая JQuery, включают абстракции, помогающие выполнять
запросы Ajax.
13
14. Ajax
«WEB-технологии. Ajax»Ajax
Отправка запросов серверу без перезагрузки страницы
Для того, чтобы послать HTTP запрос на сервер используя JavaScript, понадобится экземпляр
класса, который позволит это сделать.
let request= new XMLHttpRequest ();
Далее необходимо решить, что вы будете делать после получения ответа сервера. На этом
этапе необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это
делается путём присваивания свойству onreadystatechange имени JavaScript функции, которую вы
собираетесь использовать:
request.onreadystatechange = function(){ //
какой-нибудь код };
Далее, после того как мы объявили что будет происходить после получения ответа, необходимо
сделать запрос.
Мы должны вызвать методы класса open() и send():
request.open('GET',
'http://www.example.org/some.file', true);
request.send(null);
14
15. Ajax
«WEB-технологии. Ajax»Ajax
Отправка запросов серверу без перезагрузки страницы
(метод open, типы адресатов)
при отправке запроса на сервер создается экземпляр объекта запроса с
помощью метода open() объекта XMLHttpRequest.
Примеры:
request.open("GET", "info.txt");
/*Or*/
request.open("POST", "add-user.php");
/*Or*/
httpRequest.open('GET', 'http://www.example.org/some.file', true);
Файл может быть любого типа, например .txt или .xml, или файлы скриптов
на стороне сервера, например .php или .asp, которые могут выполнять
некоторые действия на сервере (например, вставка или чтение данных из
базы) перед отправкой ответа.
Метод open не открывает соединение. Он лишь
настраивает запрос, а коммуникация инициируется
методом send.
15
16. Ajax
«WEB-технологии. Ajax»Ajax
Отправка запросов серверу без перезагрузки страницы
1 (метод open)
httpRequest.open('GET',
3
2
'http://www.example.org/some.file', true, user, password);
httpRequest.send(null);
Первый параметр вызова функции open() — метод HTTP запроса (GET, POST,
HEAD или любой другой метод, который вы хотите использовать). Используйте методы в
соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут
не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу
спецификации W3C.
Второй параметр — URL запрашиваемой страницы. Из соображений безопасности
возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы
используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку
'доступ запрещён' при вызове функции open(). Типичной ошибкой при доступе к сайту
через site.ru является отправка запроса на www.site.ru.
Третий параметр указывает, является ли запрос асинхронным. Если он TRUE, то
выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и
заключается асинхронность технологии.
16
17. Ajax
«WEB-технологии. Ajax»Ajax
Отправка запросов серверу без перезагрузки страницы
Параметром метода send() могут быть любые данные, которые вы хотите послать на
сервер. Данные должны быть сформированы в строку запроса:
name=value&anothername=othervalue&so=on
Если вы хотите отправить данные методом POST, нужно изменить MIME-тип запроса с
помощью следующей строки:
httpRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
Иначе сервер проигнорирует данные, отправленные методом POST.
17
18. Ajax
«WEB-технологии. Ajax»Ajax
Обрабатываем ответ сервера
Отправляя запрос, мы указали имя функции JavaScript, обрабатывающей ответ.
httpRequest.onreadystatechange = nameOfTheFunction;
Давайте посмотрим, что эта функция должна делать. 1) из названия следует, что это
callback- функция. 2) функция должна проверять статус запроса: Если значение
переменной статуса ==4, то это означает, что ответ от сервера получен и его можно
обрабатывать. 3) Но сначала нужно проанализировать код ответа.
function alertContents(httpRequest) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert(httpRequest.responseText); }
else { alert('С запросом возникла проблема.'); }
}
}
18
19. Ajax
«WEB-технологии. Ajax»Ajax
Обрабатываем ответ сервера
После проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными,
полученными от сервера, всё что угодно. Есть два способа получить доступ к данным:
httpRequest.responseText – возвращает ответ сервера в виде строки текста.
Есть и ещё одно свойство, которое используется гораздо реже:responseXML
Если сервер вернул XML, снабдив его правильным заголовком Content-type:
text/xml, то браузер создаст из него XML-документ. По нему можно будет делать
запросы xhr.responseXml.querySelector("...") и другие.
Такой вариант используется редко, так как обычно используют не XML, а
JSON. То есть, сервер возвращает JSON в виде текста, который браузер
превращает в объект вызовом JSON.parse(xhr.responseText).
19
20. Ajax
«WEB-технологии. Ajax»Пример:
get-ajax-data.js:
Ajax
// Это клиентский скрипт.
// Инициализируем HTTP-запрос.
let request= new XMLHttpRequest ();
request.open ('GET', 'send-ajax-data.php');
// Отслеживаем изменения состояния запроса.
request.onreadystatechange = function () {
let DONE = 4 ;
// readyState 4 означает, что запрос выполнен.
let OK = 200 ; // статус 200 - успешное возвращение.
if (request.readyState === DONE ) {
if (request.status === OK) {
console.log (request.responseText); // 'Это вывод.'
} else {console.log («Ошибка:» + request.status);
// Произошла ошибка во время запроса. } } };
// Отправляем запрос на send-ajax-data.php
request.send(null);
20
21. Ajax
«WEB-технологии. Ajax»Пример:
send-ajax-data.js:
Ajax
<? php // Это серверный скрипт.
// Установить тип контента.
('Content-Type: text / plain' );
// Сообщить IP клиента
// Отправить данные обратно.
echo $_SERVER('REMOTE_ADDR');
?>
Полный список значений кодов readyState такой:
•0 (uninitialized)
•1 (loading)
•2 (loaded)
•3 (interactive)
•4 (complete)
21
22. Ajax
«WEB-технологии. Ajax»Ajax
Пример
//Данные для передачи на сервер например id товаров и его количество
let id_product = 21; let qty_product = 2;
// принцип тот же самый что и у обычного POST запроса
const request = new XMLHttpRequest();
const url = "ajax_quest.php";
const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
//Здесь нужно указать в каком формате мы будем принимать данные вот и все отличие
request.responseType ="json";
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener("readystatechange", () => {
if (request.readyState === 4 && request.status === 200) {
let obj = request.response; console.log(obj);
// Здесь мы можем обращаться к свойству объекта и получать его значение
console.log(obj.id_product);
console.log(obj.qty_product); }
});
request.send(params);
22
23. Ajax
«WEB-технологии. Ajax»Ajax
Транспортные технологии
Чтобы написать AJAX-приложение, нужно уметь связываться с
сервером.
Технологии, которые обеспечивают такую связь, называют
транспортами. Разные транспорты имеют разные возможности и
ограничения.
1. Объект XMLHTTPRequest (XHR) - низкоуровневая основа большинства
AJAX-приложений (класс). Знание его методов, свойств и особенностей не
только помогает писать приложения на низком уровне с минимумом
javascript-кода, но и позволяет понять, что происходит внутри
фреймворков, которые, увы, часто несовершенны или тянут много лишнего.
23
24. Ajax
«WEB-технологии. Ajax»Ajax
Транспортные технологии
2. AJAX-транспорт Script. Запросы способом Script подразумевают
только GET и имеют сложности с отслеживанием ошибок. Но зато их можно
делать на любые домены, что и составляет основную область применения
этого транспорта.
3. AJAX-транспорт Iframe. Этот транспорт пожалуй, самый универсальный
и мощный, но и тонкостей в нем больше всех.
Для общения с сервером создается невидимый IFrame. Простая смена URL
этого iframe - запрос к серверу за данными. Кроме того, в iframe
можно отправлять post-запросы поставив его имя в атрибут form.target.
Подробности
http://javascript.ru/ajax/transport
24
25. Ajax
«WEB-технологии. Ajax»Ajax
Транспортные технологии (режимы работы)
В синхронном режиме в скрипте выполняется вызов метода send()
объекта XMLHttpRequest для отправки HTTP-запроса и выполнение
скрипта приостанавливается до получения ответа от сервера;
В асинхронном – во время и после выполнения запроса работа скрипта
продолжается, а при получении ответа вызывается обработчик
специального события.
Запрос можно делать только к ресурсам с именем
домена, совпадающим с именем домена, с которого
загружена текущая страница. Подобное ограничение
называют same-origin policy, и оно применяется во
многих веб-технологиях в целях безопасности.
25
26. Ajax
«WEB-технологии. Ajax»Ajax
к практике
console.log(0);
const request = new XMLHttpRequest();
const url='https://httpbin.org/ip';
request.open('GET', url);
request.setRequestHeader('Content-type', 'application/json; charset=utf-8',url);
// Здесь мы получаем ответ от сервера на запрос, лучше сказать ждем ответ от
сервера
request.addEventListener("readystatechange", () => {
if (request.readyState === 4 && request.status === 200) {
// выводим в консоль то что ответил сервер
console.log(1);
console.log( request.responseText );
}
});
// Выполняем запрос
request.send();
console.log(2);
В каком порядке в
консоль выведутся
сообщения?
26
27. Ajax
«WEB-технологии. Ajax»Ajax
к практике
27
28. Ajax
«WEB-технологии. JQuery»Ajax
к практике
Куда можно отправить DUMMY-запросы для тестирования?
•https://httpbin.org/anything Returns most of the below.
•https://httpbin.org/ip Returns Origin IP.
•https://httpbin.org/user-agent Returns user-agent.
•https://httpbin.org/headers Returns header dict.
•https://httpbin.org/get Returns GET data.
•https://httpbin.org/post Returns POST data.
•https://httpbin.org/put Returns PUT data.
•https://httpbin.org/delete Returns DELETE data
•https://httpbin.org/gzip Returns gzip-encoded data.
•https://httpbin.org/status/:code Returns given HTTP Status code.
•https://httpbin.org/response-headers?key=val Returns given response headers.
•https://httpbin.org/redirect/:n 302 Redirects n times.
•https://httpbin.org/relative-redirect/:n 302 Relative redirects n times.
•https://httpbin.org/cookies Returns cookie data.
•https://httpbin.org/cookies/set/:name/:value Sets a simple cookie.
•https://httpbin.org/basic-auth/:user/:passwd Challenges HTTPBasic Auth.
•https://httpbin.org/hidden-basic-auth/:user/:passwd 404'd BasicAuth.
•https://httpbin.org/digest-auth/:qop/:user/:passwd Challenges HTTP Digest Auth.
•https://httpbin.org/stream/:n Streams n–100 lines.
•https://httpbin.org/delay/:n Delays responding for n–10 seconds.
28
29. Ajax
«WEB-технологии. Ajax»Ajax
к практике
Есть ли в коде Callback?
Тот же запрос
можем отправить с
помощью JQuery,
если добавим в
файл строку 1
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.mi
n.js">
</script>
Обратите внимание на
порядок выполнения!
29
30. Ajax
«WEB-технологии. Ajax»Ajax
к практике
Каждому студенту
необходимо
протестировать
Ajax – запросы с
помощью devTools
Все эти
закладки надо
просмотреть!
30
31. Просто запрос
«WEB-технологии. Ajax»Просто запрос
Если мы введем запрос в адресную строку, то получим на
странице уже известный нам ответ!
31
32. Ajax
«WEB-технологии. Ajax»Ajax
к практике
Обмениваться данными с сервером можно двумя способами. Первый
способ — это GET-запрос. В этом запросе вы обращаетесь к документу
на сервере, передавая ему аргументы через сам URL. При этом на
стороне клиента будет логично использовать функцию Javascript`а
escape для того, чтобы некоторые данные не прервали запрос.
Не рекомендуется делать GET-запросы к серверу с большими
объемами данных. Для этого существует POST-запрос.
32
33. Ajax
«WEB-технологии. Ajax»Ajax
к практике
В методе GET данные отправляются в виде параметров URL, которые
обычно представляют собой строки пар имени и значения,
разделенные амперсандами (&).
В целом URL-адрес с данными GET будет выглядеть так:
http://www.example.com/action.php?name=john&age=24
Полужирным шрифтом в URL-адресе выделены параметры GET, а
выделенными курсивом — значения этих параметров. В URL-адрес
можно встроить более одного parameter=value, объединив их с
помощью амперсанда (&). С помощью метода GET можно отправлять
только простые текстовые данные.
33
34. Ajax
«WEB-технологии. Ajax»Ajax
к практике
Клиентская часть, написанная на Javascript, должна обеспечивать
необходимую функциональность для безопасного обмена с сервером и
предоставлять методы для обмена данными любым из вышеперечисленных
способов.
Серверная часть должна обрабатывать входные данные, и на основе них
генерировать новую информацию (например, связываясь с базой данных),
и отдавать ее обратно клиенту.
Например, для запроса информации с сервера можно
использовать обычный GET-запрос с передачей нескольких
небольших по размеру параметров, а для обновления
информации, или добавления новой информации потребуется
использовать уже POST-запрос, так как он позволяет
передавать большие объемы данных.
34
35. Ajax
«WEB-технологии. Ajax»Ajax
c использованием PHP
На стороне сервера:
<?php
sleep(5)
echo
$_SERVER['REMOTE_ADDR']
<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER['REMOTE_ADDR']) {
$output .= 'Ваш IP адрес: '.
$_SERVER['REMOTE_ADDR'];
}
else { $output .= 'Ваш IP адрес неизвестен.';}
echo $output;
В переменной 'REMOTE_ADDR' содержится реальный IP адрес реального
хоста в интернете, который произвел соединение с нашим сервером.
Единственный реальный адрес. Никаких других сервер не знает.
А какой там адрес?
35
36. Ajax
«WEB-технологии. Ajax»Ajax c использованием PHP
А какой там адрес?
Что значит - реальный IP адрес? Это адрес хоста,
который произвел соединение с нашим сервером.
Этот адрес по определению может быть только
один. Один, а не 5 по цепочке.
Рассмотрим типичный пример:
Есть пользовательский компьютер, который,
который находится в офисной сети. IP компьютера
192.168.1.10
Офисная сеть включена через роутер в сеть
здания. IP роутера - 10.10.0.3
Пользователь заходит на сайт, через НТТР прокси,
его IP - 5.143.7.67
Так вот, сеть TCP/IP так устроена, что каждый
следующий узел ничего не знает о предыдущих.
В самих TCP/IP пакетах никакой информации о
предыдущих хостах не предусмотрено.
Поэтому, как это ни обидно, но реальным адресом
мы можем считать только последний в цепочке адрес HTTP прокси.
36
37. Ajax
«WEB-технологии. Ajax»Ajax
c использованием PHP
Рассмотрим создание асинхронного AJAX запроса на примере, который
будет после загрузки страницы приветствовать пользователя и
отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
1. welcome.html – HTML-страница, которая будет отображаться
пользователю. На этой же странице поместим скрипт, который будет
осуществлять все необходимые действия для работы AJAX на стороне
клиента.
2. processing.php – PHP-файл, который будет обрабатывать запрос на
стороне сервера, и формировать ответ. Начнём разработку с создания
основной структуры файла welcome.html
37
38. Ajax
«WEB-технологии. Ajax»Ajax
welcome.html
c использованием PHP
1.<!DOCTYPE html>
2.<html lang="ru">
3.<head>
4.<meta charset="utf-8">
Здесь будет
5.<title>Пример работы AJAX</title>
находиться
6.</head>
интересующий нас
7.<body>
код
8.<h1>Пример работы AJAX</h1>
9.<div id="welcome"></div>
10.<script>
11.// Здесь поместим код JavaScript, который будет отправлять
запрос на сервер, получать его и обновлять содержимое страницы.
Всё это будет работать без перезагрузки страницы
13.</script>
14.</body>
15.</html>
38
39. Ajax
«WEB-технологии. Ajax»на чистом JS
Ajax
Рассмотрим последовательность действий, которые необходимо выполнить
на стороне клиента (в коде JavaScript):
1.Подготовим данные, необходимые для выполнения запроса на сервере.
Если для выполнения запроса на сервере данные никакие не нужны, то
данный этап можно пропустить.
2.Создадим переменную, которая будет содержать экземпляр объекта
XMLHttpRequest.
3.Настроим запрос с помощью метода open().
Указываются следующие параметры:
•Метод, с помощью которого будет посылаться запрос на сервер
(GET, POST).
•URL-адрес, который будет обрабатывать запрос на сервере.
•Тип запроса: синхронный (false) или асинхронный (true).
•Имя и пароль при необходимости.
39
40. Ajax
«WEB-технологии. Ajax»Ajax
на чистом JS
4. Подпишемся на событие onreadystatechange объекта XHR (request) и
укажем обработчик в виде анонимной или именованной функции. После
этого создадим код внутри этой функции, который будет проверять
состояние ответа, и выполнять определённые действия на странице.
Ответ, который приходит с сервера, всегда находится в свойстве
responseText.
Дополнительно с проверкой значения свойства readyState числу 4, можно
проверять и значение свойства status. Данное свойство определяет
статус запроса. Если оно равно 200, то всё OK. А иначе произошла
ошибка (например, 404 – URL не найден).
40
41. Ajax
«WEB-технологии. Ajax»Ajax
на чистом JS
5.Отправим запрос на сервер с помощью метода send().
Если используем для отправки запроса метод GET, то передавать данные
в параметр данного метода не надо. Они передаются в составе URL.
Если используем для отправки запроса метод POST, то данные необходимо
передать в качестве параметра методу send(). Кроме этого, перед вызовом
данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его
расшифровать.
Значение свойства
readyState
0
1
2
3
4
Описание
запрос не инициализирован
выполнена настройка запроса
запрос отправлен
запрос находится в процессе обработки на сервере
запрос завершён
41
42. Ajax
«WEB-технологии. Ajax»Ajax на чистом JS
Содержимое элемента script:
// 2. Создание переменной request
var request = new XMLHttpRequest();
request.setRequestHeader('Content-type', 'application/json; charset=utf-8',url);
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной
функции
request.addEventListener('readystatechange', function() {
// если состояния запроса 4 и статус запроса 200 (OK)
if ((request.readyState==4) && (request.status==200)) {
console.log(request); // например, выведем объект XHR в консоль браузера
console.log(request.responseText); // и ответ (текст), пришедший с сервера
// получить элемент c id = welcome
var welcome = document.getElementById('welcome');
// заменить содержимое элемента ответом с сервера
welcome.innerHTML = request.responseText;
}});
// 5. Отправка запроса на сервер request.send();
42
43. Объект XMLHttpRequest
«WEB-технологии. Ajax»Методы объекта:
Объект XMLHttpRequest
abort() – останавливает обработку текущего синхронного запроса;
getAllResponseHeaders() – возвращает как строку все заголовки
ответа;
getResponseHeader(name) – возвращает значение заголовка ответа с
именем name;
setRequestHeader(’name’,’value’) – устанавливает значение
заголовка запроса с именем name, равным value. Может также
устанавливать кодировку!
open(method, URL, async, login, password) – подготавливает http-запрос
указанным методом по указанному адресу:
async – булевский параметр, задает асинхронность запроса;
login, password – логин и пароль для http-авторизации, если на сервере
требуется авторизация.
send(content) – отправляет подготовленный ранее запрос, содержимое
переменной content передается как сущность запроса;
43
44. Объект XMLHttpRequest
«WEB-технологии. Протокол HTTP»Объект XMLHttpRequest
Свойства объекта:
onreadystatechange – событие, вызываемое при изменении состояния
объекта при работе в асинхронном режиме, событию можно назначить свою
функцию onreadystatechange = function(event),
где readystate – число от 0 до 4, задающее состояние объекта.
responseText – сущность ответа сервера как строка;
responseXML – сущность ответа сервера, разобранная как xml-документ;
status – HTTP-статус ответа (200, 404 ...);
statusText – сообщение статуса (ok, not found ...).
44
45. Объект XMLHttpRequest
«WEB-технологии. Ajax»Объект XMLHttpRequest
Пример использования JavaScript методов open() и
send() объекта XMLHttpRequest методом GET:
<!DOCTYPE html>
<html>
<head>
<title>Использование JavaScript методов open() и send()объекта XMLHttpRequest</title>
</head>
<body>
<button onclick = "getPhone()">Запросить телефон</button>
<!-- добавляем атрибут событий onclick -->
<div id = "demo"></div>
<script>
function getPhone() {
let xhr = new XMLHttpRequest(); // инициализируем переменную новым объектом
XMLHttpRequest
xhr.open("GET", "user.json"); // определяем параметры для запроса
xhr.send(); // отправляем запрос на сервер
45
46. Объект XMLHttpRequest
«WEB-технологии. Ajax»Объект XMLHttpRequest
Пример использования JavaScript методов open() и
send() объекта XMLHttpRequest методом GET:
продолжение
xhr.onreadystatechange = function() {
// проверяем состояние запроса и числовой код состояния HTTP ответа
if (this.readyState == 4 && this.status == 200) {
const data = JSON.parse(this.responseText);
/* анализируем строку в формате JSON и инициализируем переменную значением,
полученным в ходе анализа*/
document.getElementById("demo").innerHTML = "Телефон пользователя: " +
data.phone; /* находим элемент по id и изменяем его содержимое значением ключа
объекта, содержащегося в переменной*/
}
};
}
</script>
</body>
</html>
46
47. Объект XMLHttpRequest
«WEB-технологии. Ajax»Объект XMLHttpRequest
Пример использования JavaScript методов open() и
send() объекта XMLHttpRequest методом GET:
продолжение
В этом примере с использованием атрибута событий onclick при нажатии на кнопку
(HTML элемент <button>) вызываем функцию getPhone(), которая:
Вызывает конструктор объекта XMLHttpRequest и инициализирует переменную
новым объектом этого типа.
С помощью метода open() объекта XMLHttpRequest определяем параметры для
запроса - указываем, что HTTP запрос будет осуществлен методом "GET", а в
качестве URL адреса на который будет отправлен запрос мы задаем файл формата
json. Обратите внимание, что файл размещен на том же сервере и в том же
каталоге, что и документ с которого выполняется скрипт. Файл имеет следующий
вид:
{
"firstName": "Василий",
"lastName": «Васильев",
"age": 25,
"phone": 88005553535
}
47
48. Объект XMLHttpRequest
«WEB-технологии. Ajax»Отправка формы
на jQuery
Возьмём Форму попроще:
<form name="f1" action="form.php" method="POST">
<input type="text" name="name" value="Ivan"/>
<select name="role">
<option>User</option>
<option>Admin</option>
</select>
<input type="submit"/>
</form>
отправка формы AJAX'ом по ссылке из «action»:
$('form').submit(function(){
$.post(
$(this).attr('action'), // ссылка куда отправляем данные
$(this).serialize() // данные формы
);
// отключаем действие по умолчанию
return false;
});
49
49. Отправка формы
«WEB-технологии. Ajax»Отправка формы
на jQuery
Метод – «.serialize()» отвечает за «сбор» данных
с формы в удобном для передачи данных формате:
name=Ivan&role=Admin
Метод «.serializeArray()» представляет собранные
данные в виде объекта:
[
{
name:"name",
value:"Ivan"
},
{
name:"role",
value:"Admin"
},
]
50
50.
«WEB-технологии. Ajax»Отправка формы
на jQuery
Добавим в данный код немного проверки данных:
$('form').submit(function(){
if ($(this).find('input[name=name]').val() == '') {
alert('Введите имя пользователя’);
return false;
}
// кусок кода с отправкой
// ...
});
val() – получение значения первого элемента
формы из выборки
val(value) – установка значения всем элементам
формы из выборки.
Если есть чекбокс, проверяем так:
$('input[name=check] ').is(':checked')
51
51.
«WEB-технологии. Ajax»Отправка формы
на jQuery
Проверку данных с предыдущей страницы еще лучше модифицировать так:
if ($(this).find('input[name=user]').val() == '') {
$(this).find('input[name=user]’)
.before('<div class="error">Введите имя</div>');
return false;
}
При повторной отправке формы не забудьте убрать сообщения оставшиеся от
предыдущей проверки:
$(this).find('.error').remove()
52
52.
«WEB-технологии. Ajax»Отправка формы
на jQuery
Теперь можно объединить кусочки кода и получить следующий вариант
скрипта для отправки данных:
$('form').submit(function(){
// чистим ошибки
$(this).find('.error').remove();
// проверяем поля формы
if ($(this).find('input[type=name]').val() == '') {
$(this).find('input[name=user]')
.before('<div class="error">Введите имя</div>');
return false;
}
// всё хорошо – отправляем запрос на сервер
$.post(
$(this).attr('action'),
$(this).serialize() // данные формы
);
return false;
});
53
53.
«WEB-технологии. Ajax»Ajax
Итак, мы увидели, что наиболее общая структура кода Аjax на JQuery,
выглядит так:
$.ajax({
url: '/ajax/example.html', // указываем URL и
dataType : "json", // тип загружаемых данных
method: "GET", // HTTP метод, по умолчанию GET
//dataType: "html", // тип данных загружаемых с сервера
// вешаем свой обработчик на функцию success
success: function (data, textStatus) {
// обрабатываем полученные данные
$.each(data, function(i, val) {
/* ... */
});
}
});
Нельзя просто так взять и описать все возможные параметры для вызова
«$.ajax()», стоит держать официальный мануал под рукой –
http://api.jquery.com/jQuery.ajax/
https://jquery-docs.ru/category/ajax/ - русскоязычный ресурс.
54
54. Ajax
«WEB-технологии. Ajax»Ajax - функции
Рассмотрим несколько основных функций:
jQuery.ajax
Это самый основной метод, а все последующие методы лишь обертки для метода
jQuery.ajax.
У данного метода лишь один входной параметр — объект включающий в себя все
настройки (выделены параметры которые стоит запомнить):
async — асинхронность запроса, по умолчанию true
cache — вкл/выкл кэширование данных браузером, по умолчанию true
contentType — по умолчанию «application/x-www-form-urlencoded»
data — передаваемые данные — строка или объект
dataFilter — фильтр для входных данных
dataType — тип данных возвращаемых в callback функцию (xml, html, script,
json, text, _default) …
timeout — время таймаут в миллисекундах
type — GET либо POST
url — url запрашиваемой страницы
55
55. Ajax - функции
«WEB-технологии. Ajax»Ajax - функции
jQuery.ajax (продолжение)
Локальные AJAX Event'ы:
beforeSend — срабатывает перед отправкой запроса
error — если произошла ошибка
success — если ошибок не возникло
complete — срабатывает по окончанию запроса
Для организации HTTP авторизации:
username — логин
password — пароль
56
56. Ajax - функции
«WEB-технологии. Ajax»jQuery.get
Ajax - функции
Загружает страницу, используя для передачи данных через GET запрос. Может
принимать параметры:
1. url запрашиваемой страницы
2.передаваемые данные (необязательный параметр)
3.callback функция, которой будет скормлен результат (необязательный
параметр)
4.тип данных возвращаемых в callback функцию (xml, html, script, json,
text, _default)
jQuery.post
Данный метод аналогичен предыдущему, но передаваемые данные уйдут на сервер
посредством POST'а. Может принимать те же параметры.
57
57. Ajax - функции
«WEB-технологии. Ajax»Ajax
Механизм Ajax - это всего лишь объект или функция JavaScript, которая вызывается в тот
момент, когда возникает необходимость получения новых данных от сервера.
В отличие от традиционной модели обеспечения связи с другим ресурсом (например, с другой
веб-страницей), каждая ссылка Ajax производит обращение к механизму Ajax, который в свою
очередь планирует и выполняет запрос.
Запрос выполняется в асинхронном режиме, т. е. исполняемый код не ожидает, пока придет
ответ на запрос.
Но применение технологии Ajax невозможно без сервера, способного обслуживать запросы
Ajax. Для этих целей годится любой сервер приложений. Не имеет никакого значения, как будут
оформлены компоненты на стороне сервера - будут ли это страницы РНР, сервлеты Java
или компоненты .NET, - главное, чтобы они возвращали механизму Ajax данные в требуемом
формате.
58
58. Ajax
«WEB-технологии. Ajax»Ajax+PHP
По сути, технология ajax не может существовать без php скриптов, так как ajax, только
отправляет данные на сервер и принимает обратный ответ, при этом не перезагружая страницы.
Браузер
HTMLстраница
OnClick
OnMouseOver
OnMouseOut
…
XMLHTTP
Request
Для отправки данных на сервер, нужно создать
объект XMLHTTPRequest. С помощью него
открыть url (php скрипт), послать на него данные
(POST или GET метод), получить ответ, и
средствами знаний языка js вывести полученный
ответ сервера на монитор (ответом может быть
любой фрагмент или элемент страницы сайта)
Интернет
file.php
Сервер
59
59. Ajax+PHP
«WEB-технологии. PHP»Зачем нужен локальный web-сервер
Можно, конечно, использовать сервер Интернета – выбрать
хостинг с поддержкой PHP, загрузить туда свой сайт и можно
работать.
Но очень часто это неудобно. Например, если вы создаете
учебный сайт и в дальнейшем не собираетесь загружать его в
Интернет.
Неудобно работать с таким сервером и в том случае, если
скорость подключения к Интернету мала. Вот тогда вам и нужен
локальный сервер.
60
60.
«WEB-технологии. PHP»Зачем нужен локальный web-сервер
Можно создать сервер самостоятельно. Для этого понадобиться скачать сервер
Apache, пакеты PHP и MySQL, установить их на свой компьютер и начать работать.
Можно использовать готовые установочные пакеты, которые содержат все
необходимое для полноценной работы сервера, например:
Open Server https://ospanel.io/
Сервер AppServ
Сервер Apache Swissknife
Сервер XAMPP
Локальный сервер Denver
Перед установкой
прочтите документацию!
https://ospanel.io/docs/
61
61.
«WEB-технологии. PHP»Установка Open Server
1. Рекомендуется скачать полную версию (максимальная редакция) –
там много полезных программ для разработчиков.
2. После распаковки:
3. После инсталляции:
Здесь подробно об
установке, настройке и
первом запуске:
https://www.youtube.com
/watch?v=QyjRcJVTEhk
62
62.
«WEB-технологии. PHP»Запуск Open Server
4. Проверяем работу
запуском localhost:
5. Из настроек
загляните сюда:
63
63.
«WEB-технологии. PHP»Запуск Open Server
5. Из настроек загляните сюда:
Если хотим поменять браузер:
64
64.
«WEB-технологии. PHP»Создание нового домена
1. Находим, где у нас лежит
сервер, заходим в папку
domains:
2. Создаем новую
директорию – это и
будет новый домен
3. В ней – новый файл:
index.php
4. Перезапустите сервер.
65
65.
«WEB-технологии. PHP»Тестируем Ajax
Нам понадобятся 2 файла: index.html и response.php
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/demopage.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<header>
<h2>AJAX в jQuery</h2>
</header>
<div class="examples">
<button name="sample1" class="sample1">Пример 1 (простой)</button>
<button name="sample2" class="sample2">Пример 2 (post)</button>
<button name="sample3" class="sample3">Пример 3 (скрипт)</button>
<button name="sample4" class="sample4">Пример 4 (xml)</button>
…/* здесь должны быть скрипты*/
<div class="results">Ждем ответа</div>
</div>
</body>
</html>
66
66.
«WEB-технологии. PHP»Тестируем Ajax
Нам понадобятся 2 файла: index.html и response.php
<?php
switch ($_REQUEST['action']) {
case 'sample1':
echo 'Пример 1 - передача завершилась успешно';
break;
case 'sample2':
echo 'Пример 2 - передача завершилась успешно.
Параметры: name = ' . $_POST['name'] . ',
nickname= ' . $_POST['nickname'];
break;
case 'sample3':
echo "$('.results').html('Пример 3 - Выполнение
JavaScript');";
break;
case 'sample4':
header ('Content-Type: application/xml; charset=UTF8');
echo <<<XML
<?xml version='1.0'
standalone='yes'?>
<items>
<item>Пункт 1</item>
<item>Пункт 2</item>
<item>Пункт 3</item>
<item>Пункт 4</item>
<item>Пункт 5</item>
</items>
XML;
break;
}
?>
67
67.
«WEB-технологии. PHP»Тестируем Ajax
Пример 1
Простая передача текста.
<script language="javascript" type="text/javascript">
$('.sample1').click( function() {
$.ajax({
url: 'response.php?action=sample1',
success: function(data) {
$('.results').html(data); // добавляем текст в элемент с классом results
}
});
});
Для ответа имеется элемент div.result.
Сервер просто возвращает строку:
response.php (первый фрагмент)
case 'sample1':
echo 'Пример 1 - передача завершилась успешно';
68
68.
«WEB-технологии. PHP»Тестируем Ajax
Пример 2
Передаем пользовательские данные PHP скрипту.
$('.sample2').click( function() {
$.ajax({
type: 'POST',
url: 'response.php?action=sample2',
data: 'name=Andrew&nickname=Aramis',
success: function(data){
$('.results').html(data);
}
});
});
Для ответа имеется элемент div.result.
Сервер просто возвращает строку:
response.php (второй фрагмент)
case 'sample2':
echo 'Пример 2 - передача завершилась успешно.
Параметры: name = ' . $_POST['name'] . ', nickname= ' .
$_POST['nickname'];
69
69.
«WEB-технологии. PHP»Тестируем Ajax
Пример 3
Передача и выполнение кода JavaScript
$('.sample3').click( function() {
$.ajax({
dataType: 'script',
url: 'response.php?action=sample3',
});
});
Для ответа имеется элемент div.result.
Сервер просто возвращает строку:
response.php (третий фрагмент)
case 'sample3':
echo "$('.results').html('Пример 3 - Выполнение
JavaScript');";
70
70.
«WEB-технологии. PHP»Тестируем Ajax
Пример 4
Используем XML. Пример можно использовать для работы с
внешними XML, например, RSS.
$('.sample4').click( function() {
$.ajax({
dataType: 'xml',
url: 'response.php?action=sample4',
success: function(xmldata){
$('.results').html('');
$(xmldata).find('item').each(function(){
$('<li></li>').html( $(this).text()
).appendTo('.results');
});
}
});
});
response.php (4-й фрагмент)
case 'sample4':
header ('Content-Type: application/xml;
charset=UTF-8');
echo <<<XML
<?xml version='1.0' standalone='yes'?>
<items>
<item>Пункт 1</item><item>Пункт 2</item>
<item>Пункт 3</item><item>Пункт 4</item>
<item>Пункт 5</item>
</items>
XML;
break;
}
71
71.
«WEB-технологии. PHP»Тестируем Ajax
Пример 4
Используем XML. Пример можно использовать для работы с внешними XML, например,
RSS.
72
72.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 3)+1
Задание 1:
Протестировать отправку Ajax-запросов в инструменте
разработчика.
Задание 2:
выполнить для чистого JS и с использованием JQuery
Для выполнения заданий необходимо будет
установить Open Server
73
73.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 3)+1
Задание 2 (варианты):
Вариант 1. Создайте форму с radiobutton для выбора пола
(мужчина или женщина). Добавьте ползунок для ввода роста (в
сантиметрах). По нажатию кнопки “Идеальный вес”, пошлите
запрос на файл a3.php. На сервер передается параметр пол –
имя параметра sex, значения man или woman и рост ( имя
height) - рост задается с помощью ползунка range.
. Передача осуществляется методом AJAX, с помощью POST.
Если все выполнено правильно, то будет возвращена строка с
расчетом идеального веса под заданный пол. В противном
случае – ошибка.
74
74.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задание 2 (варианты):
Вариант 2. Создайте форму с полями:
fio – поле ввода для имени и фамилии;
email – поле ввода для email адреса
phone – поле ввода для телефона
По нажатию кнопки передайте данные из полей ввода на сервер
(mail.php) посредством POST (AJAX). Имена переменных – такие, как
указано в списке. Если все сделано верно, то по адресу указанному
в файле mail.php в переменной $to будет отправлено письмо, если
нет – выведена ошибка.
Возвращаемый формат – строка.
75
75.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задание 2 (варианты):
Вариант 3. Отправьте на сервер (goods.php) методом GET артикул
товара (art). Сервер реагирует только на 2 артикула (1 или 2).
Если все выполнено верно то сервер пришлет вам JSON строку с
описанием товара. После раскодировки (JSON.parse) вы сможете
вывести поля:
name – имя товара
weight – вес товара
cost – стоимость товара
img – ссылка на картинку.
76
76.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 4 «Калькулятор калорий». Создайте веб-форму для ввода
данных о приеме пищи, таких как название продукта и его
калорийность.
Реализуйте возможность добавления продуктов и подсчета общей
калорийности.
При нажатии кнопки "Посчитать калории" отправьте данные о
продуктах на сервер методом POST с использованием AJAX.
На сервере произведите подсчет общей калорийности и верните
результат в ответ на запрос.
Отобразите общую калорийность на странице. В случае ошибки,
выведите соответствующее сообщение.
77
77.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 5 «Планировщик задач». Создайте веб-форму для ввода названия
задачи и ее описания.
Реализуйте возможность добавления задач и отображения списка задач.
При нажатии кнопки "Добавить задачу" отправьте данные о задаче на
сервер методом POST с помощью AJAX.
На сервере сохраните задачу в базе данных или в файле.
Верните ответ на запрос, содержащий информацию о добавленной задаче
или об ошибке.
Обновите список задач на странице.
78
78.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 6 «Онлайн чат». Создайте веб-страницу с формой для
ввода имени пользователя и текстового поля для отправки
сообщений в чат.
При отправке сообщения отправьте его на сервер методом POST с
использованием AJAX.
На сервере сохраните сообщение и его автора и верните ответ с
обновленным списком сообщений.
Обновите чат на странице, отображая новые сообщения. В случае
ошибки, выведите сообщение об ошибке.
79
79.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 7 «Тестирование знаний». Создайте веб-страницу с
вопросами и вариантами ответов.
При нажатии кнопки "Проверить ответы" отправьте AJAX-запрос
на сервер методом POST с выбранными ответами.
На сервере проверьте ответы и подсчитайте количество
правильных ответов.
Верните результат проверки на клиент и отобразите количество
правильных ответов на странице. Если возникла ошибка,
выведите сообщение об ошибке.
80
80.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 8 «Просмотр информации о фруктах». Создайте вебстраницу с формой, содержащей поле для ввода артикула фрукта.
При нажатии кнопки "Получить информацию" отправьте запрос на
сервер методом GET, передав артикул фрукта.
Сервер проверяет артикул товара: если это артикул фрукта, он
возвращает JSON строку с описанием фрукта (название, вес,
стоимость).
После получения JSON строки, раскодируйте ее и выведите
информацию о фрукте на странице.
81
81.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 9 «Получение информации о погоде». Создайте вебстраницу с формой без полей ввода.
При загрузке страницы выполните AJAX-запрос на сервер методом
GET к файлу weather.php.
Сервер вернет JSON строку с информацией о текущей погоде
(температура, влажность, скорость ветра).
После получения JSON строки, раскодируйте ее и выведите
информацию о погоде на странице.
82
82.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 10 «Великие цитаты». Создайте веб-страницу с
формой без полей ввода.
При загрузке страницы выполните AJAX-запрос на сервер
методом GET к файлу quote.php.
Сервер вернет JSON строку с случайной цитатой.
После получения JSON строки, раскодируйте ее и выведите
цитату на странице.
83
83.
«WEB-технологии. JQuery& Ajax»JQuery и Ajax
Задания выполняются по варианту (N mod 11)+1
Задание 2 (варианты):
Вариант 11 «Регистрация на космический полет». Создайте вебформу с полями для ввода имени и фамилии будущего космонавта,
email адреса и номера телефона.
При нажатии кнопки "Записаться на полет" отправьте AJAX-запрос
на сервер методом POST.
Передайте данные из полей ввода на сервер в формате JSON, где
ключи соответствуют именам переменных (fio, email, phone).
На сервере обработайте полученные данные и добавьте космонавта
в список зарегистрированных на космический полет.
Верните строку с подтверждением успешной регистрации или
ошибки.
Для выполнения заданий необходимо будет
установить Open Server
84