Jquery + ajax + json + php. пошаговое руководство

JQuery AJAX

Как всегда — от простого к сложному:

Это самый простейший пример использования ajax в JQuery. Теперь посмотрим, как можно отдать сереверу данные методом POST:

Это был пример отправки данных на сервер с помощью JQuery AJAX. Теперь немного о других форматах:

Кроме того, что мы можем повесить обработчик события «успех» (success), мы также можем повесить обработку других событий:

• success вызывается, когда запрос завершился успешно. Ему
  передаются параметры: возвращаемые сервером данные, строка, содержащая
  код ответа сервера, и объект xmlHttpRequest.
• error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки
• complete вызывается, когда запрос завершился. Просто
  завершился, независимо от того, удачей или нет. Передаются:
  xmlHttpRequest и строка, указывающая код успеха или ошибки.
• dataFilter вызывается перед вызовом success. Ему передаются
  полученные от сервера данные. В ней мы можем произвести какую-либо
  работу с данными и должны вернуть их (return …). Если есть эта
  функция, то в success попадает то, что мы возвращаем из dataFilter
• beforeSend вызывается, как это понятно из названия, до отправки запроса на сервер

Лично я, чаще всего пользуюсь success и error, и иногда complete, а остальные юзаю о-очень редко.
Теперь пример:

Это уже пример посерьёзней, по профессиональней, так сказать — с обработкой ошибок.

jQuery.get( url [, data ] [, success ] [, dataType ] )Возвращает: jqXHR

Описание: Загружает данные с сервера при помощи HTTP GET запроса

• • url
    Тип:

    Строка содержащая URL-адрес куда будет отправлен запрос.

  • data
    Тип: или

    Плоский объект или строка, которая будет отправлена на сервер с запросом.

  • success
    Тип: ( data, textStatus, jqXHR )
    Функция обратного вызова, выполняемая если запрос успешен. Требуется если предоставлен , но Вы можете использовать значение или .

  • dataType
    Тип:

    Тип данных ожидаемый с сервера. Используются по умолчанию: xml, json, script, text, html в зависимости от заданного URL-адреса.

• Ассоциативный массив (ключ/значение) настраивающий Ajax. Все поля кроме url не обязательны и могут быть установлены по умолчанию припомощи метода $.ajaxSetup(). Полный список параметров смотрите в описании метода jQuery.ajax( settings ). Метод запроса автоматически будет установлен в значение GET.

Это сокращенная функция Ajax, эквивалентна коду:

The callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.

As of jQuery 1.5, the callback function is also passed a (in jQuery 1.4, it was passed the object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the and parameters passed to the success callback are undefined.

Most implementations will specify a success handler:

This example fetches the requested HTML snippet and inserts it on the page.

The jqXHR Object

As of jQuery 1.5, all of jQuery’s Ajax methods return a superset of the object. This jQuery XHR object, or «jqXHR,» returned by implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The (for success), (for error), and (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the section of the documentation.

The Promise interface also allows jQuery’s Ajax methods, including , to chain multiple , , and callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

Deprecation Notice

The , , and callback methods are removed as of jQuery 3.0. You can use , , and instead.

• Due to browser security restrictions, most «Ajax» requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
• If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method. Alternatively, as of jQuery 1.5, the method of the object returned by jQuery.get() is also available for error handling.
• Script and JSONP requests are not subject to the same origin policy restrictions.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

Здесь будет ответ сервера

Технология AJAX, как указывает первая буква A в ее названии — асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение
об ожидании ответа, прокручивать страницу, и т.п.

Вот код кнопки в примере выше:

<input value="Голосовать!" onclick="vote()" type="button" />

При нажатии она вызывает функцию , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в ‘е под кнопкой:

<div id="vote_status">Здесь будет ответ сервера</div>

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции :

// javascript-код голосования из примера
function vote() {
	// (1) создать объект для запроса к серверу
	var req = getXmlHttp()  
       
        // (2)
	// span рядом с кнопкой
	// в нем будем отображать ход выполнения
	var statusElem = document.getElementById('vote_status') 
	
	req.onreadystatechange = function() {  
        // onreadystatechange активируется при получении ответа сервера

		if (req.readyState == 4) { 
            // если запрос закончил выполняться

			statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)

			if(req.status == 200) { 
                 // если статус 200 (ОК) - выдать ответ пользователю
				alert("Ответ сервера: "+req.responseText);
			}
			// тут можно добавить else с обработкой ошибок запроса
		}

	}

       // (3) задать адрес подключения
	req.open('GET', '/ajax_intro/vote.php', true);  

	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
	// для обработки ответа сервера
	 
        // (4)
	req.send(null);  // отослать запрос
  
        // (5)
	statusElem.innerHTML = 'Ожидаю ответа сервера...' 
}

Поток выполнения, использованный vote, довольно типичен и выглядит так:

1. Функция создает объект
2. назначает обработчик ответа сервера
3. открывает соединение
4. отправляет запрос вызовом (ответ сервера принимается срабатывающей в асинхронном режиме функцией )
5. показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией .

Пример: vote.php для примера с голосованием

<?php
sleep(3);
echo 'Ваш голос принят!';

Технология AJAX использует комбинацию:

• (X)HTML, CSS для подачи и стилизации информации
• DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
• XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный .
• JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Как работает AJAX

Понять основной принцип работы AJAX помогает представленное ниже изображение:

ajax1.jpg
ajax1.jpg

В работе технологии можно выделить 4 основных этапа:

1. Пользователь вызывает AJAX. Обычно это реализуется с помощью какой-либо кнопки, предлагающей получить больше информации.
2. Система отправляет на сервер запрос и всевозможные данные. Например, может потребоваться загрузка определенного файла либо конкретных сведений из базы данных.
3. Сервер получает ответ от базы данных и отправляет информацию в браузер.
4. JavaScript получает ответ, расшифровывает его и выводит пользователю.

Для обмена данными на странице создается объект XMLHttpRequest, он будет выполнять функцию посредника между браузером и сервером. Запросы могут отправляться в одном двух типов – GET и POST. В первом случае обращение производится к документу на сервере, в роли аргумента ему передается URL сайта. Для предотвращения прерывания запроса можно воспользоваться функцией JavaScript Escape. Для больших объемов данных применяется функция POST.

ajax2.jpg
ajax2.jpg

Серверная часть обрабатывает поступающие данные и на их основании создает новую информацию, которая будет отправлена клиенту.

AJAX применяет асинхронную передачу данных. Такой подход позволяет пользователю совершать различные действия во время «фонового» обмена информации с сервером. Действует оповещение пользователя о протекающих процессах, чтобы он не подумал, что сайт «завис» либо на нем произошел какой-то сбой.

В качестве ответа сервер использует простой текст, XML и JSON. В первом случае результат можно сразу же отобразить на странице. При получении XML-документа его обычно конвертируют в HTML и выводят на экран. Если ответ получен в формате JSON, клиенту следует выполнить полученный код. После этого будет сформирован объект JavaScript.

Создание асинхронного AJAX запроса (метод GET)

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

Для этого необходимо создать на сервере 2 файла в одном каталоге:

1. – HTML-страница, которая будет отображаться пользователю. В этой же страницы поместим
   скрипт, который будет осуществлять все необходимые действия для работы AJAX на стороне клиента.
2. – 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):

1. Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные
   никакие не нужны, то данный этап можно пропустить.

2. Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

3. Настроим запрос с помощью метода .

   Указываются следующие параметры:

   • Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
   • URL-адрес, который будет обрабатывать запрос на сервере.
   • Тип запроса: синхронный (false) или асинхронный (true).
   • Имя и пароль при необходимости.

4. Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
   именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
   выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
   .

   Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
   . Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
   иначе произошла ошибка (например, 404 – URL не найден).

5. Отправим запрос на сервер с помощью метода .

   Если используем для отправки запроса метод 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):

1. Получим данные. Если данные посланы через метод , то из глобального массива
   . А если данные переданы с помощью метода , то из глобального
   массива .
2. Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ.
   Выведем его с помощью .

<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
  $output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
 $output .= 'Ваш IP адрес неизвестен.';
}
echo $output;

Необходимые файлы и папки

3.1 Файловая структура

• app/
  • assets/
    • css/
    • js/
      • bootbox.min.js
      • jquery.min.js
  • products/
    • create-product.js
    • delete-product.js
    • read-products.js
    • read-one-product.js
    • update-product.js
  • app.js
• index.html

3.3 Подключение Bootstrap

Как вы можете видеть из файла index.html, мы включили Bootstrap через CDN.

Если вам нужно включить Bootstrap через загрузку, то это будет работать также.

3.4 Создание главного CSS файла

1. Создайте в корне папку app
2. В ней создайте папку assets
3. В папке assets создайте папку css
4. В папке css создайте файл style.css

Файл style.css — это наш главный файл CSS. Вы можете поместить в этот файл любой CSS для дополнительной стилизации веб-страницы. В нашем случае у нас есть следующий код CSS внутри файла style.css.

3.5 Установка JavaScript-библиотек jQuery и Bootbox.js

Откройте папку assets в папке app и создайте папку js

В папку js мы поместим библиотеки jQuery и Bootbox.js.

Библиотека jQuery необходима, чтобы сделать наше простое приложение простым. Скачайте jQuery по этой ссылке.

Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.

Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.

3.6 Создание файла app.js

Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.

В папке app создайте файл app.js со следующим содержимым.

3.7 Создание папки «products» и файлов для будущих скриптов

Теперь мы создадим несколько JavaScript файлов.

1. Внутри папки app создайте папку products
2. В папке products создайте следующие файлы:

• read-products.js
• create-product.js
• read-one-product.js
• update-product.js
• delete-product.js

Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.

Настройка базовых параметров Ajax-запросов

Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:

Задание тайм-аутов и заголовков

О том, что выполняются Ajax-запросы, пользователи часто даже не догадываются, и поэтому указание допустимой длительности тайм-аута — неплохая идея, поскольку это избавит пользователей от томительного ожидания завершения какого-то неведомого для них процесса. Пример задания тайм-аута для запроса приведен ниже:

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

Таймер запускается сразу же после передачи запроса браузеру, и большинство браузеров налагают ограничения на количество одновременно выполняющихся запросов. Это означает, что существует риск того, что к моменту истечения тайм-аута запрос даже не будет запущен. Чтобы избежать этого, необходимо располагать сведениями об ограничениях браузера, а также об объеме и ожидаемой длительности любых других выполняющихся Ajax-запросов.

Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.

Отправка изображения или файла ajax-запросом через jQuery

Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

html-код будет такой:

<button id="addfile"><span>Загрузить изображение</span><input type="file" id="load_file" value=""></button>

css код:

#addfile {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 34px;
}
#load_file {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 34px;
  font-size: 0px;
  opacity: 0;
  filter: alpha(opacity:0);
}
#load_file:hover {
  cursor: pointer;
}

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() {
  $('#load_file').on('change', loadfile);
});

function loadfile() {
  $('#addfile span').html('Загружено 0 %');
  files = $('#load_file').files;
  var form = new FormData();
  form.append('upload', files);
  $.ajax({
    url: '<url-адрес>',
    type: 'POST',
    data: form,
    cache: false,
    processData: false,
    contentType: false,
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress',ShowProgress, false);
      }
      return myXhr;
    },
    complete: function(data){
      $('#addfile span').html('Загрузить изображение');
      $('#load_file').val('');
    },
    success: function(message){
      alert(message);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(textStatus+' '+errorThrown);
    }
  });
}

function ShowProgress(e) {
  if(e.lengthComputable){
    $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %');
  }
}

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

  $message = '';
  if (empty($_FILES) || $_FILES == "none") {
    $message = 'Вы не выбрали файл';
  } else if ($_FILES == 0 || $_FILES > 9437184) {
    $message = 'Размер файла не соответствует нормам (максимум 9 Мб)';
  } else if (($_FILES != 'image/jpeg') && ($_FILES != 'image/pjpeg') &&
             ($_FILES != 'image/gif') && ($_FILES != 'image/png')) {
    $message = 'Допускается загрузка только картинок JPG, GIF и PNG.';
  } else if (!is_uploaded_file($_FILES)) {
    $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
  } else {
    $ftype = $_FILES;
    $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg'));
    if (move_uploaded_file($_FILES, $_SERVER.'/files/'.$fname)) {
      $message = 'Изображение успешно загружено.';
    } else {
      $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
    }
  }
  exit($message);

Информация о загруженном изображении будет содержаться в $_FILES, т.к. скриптом файл добавлялся так: form.append(‘upload’, files); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);