cpp

Поддержка AJAX в jQuery

В библиотеке jQuery технология AJAX также не оставлена без внимания — здесь предоставляется, пожалуй, самый удобный интерфейс доступа к ней. Реализована поддержка всех подвидов технологии AJAX, а также альтернативный вариант общения браузера с сервером через динамически создаваемый тег <script>. Этот вариант позволяет получать данные не только с того же домена, но и с любого другого при соблюдении некоторых условий. Получить с другого домена можно код JavaScript, а также объект в формате JSONP.

При отправке запроса на тот же домен добавляется заголовок X-Requested-With со значением "XMLHttpRequest":

X-Requested-With: XMLHttpRequest

Благодаря этому заголовку на сервере можно определить, откуда поступил запрос. Узнать, что запрос сделан с помощью AJAX, можно так:

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
   && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
   // Запрос выполнен с помощью AJAX
}

Метод load()

Метод load() позволяет загрузить данные с сервера в определенный элемент коллекции jQuery. После вставки данных объектная модель документа будет обновлена. Формат метода:

load(<URL>[ <Селектор>][, <Данные>][, <Функция обратного вызова>])

Если указан только первый параметр, то запрос будет сделан методом GET:

$('#btnSendGET').click( function() {
   var txt = $('#txt1').val();
   if (txt === '') {
      window.alert('Не заполнено поле');
      return;
   }
   var url = '/ajax.php?txt1=' + encodeURIComponent(txt);
   $('#div_ajax').load(url);
});

Получить отправленные данные на сервере можно с помощью глобального массива $_GET:

if ( isset($_GET['txt1']) ) {
   echo 'Метод GET – ';
   echo htmlspecialchars($_GET['txt1'], ENT_COMPAT, 'UTF-8');
}

В необязательном параметре <Селектор> можно указать селектор, который ограничит набор вставляемых данных. Например, при таком содержимом файла ajax.php:

<?php
header('Content-Type: text/html; charset=utf-8');
?>
<span id="span1">Данные 1</span>
<span id="span2">Данные 2</span>

инструкция

$('#div_ajax').load('/ajax.php');

загрузит в элемент с идентификатором div_ajax следующие данные:

<span id="span1">Данные 1</span>
<span id="span2">Данные 2</span>

Если указать инструкцию

$('#div_ajax').load('/ajax.php #span2');

то вставляемые данные будут ограничены элементом с идентификатором span2 и мы получим следующие данные:

<span id="span2">Данные 2</span>

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

{
   Параметр1: "Значение1",
   Параметр2: "Значение2",
   ...
   ПараметрN: "ЗначениеN"
}

Если параметр <Данные> указан, то запрос выполняется методом POST:

$('#div_ajax').load('/ajax.php', { txt1: 'Текст' });

Получить отправленные данные на сервере можно с помощью глобального массива $_POST:

if ( isset($_POST['txt1']) ) {
   echo 'Метод POST – ';
   echo htmlspecialchars($_POST['txt1'], ENT_COMPAT, 'UTF-8');
}

В качестве значения параметра <Данные> можно также указать сформированную строку запроса. В этом случае заботиться о допустимости символов необходимо самим. Запрос в этом случае выполняется методом GET:

$('#div_ajax').load('/ajax.php', 'txt1=' + encodeURIComponent('Текст'));

В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>(<Загруженные данные>[, <Статус>[, 
                            <Объект jqXHR>]]) {
   // ...
}

Функция будет вызвана после окончания загрузки, независимо от ее результата. Внутри функции доступен указатель this на текущий DOM-элемент. Если в первом параметре указать переменную, то через нее будут доступны данные, которые загружены с сервера. Через параметр <Статус> доступен статус запроса. Возвращаются следующие значения в виде строки:

  • error — при ошибке;
  • success — при успешном выполнении запроса.
  • Обработать ошибку загрузки можно, например, так:
$('#div_ajax').load('/ajax.php', { txt1: 'Текст' },
   function(data, status) {
      if (status == 'error') {
         $(this).text('Ошибка при загрузке');
      }
   });

Через параметр <Объект jqXHR> доступна ссылка на объект, имитирующий объект XMLHttpRequest. Обработать ошибку загрузки с помощью этого параметра можно, например, так:

$('#div_ajax').load('/ajax.php', { txt1: 'Текст' },
   function(data, status, xhr) {
      if (xhr.status != 200) {
         $(this).text('Ошибка при загрузке');
      }
   });

Рассмотрим использование метода load() на примере. Создадим документ с формой (листинг 3.19), который будет обмениваться данными с файлом ajax.php (см. листинг 3.6) методами GET и POST.

Листинг 3.19. Метод load()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Метод load()</title>
</head>
<body>
<div class="container my-3">
  <form action="ajax.php" method="GET" onsubmit="return false;">
    <div class="form-group">
      <input type="text" class="form-control" id="txt1">
    </div>
    <button type="button" class="btn btn-primary"
            id="btnSendGET">Отправить методом GET</button>
    <button type="button" class="btn btn-primary"
            id="btnSendPOST">Отправить методом POST</button>
  </form>
</div>
<div class="container my-3">
   <div id="div_ajax"></div>
</div>

<script src="/js/jquery.min.js"></script>
<script>
$('#btnSendGET').click( function() {
   // Отправка запроса методом GET
   var txt = $('#txt1').val();
   if (txt === '') {
      window.alert('Не заполнено поле');
      return;
   }
   var url = '/ajax.php?txt1=' + encodeURIComponent(txt);
   $('#div_ajax')
      .text('Загрузка...')
      .load(url, function(data, status, xhr) {
         if (xhr.status != 200) {
            $(this).text('Ошибка');
         }
         else $('#txt1').val('');
      });
});

$('#btnSendPOST').click( function() {
   // Отправка запроса методом POST
   var txt = $('#txt1').val();
   if (txt === '') {
      window.alert('Не заполнено поле');
      return;
   }
   var url = '/ajax.php';
   $('#div_ajax')
      .text('Загрузка...')
      .load(url, { txt1: txt }, function(data, status, xhr) {
         if (xhr.status != 200) {
            $(this).text('Ошибка');
         }
         else $('#txt1').val('');
      });
});
</script>
</body>
</html>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp