Урок № 55 Введение в AJAX. Методы load, get и post. Урок 55 Тема Введение в ajax. Методы load, get и post

• Название: Урок 55 Тема Введение в ajax. Методы load, get и post
• Дата: 11.11.2022
• Размер: 32.25 Kb.
• Имя файла: Урок № 55 Введение в AJAX. Методы load, get и post.docx
• Тип: Урок; #783595

Урок № 55

Тема: Введение в AJAX. Методы load, get и post
Технология AJAX представляет собой технологию асинхронного взаимодействия с сервером. Благодаря данной технологии мы можем отправлять запросы к серверу и получать от него ответы без перезагрузки страницы в фоновом режиме, создавать насыщенные интерактивные веб-приложения, например, веб-чаты.

Метод load загружает код HTML, полученный с сервера, в элемент на странице. Он принимает следующие параметры:

• 
  url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос
  
• 
  data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом
  
• 
  complete(responseText, textStatus, XMLHttpRequest: необязательный параметр - функция обратного вызова, которая будет выполняться при завершении запроса.
  

Пример использования метода load:

1 2 3 4 5 6 7 8 9

Загрузить Нет новостей

Использование данных в запросе

Если второй параметр - data - не определен, то запрос выполняется как GET-запрос. Если же мы используем параметр data, то осуществляется POST-запрос, а данные передаются как при отправке формы. И, применив соответствующие методы на серверной стороне, мы можем получить переданные данные. Изменим предыдущий пример:

1 2 3 4 5 6 7 8 9

Загрузить Нет новостей

Здесь в качестве второго параметра мы передаем объект javascript, в котором определены два свойства: event и date. Теперь получим эти данные на сервере и вернем их в ответ клиенту:

1 2 3 4 5

$event=$_POST['event']; $date=$_POST['date']; echo " " . $event . " " . $date . " "; ?>

Теперь, нажав на кнопку, данные, переданные во втором параметре, возвратятся обратно клиенту:
Использование функции обратного вызова

Применяя третий параметр - функцию обратного вызова complete, мы можем произвести некоторые дополнительные сопутствующие действия при завершении запроса. Ну самый простейший пример: вывод уведомления о состоянии запроса:

1	$('#news').load('ajax.php', function(){alert('Запрос выполнен');});

Метод get осуществляет GET-запрос к серверу, то есть все данные запроса передаются в строке запроса. Он принимает следующие параметры:

• 
  url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос
  
• 
  data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом
  
• 
  success(data, textStatus, jqXHR): необязательный параметр - функция обратного вызова, которая будет выполняться при успешном выполнении запроса. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.
  
• 
  dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"
  

На выходе метод get возвращает объект jqXHR, который будет инкапсулировать данные запроса. Позднее мы подробнее разберем этот объект.

Итак, перепишем пример из предыдущего параграфа с использованием метода get:

1 2 3 4 5 6 7 8

$(function(){ $('button').click(function(){ $.get('ajax.php', function(data) { $('#news').html(data); alert('Данные заружены'); }); }); });

Здесь использованы два первых параметра: адрес ресурса и функция обратного вызова. В этой функции в качестве параметра data мы получаем принятые от сервера данные и загружаем их в качестве разметки в элемент выборки ($('#news').html(data);). По сути то же самой мы могли бы сделать с помощью метода load.

Отправка данных

Используя параметр data, мы можем отправить дополнительные данные. Например, можно отправить запрос на получение элемента из базы данных по id: $.get('ajax.php', { id: "1"});

А поскольку в GET-запросе все данные передаются в строке запроса, то данный код будет аналогичен следующему: $.get('ajax.php?id=1');

Соответственно на стороне сервера мы сможем получить этот параметр и произвести с ним какие-либо действия, например, получить элемент из бд по данному id:

1 2 3

$id=$_GET['id']; ?>

В отличие от GET-запросов данные POST-запросов передаются не в строке запроса, а в его теле. Распространенным примеров подобных запросов является отправка данных формы на сервер.

Для отправки POST-запросов предназначен метод post. Его объявление и использование в целом аналогично методу get. Он принимает следующие параметры:

• 
  url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос
  
• 
  data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом
  
• 
  success(data, textStatus, jqXHR): необязательный параметр - функция обратного вызова, которая будет выполняться при успешном выполнении запроса. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.
  
• 
  dataType: необязательный параметр, содержащий тип данных в виде строки, например, "xml" или "json"
  

На выходе метод post возвращает объект jqXHR.

Пример использования:

1 2 3 4

$.post('ajax.php', {'login':'1111', 'password' : '2222'}, function(data) { $('#news').html(data); });

В данном случае мы передаем в качестве данных пароль и логин. На сервере мы можем получить данные и отправить ответ пользователю:

1 2 3 4 5 6

$login=$_POST['login']; $pass=$_POST['password']; if($login=="1111" && $pass=="2222"){ echo "Авторизация прошла успешно"; } else{ echo "Неверно введен логин или пароль"; } ?>

Поскольку наиболее часто запрос post используется при отправке данных формы, используем на стороне клиента форму:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24