Ajax-запрос к серверу через jquery
Содержание:
- Содержание раздела:
- $.ajax
- Создание PHP-файла
- Настройка базовых параметров Ajax-запросов
- Пример использования
- Как удалить данные с помощью jQuery AJAX?
- Первооткрыватели
- Метод jQuery.getJSON()
- Напутствие по выбору
- Создание асинхронного AJAX запроса (метод GET)
- Параметр dataType
- JS Учебник
- Как обновить данные с помощью jQuery AJAX?
- Вывод данных о запросе в Инструментах разработчика в браузере
Содержание раздела:
$.ajax
Мы можем использовать метод $.ajax() несколькими путями: можем передать объект конфигурации в качестве единственного аргумента или можем передать адрес и необязательный объект конфигурации. Давайте посмотрим в первом приближении:
Конечно, вы можете быть менее многословны, просто передавая литеральный объект в метод $.ajax() и применяя анонимные функции для success и error. Такая версия проще для написания и её, вероятно, проще поддерживать:
Как упоминалось ранее, вы можете вызвать метод $.ajax(), передавая ему адрес и необязательный объект конфигурации. Это может быть полезно, если вы хотите использовать конфигурацию по умолчанию для $.ajax() или если вы желаете использовать ту же конфигурацию для нескольких адресов.
В этой версии обязателен только адрес, но объект конфигурации позволяет нам сказать jQuery какие данные мы хотим передать, какой использовать метод HTTP (GET, POST и др.), какие данные мы ожидаем получить, как реагировать когда запрос успешен или нет и многое другое.
Смотрите по $.ajax() для получения полного списка параметров конфигурации.
Создание PHP-файла
Этот файл у нас будет называться т.к. мы задали это в атрибуте нашего тега , и размещаться он будет в той же папке, то и html-файл. В этом файле нам нужно проверить, пришли ли на сервер нужные переменные, очистить их от пробелов и недопустимых символов, а также сформировать письмо и отправить его с помощью php-функции .
Отправка письма с помощью php-файла:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?//Проверка отправилось ли наше поля name и phone, а также не пустые ли они if((isset($_POST’name’)&&$_POST’name’!=»»)&&(isset($_POST’phone’)&&$_POST’phone’!=»»)){ //удаляем ненужные пробелы функцией trim и превращаем html-символы в спецсимволы в целях //безопасности $name=htmlspecialchars(trim($_POST’name’)); $phone=htmlspecialchars(trim($_POST’phone’)); $to=’address@gmail.com’;//Почта получателя, через запятую можно указать сколько угодно адресов $subject=’Обратный звонок’;//Заголовок сообщения $message=’ <html> <title>’.$subject.'</title> </head> <p>Имя: ‘.$name.'</p> <p>Телефон: ‘.$phone.'</p> </body> </html>’;//В тексте отправляемого сообщения можно использовать HTML теги $headers=»Content-type: text/html; charset=utf-8 \r\n»;//Кодировка письма $headers.=»From: Отправитель <email_from@yoursite.com>\r\n»;//Наименование и почта отправителя mail($to,$subject,$message,$headers);//Отправка письма с помощью php-функции mail echo»Письмо отправлено»;// необязательная стока, которая будет видна потом в консоли или //выведется пользователю, если в браузере будет отключен JS } elseecho'<p>Заполните, пожалуйста, поля <a href=»./index.html»>формы</a></p>’;// будет выведено, если //поля формы заполнены неверно. index.html — это файл с вашей формой. Подставьте сюда нужное имя файла. |
Этот файл отправит письмо даже в том случае, если не сработает Ajax-запрос, хотя случается это крайне редко.
Настройка базовых параметров Ajax-запросов
Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:
| Параметр | Описание |
|---|---|
| accepts | Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType |
| cache | Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp |
| contentType | Устанавливает для запроса значение заголовка content-туре |
| dataType | Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса |
| headers | Задает дополнительные заголовки и значения, которые должны включаться в запрос |
| jsonp | Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером |
| jsonpCallback | Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию |
| password | Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации |
| scriptCharset | Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого |
| timeout | Задает длительность тайм-аута (в миллисекундах) для запроса |
| userName | Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации |
Задание тайм-аутов и заголовков
О том, что выполняются Ajax-запросы, пользователи часто даже не догадываются, и поэтому указание допустимой длительности тайм-аута — неплохая идея, поскольку это избавит пользователей от томительного ожидания завершения какого-то неведомого для них процесса. Пример задания тайм-аута для запроса приведен ниже:
В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.
Таймер запускается сразу же после передачи запроса браузеру, и большинство браузеров налагают ограничения на количество одновременно выполняющихся запросов. Это означает, что существует риск того, что к моменту истечения тайм-аута запрос даже не будет запущен. Чтобы избежать этого, необходимо располагать сведениями об ограничениях браузера, а также об объеме и ожидаемой длительности любых других выполняющихся Ajax-запросов.
Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования jQuery функции $.get()</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$( "form" ).submit(function(){
event.preventDefault(); // отменяем действие события по умолчанию
var formData = $( this ).serialize(); // создаем переменную, которая содержит закодированный набор элементов формы в виде строки
$.get( "user2.php", formData, function( data ) { // передаем и загружаем данные с сервера с помощью HTTP запроса методом GET
$( "div" ).html( data ); // вставляем в элемент <div> данные, полученные от сервера
})
});
});
</script>
</head>
<body>
<form> <!-- метод GET по умолчанию -->
<input type = "text" placeholder = "Имя" name = "firstName" required> <!-- поле обязательно к заполнению -->
<input type = "text" placeholder = "Фамилия" name = "lastName" required> <!-- поле обязательно к заполнению -->
<input type = "submit" value = "Добавить">
</form>
<div></div>
</body>
</html>
В этом примере мы привязываем JavaScript обработчик событий «submit» (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной) формы при нажатии на элемент <input> с типом submit (кнопка для отправки формы).
При отправке формы мы вызываем JavaScript метод event.preventDefault(), который позволяет нам отменить действие события по умолчанию и избежать перезагрузки страницы и передачи собранной информации как часть URL (url?firstName=значение&lastName=значение).
Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки — результат выполнения метода .serialize().
После этого с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:
url — файл, к которому мы обращаемся («user2.php»), он содержит следующий PHP код:
<?php $firstName = $_GET; // создаем переменную firstName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом firstName)
$lastName = $_GET; // создаем переменную lastName, которая содержит переданные скрипту через HTTP метод GET данные (с ключом lastName)
echo «Пользователь «.$firstName.» «.$lastName.» добавлен»; // выводим текстовое содержимое (значение выше созданных переменных)
?>
data — данные, которые будут отправлены на сервер (значение переменной formData).
success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно
Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера, которые мы и вставляем в элемент с помощью метода .html().
Результат нашего примера:
Пример использования jQuery функции $.get()
В следующем примере мы рассмотрим как с помощью jQuery функции $.get() загрузить JSON файл и выведем из него некоторую информацию:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования функции $.get (загрузка JSON файла)</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function(){
$.get( "test.json", function( data ) { // загружаем данные с сервера с помощью HTTP запроса методом GET
$( "div" ).html( data.firstName + " " + data.age ); // вставляем в элемент <div> данные, полученные от сервера
})
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
В этом примере при загрузке документа мы с использованием jQuery функции $.get() выполняем асинхронный AJAX запрос со следующими параметрами:
url — файл, к которому мы обращаемся («test.json»), он имеет следующее содержимое:
{
«firstName»: «Борис»,
«lastName»: «Бритва»,
«age»: 25,
«phone»: 88005553535
}
success — функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно
Обратите внимание, что один из параметров функции (data) содержит данные возвращенные с сервера (JSON файл), которые мы частично вставляем в элемент с помощью метода .html().
Результат нашего примера:
Пример использования функции $.get (загрузка JSON файла)jQuery AJAX
Как удалить данные с помощью jQuery AJAX?
8.1 Обработчик кнопки «Удаление товара»
Кнопка «Удалить товар» отображается в представлении «Просмотр товара». Нам нужно добавить обработчик для кнопки удаления товара.
Войдите app/products, откройте файл delete-product.js и добавьте следующий код.
8.2 Показ диалогового окна «Подтверждение удаления»
Здесь мы будем использовать библиотеку Bootbox.js. Мы покажем диалоговое окно с текстом «Вы уверены?» с кнопками «Да» и «Нет».
Поместите следующий код после кода получения id товара.
8.3 Удаление записи с помощью API
Если пользователь нажал «Да» в диалоговом окне, то в API будет отправлен запрос «Удалить».
Замените комментарий // здесь будет запрос на удаление на следующий код.
Первооткрыватели
Помимо реализации от Microsoft, другие компании также предпринимали попытки развития в направлении AJAX. Хотя с подобными технологиями экспериментировали многие, стоит особо отметить два проекта: первый, потому он стал интересной и часто упоминаемой вехой в истории развития AJAX, и второй, который сделал технологию AJAX действительно массовой.
Oddpost
Oddpost — это функционально насыщенный Web-клиент для электронной почты, выпущенный в 2002 году. В нем использовались многие подходы, сохранившие популярность и по сей день. По стилю и функциональности он напоминал стандартный клиент для работы с электронной почтой. Но в его реализации применялась технология DataPacks, позволяющая передавать небольшие фрагменты данных между сервером и Web-браузером. В то время такое решение считалось инновационным.
В дальнейшем Oddpost был куплен компанией Yahoo! и использовался в качестве основы при создании обновленной версии Yahoo! Mail.
Google Maps, Google Suggest, Gmail и одна важная статья
Видимые изменения начались несколько лет назад с появления Gmail, Google Suggest и Google Maps. Все эти проекты интенсивно использовали AJAX-подход и радикально изменили область разработки Web-приложений. Их отзывчивость и интерактивность поразили рядовых пользователей, и продукты Google быстро завоевали популярность у активной части Интернет-сообщества.
Хотя не все об этом знали, но область разработки Web-приложений ожидали еще более значительные изменения. Пользователи понимали, что Web-приложения меняются и приобретают новые замечательные возможности, но в чем конкретно заключаются эти изменения, было неизвестно.
Однако хватило одной статьи, чтобы «открыть глаза» Интернет-сообществу на суть происходящих изменений.
18 февраля 2005 года Джесси Джеймс Гаррет (Jesse James Garrett), сооснователь и президент компании Adaptive Path, написал статью «Ajax: A New Approach to Web Applications» (см. ссылку в разделе ). В этой статье он описал подход к разработке Web-приложений, который уже использовался в таких приложениях, как Gmail и GoogleMaps. Он назвал это «фундаментальным сдвигом в возможностях, доступных Web-приложениями».
Также он дал название данному подходу
Это важно, так как новый термин сфокусировал внимание сообщества на самом тренде и стал отправной точкой для обсуждения новых возможностей разработки Web-приложений. В статье Гаррета термин AJAX описывался следующими словами
Хотя это техническое описание несколько устарело, основная идея сохранилась: HTML и CSS представляют данные и стиль; DOM и связанные с ней методы позволяют обновлять страницу в режиме реального времени, XHR отвечает за общение с сервером, а JavaScript управляет процессом в целом.
Общий эффект от этой статьи был ошеломительным. Она представляла собой редкий случай, когда рекламные обещания, объединившись с огромной креативной энергией, действительно привели к революции. Подхваченная новым поколением стартапов, которые начали появляться по всему миру, технология AJAX быстро оказалась на передовой линии Web-разработки. Эта технология прошла путь от тренда с неясной маркетинговой перспективой до ключевого компонента современных Web-дизайна и Web-разработки.
Метод jQuery.getJSON()
Если вы ожидаете с сервера ответ в виде JSON, то лучше всего использовать именно этот метод. В принципе этот метод аналогичен методу $.get() у которого в качестве значения параметра dataType установлено значение «JSON».
JavaScript
//Получаем список пользователей в виде JSON строки
$.getJSON( ‘/user_json.php’, function( data ) {
var users = [];
$.each( data, function( key, val ) {
users.push( «<li id='» + key + «‘>» + val + «</li>» );
});
});
|
1 |
//Получаем список пользователей в виде JSON строки $.getJSON(‘/user_json.php’,function(data){ varusers=; $.each(data,function(key,val){ users.push(«<li id='»+key+»‘>»+val+»</li>»); }); }); |
Напутствие по выбору
Создание асинхронного AJAX запроса (метод GET)
Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать
пользователя и отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
-
– HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента. -
– PHP-файл, который будет обрабатывать запрос на стороне сервера, и формировать ответ.
Начнём разработку с создания основной структуры файла
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример работы AJAX</title> </head> <body> <h1>Пример работы AJAX</h1> <div id="welcome"></div> <script> // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы </script> </body> </html>
Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):
-
Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
никакие не нужны, то данный этап можно пропустить. -
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
-
Настроим запрос с помощью метода .
Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
-
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
. Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
иначе произошла ошибка (например, 404 – URL не найден). -
Отправим запрос на сервер с помощью метода .
Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они
передаются в составе URL.Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
. Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.
Содержимое элемента :
// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
// если состояния запроса 4 и статус запроса 200 (OK)
if ((request.readyState==4) && (request.status==200)) {
// например, выведем объект XHR в консоль браузера
console.log(request);
// и ответ (текст), пришедший с сервера в окне alert
console.log(request.responseText);
// получить элемент c id = welcome
var welcome = document.getElementById('welcome');
// заменить содержимое элемента ответом, пришедшим с сервера
welcome.innerHTML = request.responseText;
}
});
// 5. Отправка запроса на сервер
request.send();
В итоге файл будет иметь следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример работы AJAX</title>
</head>
<body>
<h1>Пример работы AJAX</h1>
<div id="welcome"></div>
<script>
window.addEventListener("load",function() {
var request = new XMLHttpRequest();
request.open('GET','processing.php',true);
request.addEventListener('readystatechange', function() {
if ((request.readyState==4) && (request.status==200)) {
var welcome = document.getElementById('welcome');
welcome.innerHTML = request.responseText;
}
});
request.send();
});
</script>
</body>
</html>
На сервере (с помощью php):
- Получим данные. Если данные посланы через метод , то из глобального массива
. А если данные переданы с помощью метода , то из глобального
массива . - Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
Выведем его с помощью .
<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
$output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
$output .= 'Ваш IP адрес неизвестен.';
}
echo $output;
Параметр dataType
Функция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType. Возможные значения этого параметра:
- «xml» — полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html).
- «html» — полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах <script>, то они будут автоматически выполнены, только когда html-текст будет помещен в DOM.
- «script» — полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR.
- «json», «jsonp» — полученные данные будут предварительно преобразованы в javascript-объект. Если разбор окажется неудачным (что может случиться, если json содержит ошибки), то будет вызвано исключение ошибки разбора файла. Если сервер, к которому вы обращаетесь, находится на другом домене, то вместо json следует использовать jsonp.
- «text» — полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.
JS Учебник
JS ГлавнаяJS ВведениеJS УстановкаJS ВыводJS СинтаксисJS ЗаявленияJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS ОбластьJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS ДатыJS Формат датыJS Метод получения датJS Методы набора…JS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОтладчикJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS JSON
Как обновить данные с помощью jQuery AJAX?
7.1 Обработчик кнопки «Обновление товара»
Кнопка «Редактировать» находится в списке товаров. При нажатии на неё должна отображаться форма для обновления товара, заполненная информацией о нём.
В папке app/products откройте файл update-product.js и добавьте следующий код.
7.2 Получение информации о товаре
Чтобы заполнить нашу HTML-форму для обновления товара, нам нужно получить информацию о продукте из API.
Поместите следующий код после кода получения id товара.
7.3 Получение списка категорий
Список категорий необходим для вариантов категорий товаров. Записи категорий будут отображаться как параметры в поле ввода «select» HTML.
Замените комментарий // здесь будет загрузка списка категорий следующим кодом
7.4 Добавление кнопки «Все товары» и показ формы для обновления товара
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку продуктов.
Так же мы создадим HTML-форму для обновления товара. Эта форма будет построена с таблицей HTML, а поля ввода заполнены информацией о продукте.
Вместо комментария // здесь будет HTML для обновления товара вставьте следующий код.
Вывод данных о запросе в Инструментах разработчика в браузере
Вы можете посмотреть, какой именно запрос вы отправляли с помощью AJAX, какие данные были отправлены на сервер, и какой ответ был получен. Для этого откройте Инструменты разработчика, например, в браузере Chrome, нажав клавишу F12. Затем щелкните на вкладке Network (Сеть) и выделите тот php-файл, на который вы отправляли данные.
При успешной отправке данных, вы увидите рядом, что статус вашего запроса 200, т.е. все ОК.
В браузере Mozilla Firefox вы получите аналогичный результат, перейдя на вкладку Сеть и нажав на заголовок POST.
В Chrome в блоке Headers (Заголовки), прокрутив вниз, вы увидите, что запрос был отправлен через XMLHttpRequest и на вкладке FormData (данные формы) можете отследить, какие переменные и с какими значениями были переданы на сервер из вашего html-файла.
На вкладке view source вы увидите закодированную информацию, которая заключается в преобразовании кириллических и специальных символов в цифровой код в UTF-8 со знаком % и выглядит примерно так:
Информация на вкладке view source
name=%D0%98%D0%B3%D0%BE%D1%80%D1%8C&phone=(099)+333-4445
| 1 | name=%D0%98%D0%B3%D0%BE%D1%80%D1%8C&phone=(099)+333-4445 |
В Firefox вы отдельно можете посмотреть на заголовки, отдельно — на переданные данные на вкладке Параметры. Рядом с ней будет находится вкладка Ответ, на которой будет виден текст ответа сервера.
В Firefox сразу видно, сколько времени занял запрос и ответ. Для получения более подробной информации можно открыть вкладку Тайминг.
Аналогичные данные вы получите и в консоли браузера Chrome, переключаясь между вкладками Response (Ответ) и Timing (Тайминг):
Просмотров:
954
